@smartbit4all/ng-client 1.1.30 → 1.1.32

package/fesm2015/smartbit4all-ng-client.mjs

@@ -4,7 +4,7 @@ import { __awaiter, __decorate, __param } from 'tslib';
 import { Subject, takeUntil, map, catchError, throwError, from } from 'rxjs';
 import { SmartSubject } from '@smartbit4all/subject';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpContext, HttpEventType, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { HttpHeaders, HttpContext, HttpParams, HttpEventType, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import * as i4 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, DatePipe, CommonModule } from '@angular/common';
 import * as i2 from '@angular/material/button';
@@ -15,15 +15,15 @@ import * as i3$1 from '@smartbit4all/navigation';
 import * as i4$1 from '@smartbit4all/dialog';
 import { SmartdialogService, SmartdialogModule } from '@smartbit4all/dialog';
 import { MatCommonModule } from '@angular/material/core';
-import * as i4$2 from '@angular/material/expansion';
+import * as i4$3 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { BrowserModule } from '@angular/platform-browser';
-import * as i3$2 from '@smartbit4all/icon';
+import * as i4$2 from '@smartbit4all/icon';
 import { SmartIconModule } from '@smartbit4all/icon';
 import * as i1$1 from '@angular/material/dialog';
 import * as i2$1 from '@angular/router';
 import { catchError as catchError$1, switchMap } from 'rxjs/operators';
-import * as i3$3 from '@angular/material/snack-bar';
+import * as i4$4 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import { Validators } from '@angular/forms';
 import * as i5 from '@smartbit4all/form';
@@ -1058,6 +1058,19 @@ class ViewService {
         }
         this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
     }
+    /**
+     * @param consumes string[] mime-types
+     * @return true: consumes contains 'multipart/form-data', false: otherwise
+     */
+    canConsumeForm(consumes) {
+        const form = 'multipart/form-data';
+        for (const consume of consumes) {
+            if (form === consume) {
+                return true;
+            }
+        }
+        return false;
+    }
     // @ts-ignore
     addToHttpParams(httpParams, value, key) {
         if (typeof value === "object" && value instanceof Date === false) {
@@ -1701,6 +1714,151 @@ class ViewService {
             reportProgress: reportProgress
         });
     }
+    uploadAction(uuid, uiActionRequest, param, content, observe = 'body', reportProgress = false, options) {
+        if (uuid === null || uuid === undefined) {
+            throw new Error('Required parameter uuid was null or undefined when calling uploadAction.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        // to determine the Content-Type header
+        const consumes = [
+            'multipart/form-data'
+        ];
+        const canConsumeForm = this.canConsumeForm(consumes);
+        let localVarFormParams;
+        let localVarUseForm = false;
+        let localVarConvertFormParamsToString = false;
+        // use FormData to transmit files using content-type "multipart/form-data"
+        // see https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data
+        localVarUseForm = canConsumeForm;
+        if (localVarUseForm) {
+            localVarFormParams = new FormData();
+        }
+        else {
+            localVarFormParams = new HttpParams({ encoder: this.encoder });
+        }
+        if (uiActionRequest !== undefined) {
+            localVarFormParams = localVarFormParams.append('uiActionRequest', uiActionRequest) || localVarFormParams;
+        }
+        if (param !== undefined) {
+            localVarFormParams = localVarFormParams.append('param', param) || localVarFormParams;
+        }
+        if (content !== undefined) {
+            localVarFormParams = localVarFormParams.append('content', content) || localVarFormParams;
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/component/${this.configuration.encodeParam({ name: "uuid", value: uuid, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid" })}/upload`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            body: localVarConvertFormParamsToString ? localVarFormParams.toString() : localVarFormParams,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
+    }
+    uploadMultipleAction(uuid, uiActionRequest, param, contents, observe = 'body', reportProgress = false, options) {
+        if (uuid === null || uuid === undefined) {
+            throw new Error('Required parameter uuid was null or undefined when calling uploadMultipleAction.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        // to determine the Content-Type header
+        const consumes = [
+            'multipart/form-data'
+        ];
+        const canConsumeForm = this.canConsumeForm(consumes);
+        let localVarFormParams;
+        let localVarUseForm = false;
+        let localVarConvertFormParamsToString = false;
+        // use FormData to transmit files using content-type "multipart/form-data"
+        // see https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data
+        localVarUseForm = canConsumeForm;
+        if (localVarUseForm) {
+            localVarFormParams = new FormData();
+        }
+        else {
+            localVarFormParams = new HttpParams({ encoder: this.encoder });
+        }
+        if (uiActionRequest !== undefined) {
+            localVarFormParams = localVarFormParams.append('uiActionRequest', uiActionRequest) || localVarFormParams;
+        }
+        if (param !== undefined) {
+            localVarFormParams = localVarFormParams.append('param', param) || localVarFormParams;
+        }
+        if (contents) {
+            if (localVarUseForm) {
+                contents.forEach((element) => {
+                    localVarFormParams = localVarFormParams.append('contents', element) || localVarFormParams;
+                });
+            }
+            else {
+                localVarFormParams = localVarFormParams.append('contents', [...contents].join(COLLECTION_FORMATS['csv'])) || localVarFormParams;
+            }
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/component/${this.configuration.encodeParam({ name: "uuid", value: uuid, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid" })}/uploadMultiple`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            body: localVarConvertFormParamsToString ? localVarFormParams.toString() : localVarFormParams,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
+    }
 }
 ViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 ViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewService, providedIn: 'root' });
@@ -1859,7 +2017,9 @@ const UiActionInputType = {
     None: 'none',
     Textfield: 'textfield',
     Textarea: 'textarea',
-    UserSelect: 'user_select'
+    UserSelect: 'user_select',
+    File: 'file',
+    MultipleFiles: 'multiple_files'
 };
 
 /**
@@ -2447,6 +2607,26 @@ class SmartViewContextService {
             // return await isCompleted.toPromise();
         });
     }
+    performUploadAction(uuid, uiActionRequest, param, content) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._performUploadAction({
+                uuid,
+                uiActionRequest,
+                param,
+                content,
+            });
+        });
+    }
+    performUploadMultipleAction(uuid, uiActionRequest, param, content) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._performUploadMultipleAction({
+                uuid,
+                uiActionRequest,
+                param,
+                content,
+            });
+        });
+    }
     dataChanged(uuid, dataChange) {
         return __awaiter(this, void 0, void 0, function* () {
             return yield this._dataChanged({ uuid, dataChange });
@@ -2484,6 +2664,20 @@ class SmartViewContextService {
                 .toPromise());
         });
     }
+    _performUploadAction(config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.handlePerformActionResponse(yield this.view
+                .uploadAction(config.uuid, JSON.stringify(config.uiActionRequest), config.param, config.content)
+                .toPromise());
+        });
+    }
+    _performUploadMultipleAction(config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.handlePerformActionResponse(yield this.view
+                .uploadMultipleAction(config.uuid, JSON.stringify(config.uiActionRequest), config.param, config.content)
+                .toPromise());
+        });
+    }
     _dataChanged(config) {
         return __awaiter(this, void 0, void 0, function* () {
             return yield this.handlePerformActionResponse(yield this.view.dataChanged(config.uuid, config.dataChange).toPromise());
@@ -2833,7 +3027,7 @@ class SmartDevToolDialogComponent {
     }
 }
 SmartDevToolDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartDevToolDialogComponent, deps: [{ token: SmartDevToolDialogService }], target: i0.ɵɵFactoryTarget.Component });
-SmartDevToolDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SmartDevToolDialogComponent, selector: "app-smart-dev-tool-dialog", ngImport: i0, template: "<div class=\"smartDevToolDialogContainer\">\r\n    <div class=\"header\">\r\n        <h2>Developer tool</h2>\r\n        <button mat-icon-button title=\"close\" (click)=\"close()\">\r\n            <smart-icon icon=\"close\"></smart-icon>\r\n        </button>\r\n    </div>\r\n    <div class=\"requestsContainer\">\r\n        <mat-accordion multi>\r\n            <mat-expansion-panel\r\n                class=\"requestCard\"\r\n                [ngClass]=\"apiCall.responseStatus === 200 ? '' : 'hasError'\"\r\n                *ngFor=\"let apiCall of descriptor?.apiCalls; let i = index\"\r\n            >\r\n                <mat-expansion-panel-header>\r\n                    <mat-panel-title>\r\n                        <div class=\"titlePanel\">\r\n                            <span class=\"date\">\r\n                                {{ apiCall.responseDate | smartDevToolDatePipe }}\r\n                            </span>\r\n                            <span class=\"urlText\">\r\n                                {{ apiCall.url }}\r\n                            </span>\r\n                            <div [ngClass]=\"apiCall.requestMethod\">\r\n                                {{ apiCall.requestMethod }}\r\n                            </div>\r\n                            <div [ngClass]=\"'statusCode-' + apiCall.responseStatus.toString()[0]\">\r\n                                {{ apiCall.responseStatus }}\r\n                            </div>\r\n                        </div>\r\n                    </mat-panel-title>\r\n                </mat-expansion-panel-header>\r\n\r\n                <div>\r\n                    <div class=\"table\">\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol heading\">Request</div>\r\n                            <div class=\"mainCol heading\">Response</div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Date</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.requestDate | smartDevToolDatePipe }}\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Date</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseDate | smartDevToolDatePipe }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Headers</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Headers</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.requestHeader\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.requestHeader)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.requestHeader\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.responseHeader\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.responseHeader)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.responseHeader\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\"></div>\r\n                                <div class=\"data\"></div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Status</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseStatus }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\"></div>\r\n                                <div class=\"data\"></div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Status text</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseStatusText }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Body</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Body</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.requestBody\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.requestBody)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.requestBody\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.responseBody\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.responseBody)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.responseBody\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Session Storage</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Local Storage</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Cookies</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.sessionStorage\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.sessionStorage)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.sessionStorage\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.localStorage\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.localStorage)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.localStorage\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.cookies\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.cookies)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.cookies\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </mat-expansion-panel>\r\n        </mat-accordion>\r\n    </div>\r\n    <div class=\"buttonsContainer\">\r\n        <button color=\"primary\" mat-raised-button (click)=\"copy()\">Copy</button>\r\n        <button color=\"warn\" mat-raised-button (click)=\"clear()\">Clear</button>\r\n    </div>\r\n</div>\r\n", styles: [".smartDevToolDialogContainer{display:flex;flex-direction:column;gap:1rem;width:78vw;height:90vh}.header{display:flex;flex-direction:row;justify-content:space-between}.requestsContainer{display:flex;flex-direction:column;gap:1rem;flex:1;overflow:auto}.requestCard{background-color:var(--primary-lighter-color);padding:.5rem;border-radius:.5rem;display:flex;flex-direction:column}.table{display:flex;flex-direction:column;gap:.25rem}.row{display:flex;flex-direction:row;gap:1rem}.mainCol{flex:1;display:flex;flex-direction:row;gap:.5rem;overflow:auto}.heading{font-weight:700}.data{word-wrap:break-word}.buttonsContainer{display:flex;flex-direction:row;justify-content:space-between}pre{outline:1px solid #000;padding:5px;margin:5px}.string{color:green}.number{color:#ff8c00}.boolean{color:#00f}.null{color:#f0f}.key{color:red}@media only screen and (max-width: 1000px){.row{flex-direction:column;gap:.5rem}.mainCol{flex-direction:column;overflow-x:auto;overflow-y:visible;flex:auto}.requestCard h4{font-size:small;overflow:auto}.smartDevToolDialogContainer{width:calc(80vw - 3rem)}}.hasError{background-color:var(--warn-lighter-color)}.titlePanel{flex:1;display:flex;flex-direction:row;gap:1rem}.urlText{flex:1;text-decoration:underline}.PATCH{color:#d38042}.DELETE{color:#a41e22}.GET{color:#0f6ab4}.POST{color:#10a54a}.PUT{color:#c5862b}.HEAD{color:#ffd20f}.statusCode-2{color:#5fb442}.statusCode-3{color:#5970f6}.statusCode-4{color:#ec6762}.statusCode-5{color:#f2a63b}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i4$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: i4$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "smartDevToolDatePipe": SmartDevToolDatePipe } });
+SmartDevToolDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SmartDevToolDialogComponent, selector: "app-smart-dev-tool-dialog", ngImport: i0, template: "<div class=\"smartDevToolDialogContainer\">\r\n    <div class=\"header\">\r\n        <h2>Developer tool</h2>\r\n        <button mat-icon-button title=\"close\" (click)=\"close()\">\r\n            <smart-icon icon=\"close\"></smart-icon>\r\n        </button>\r\n    </div>\r\n    <div class=\"requestsContainer\">\r\n        <mat-accordion multi>\r\n            <mat-expansion-panel\r\n                class=\"requestCard\"\r\n                [ngClass]=\"apiCall.responseStatus === 200 ? '' : 'hasError'\"\r\n                *ngFor=\"let apiCall of descriptor?.apiCalls; let i = index\"\r\n            >\r\n                <mat-expansion-panel-header>\r\n                    <mat-panel-title>\r\n                        <div class=\"titlePanel\">\r\n                            <span class=\"date\">\r\n                                {{ apiCall.responseDate | smartDevToolDatePipe }}\r\n                            </span>\r\n                            <span class=\"urlText\">\r\n                                {{ apiCall.url }}\r\n                            </span>\r\n                            <div [ngClass]=\"apiCall.requestMethod\">\r\n                                {{ apiCall.requestMethod }}\r\n                            </div>\r\n                            <div [ngClass]=\"'statusCode-' + apiCall.responseStatus.toString()[0]\">\r\n                                {{ apiCall.responseStatus }}\r\n                            </div>\r\n                        </div>\r\n                    </mat-panel-title>\r\n                </mat-expansion-panel-header>\r\n\r\n                <div>\r\n                    <div class=\"table\">\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol heading\">Request</div>\r\n                            <div class=\"mainCol heading\">Response</div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Date</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.requestDate | smartDevToolDatePipe }}\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Date</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseDate | smartDevToolDatePipe }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Headers</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Headers</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.requestHeader\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.requestHeader)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.requestHeader\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.responseHeader\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.responseHeader)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.responseHeader\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\"></div>\r\n                                <div class=\"data\"></div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Status</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseStatus }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\"></div>\r\n                                <div class=\"data\"></div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Status text</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseStatusText }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Body</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Body</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.requestBody\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.requestBody)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.requestBody\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.responseBody\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.responseBody)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.responseBody\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Session Storage</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Local Storage</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Cookies</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.sessionStorage\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.sessionStorage)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.sessionStorage\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.localStorage\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.localStorage)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.localStorage\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.cookies\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.cookies)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.cookies\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </mat-expansion-panel>\r\n        </mat-accordion>\r\n    </div>\r\n    <div class=\"buttonsContainer\">\r\n        <button color=\"primary\" mat-raised-button (click)=\"copy()\">Copy</button>\r\n        <button color=\"warn\" mat-raised-button (click)=\"clear()\">Clear</button>\r\n    </div>\r\n</div>\r\n", styles: [".smartDevToolDialogContainer{display:flex;flex-direction:column;gap:1rem;width:78vw;height:90vh}.header{display:flex;flex-direction:row;justify-content:space-between}.requestsContainer{display:flex;flex-direction:column;gap:1rem;flex:1;overflow:auto}.requestCard{background-color:var(--primary-lighter-color);padding:.5rem;border-radius:.5rem;display:flex;flex-direction:column}.table{display:flex;flex-direction:column;gap:.25rem}.row{display:flex;flex-direction:row;gap:1rem}.mainCol{flex:1;display:flex;flex-direction:row;gap:.5rem;overflow:auto}.heading{font-weight:700}.data{word-wrap:break-word}.buttonsContainer{display:flex;flex-direction:row;justify-content:space-between}pre{outline:1px solid #000;padding:5px;margin:5px}.string{color:green}.number{color:#ff8c00}.boolean{color:#00f}.null{color:#f0f}.key{color:red}@media only screen and (max-width: 1000px){.row{flex-direction:column;gap:.5rem}.mainCol{flex-direction:column;overflow-x:auto;overflow-y:visible;flex:auto}.requestCard h4{font-size:small;overflow:auto}.smartDevToolDialogContainer{width:calc(80vw - 3rem)}}.hasError{background-color:var(--warn-lighter-color)}.titlePanel{flex:1;display:flex;flex-direction:row;gap:1rem}.urlText{flex:1;text-decoration:underline}.PATCH{color:#d38042}.DELETE{color:#a41e22}.GET{color:#0f6ab4}.POST{color:#10a54a}.PUT{color:#c5862b}.HEAD{color:#ffd20f}.statusCode-2{color:#5fb442}.statusCode-3{color:#5970f6}.statusCode-4{color:#ec6762}.statusCode-5{color:#f2a63b}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: i4$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "smartDevToolDatePipe": SmartDevToolDatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartDevToolDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-smart-dev-tool-dialog', template: "<div class=\"smartDevToolDialogContainer\">\r\n    <div class=\"header\">\r\n        <h2>Developer tool</h2>\r\n        <button mat-icon-button title=\"close\" (click)=\"close()\">\r\n            <smart-icon icon=\"close\"></smart-icon>\r\n        </button>\r\n    </div>\r\n    <div class=\"requestsContainer\">\r\n        <mat-accordion multi>\r\n            <mat-expansion-panel\r\n                class=\"requestCard\"\r\n                [ngClass]=\"apiCall.responseStatus === 200 ? '' : 'hasError'\"\r\n                *ngFor=\"let apiCall of descriptor?.apiCalls; let i = index\"\r\n            >\r\n                <mat-expansion-panel-header>\r\n                    <mat-panel-title>\r\n                        <div class=\"titlePanel\">\r\n                            <span class=\"date\">\r\n                                {{ apiCall.responseDate | smartDevToolDatePipe }}\r\n                            </span>\r\n                            <span class=\"urlText\">\r\n                                {{ apiCall.url }}\r\n                            </span>\r\n                            <div [ngClass]=\"apiCall.requestMethod\">\r\n                                {{ apiCall.requestMethod }}\r\n                            </div>\r\n                            <div [ngClass]=\"'statusCode-' + apiCall.responseStatus.toString()[0]\">\r\n                                {{ apiCall.responseStatus }}\r\n                            </div>\r\n                        </div>\r\n                    </mat-panel-title>\r\n                </mat-expansion-panel-header>\r\n\r\n                <div>\r\n                    <div class=\"table\">\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol heading\">Request</div>\r\n                            <div class=\"mainCol heading\">Response</div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Date</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.requestDate | smartDevToolDatePipe }}\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Date</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseDate | smartDevToolDatePipe }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Headers</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Headers</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.requestHeader\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.requestHeader)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.requestHeader\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.responseHeader\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.responseHeader)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.responseHeader\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\"></div>\r\n                                <div class=\"data\"></div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Status</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseStatus }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\"></div>\r\n                                <div class=\"data\"></div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Status text</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseStatusText }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Body</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Body</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.requestBody\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.requestBody)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.requestBody\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.responseBody\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.responseBody)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.responseBody\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Session Storage</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Local Storage</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Cookies</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.sessionStorage\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.sessionStorage)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.sessionStorage\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.localStorage\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.localStorage)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.localStorage\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.cookies\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.cookies)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.cookies\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </mat-expansion-panel>\r\n        </mat-accordion>\r\n    </div>\r\n    <div class=\"buttonsContainer\">\r\n        <button color=\"primary\" mat-raised-button (click)=\"copy()\">Copy</button>\r\n        <button color=\"warn\" mat-raised-button (click)=\"clear()\">Clear</button>\r\n    </div>\r\n</div>\r\n", styles: [".smartDevToolDialogContainer{display:flex;flex-direction:column;gap:1rem;width:78vw;height:90vh}.header{display:flex;flex-direction:row;justify-content:space-between}.requestsContainer{display:flex;flex-direction:column;gap:1rem;flex:1;overflow:auto}.requestCard{background-color:var(--primary-lighter-color);padding:.5rem;border-radius:.5rem;display:flex;flex-direction:column}.table{display:flex;flex-direction:column;gap:.25rem}.row{display:flex;flex-direction:row;gap:1rem}.mainCol{flex:1;display:flex;flex-direction:row;gap:.5rem;overflow:auto}.heading{font-weight:700}.data{word-wrap:break-word}.buttonsContainer{display:flex;flex-direction:row;justify-content:space-between}pre{outline:1px solid #000;padding:5px;margin:5px}.string{color:green}.number{color:#ff8c00}.boolean{color:#00f}.null{color:#f0f}.key{color:red}@media only screen and (max-width: 1000px){.row{flex-direction:column;gap:.5rem}.mainCol{flex-direction:column;overflow-x:auto;overflow-y:visible;flex:auto}.requestCard h4{font-size:small;overflow:auto}.smartDevToolDialogContainer{width:calc(80vw - 3rem)}}.hasError{background-color:var(--warn-lighter-color)}.titlePanel{flex:1;display:flex;flex-direction:row;gap:1rem}.urlText{flex:1;text-decoration:underline}.PATCH{color:#d38042}.DELETE{color:#a41e22}.GET{color:#0f6ab4}.POST{color:#10a54a}.PUT{color:#c5862b}.HEAD{color:#ffd20f}.statusCode-2{color:#5fb442}.statusCode-3{color:#5970f6}.statusCode-4{color:#ec6762}.statusCode-5{color:#f2a63b}\n"] }]
@@ -2888,7 +3082,7 @@ class SmartDevToolFloatingButtonComponent {
     }
 }
 SmartDevToolFloatingButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartDevToolFloatingButtonComponent, deps: [{ token: SmartDevToolDialogService }], target: i0.ɵɵFactoryTarget.Component });
-SmartDevToolFloatingButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SmartDevToolFloatingButtonComponent, selector: "smart-session-dev-tool", ngImport: i0, template: "<button\r\n    *ngIf=\"isShown\"\r\n    mat-fab\r\n    [color]=\"errorsCount.length ? 'warn' : 'accent'\"\r\n    class=\"floatingButton\"\r\n    extended\r\n    title=\"devTool\"\r\n    (click)=\"openDevToolDialog()\"\r\n>\r\n    <smart-icon color=\"white\" icon=\"developer_mode\"></smart-icon>\r\n    {{ errorsCount }}\r\n</button>\r\n", styles: [".floatingButton{position:fixed;right:2rem;bottom:2rem}.mat-icon.mat-white{color:#fff}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SmartDevToolFloatingButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SmartDevToolFloatingButtonComponent, selector: "smart-session-dev-tool", ngImport: i0, template: "<button\r\n    *ngIf=\"isShown\"\r\n    mat-fab\r\n    [color]=\"errorsCount.length ? 'warn' : 'accent'\"\r\n    class=\"floatingButton\"\r\n    extended\r\n    title=\"devTool\"\r\n    (click)=\"openDevToolDialog()\"\r\n>\r\n    <smart-icon color=\"white\" icon=\"developer_mode\"></smart-icon>\r\n    {{ errorsCount }}\r\n</button>\r\n", styles: [".floatingButton{position:fixed;right:2rem;bottom:2rem}.mat-icon.mat-white{color:#fff}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartDevToolFloatingButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'smart-session-dev-tool', template: "<button\r\n    *ngIf=\"isShown\"\r\n    mat-fab\r\n    [color]=\"errorsCount.length ? 'warn' : 'accent'\"\r\n    class=\"floatingButton\"\r\n    extended\r\n    title=\"devTool\"\r\n    (click)=\"openDevToolDialog()\"\r\n>\r\n    <smart-icon color=\"white\" icon=\"developer_mode\"></smart-icon>\r\n    {{ errorsCount }}\r\n</button>\r\n", styles: [".floatingButton{position:fixed;right:2rem;bottom:2rem}.mat-icon.mat-white{color:#fff}\n"] }]
@@ -3536,7 +3730,7 @@ class UiActionConfirmDialogComponent {
     }
 }
 UiActionConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionConfirmDialogComponent, deps: [{ token: UiActionConfirmDialogService }, { token: UiActionDescriptorService }], target: i0.ɵɵFactoryTarget.Component });
-UiActionConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UiActionConfirmDialogComponent, selector: "app-ui-action-confirm-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\r\n\t<div class=\"headerContainer\">\r\n\t\t<h3 class=\"color-accent-700\">\r\n\t\t\t{{ getTitle() }}\r\n\t\t</h3>\r\n\t\t<button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n\t\t\t<smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<p>\r\n\t\t{{ getText() }}\r\n\t</p>\r\n\t<div class=\"folderNameDialogButtonsContainer\">\r\n\t\t<button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n\t\t\t{{ getCancelButtonLabel() }}\r\n\t\t</button>\r\n\t\t<button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"doAction()\">\r\n\t\t\t{{ getActionButtonLabel() }}\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }] });
+UiActionConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UiActionConfirmDialogComponent, selector: "app-ui-action-confirm-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\r\n\t<div class=\"headerContainer\">\r\n\t\t<h3 class=\"color-accent-700\">\r\n\t\t\t{{ getTitle() }}\r\n\t\t</h3>\r\n\t\t<button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n\t\t\t<smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<p>\r\n\t\t{{ getText() }}\r\n\t</p>\r\n\t<div class=\"folderNameDialogButtonsContainer\">\r\n\t\t<button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n\t\t\t{{ getCancelButtonLabel() }}\r\n\t\t</button>\r\n\t\t<button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"doAction()\">\r\n\t\t\t{{ getActionButtonLabel() }}\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-ui-action-confirm-dialog", template: "<div class=\"folderNameDialogContainer\">\r\n\t<div class=\"headerContainer\">\r\n\t\t<h3 class=\"color-accent-700\">\r\n\t\t\t{{ getTitle() }}\r\n\t\t</h3>\r\n\t\t<button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n\t\t\t<smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<p>\r\n\t\t{{ getText() }}\r\n\t</p>\r\n\t<div class=\"folderNameDialogButtonsContainer\">\r\n\t\t<button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n\t\t\t{{ getCancelButtonLabel() }}\r\n\t\t</button>\r\n\t\t<button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"doAction()\">\r\n\t\t\t{{ getActionButtonLabel() }}\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"] }]
@@ -3686,7 +3880,7 @@ class UiActionInputDialogComponent {
     }
 }
 UiActionInputDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionInputDialogComponent, deps: [{ token: UiActionInputDialogService }, { token: UiActionDescriptorService }], target: i0.ɵɵFactoryTarget.Component });
-UiActionInputDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UiActionInputDialogComponent, selector: "smart-ui-action-input-dialog", viewQueries: [{ propertyName: "folderFormChild", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\r\n\t<div class=\"headerContainer\">\r\n\t\t<h3 class=\"color-accent-700\">\r\n\t\t\t{{ getTitle() }}\r\n\t\t</h3>\r\n\t\t<button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n\t\t\t<smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<p>\r\n\t\t{{ getText() }}\r\n\t</p>\r\n\t<smartform #form [smartForm]=\"folderForm\"></smartform>\r\n\t<div class=\"folderNameDialogButtonsContainer\">\r\n\t\t<button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n\t\t\t{{ getCancelButtonLabel() }}\r\n\t\t</button>\r\n\t\t<button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"save()\">\r\n\t\t\t{{ getActionButtonLabel() }}\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.SmartformComponent, selector: "smartform", inputs: ["smartForm"] }] });
+UiActionInputDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UiActionInputDialogComponent, selector: "smart-ui-action-input-dialog", viewQueries: [{ propertyName: "folderFormChild", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\r\n\t<div class=\"headerContainer\">\r\n\t\t<h3 class=\"color-accent-700\">\r\n\t\t\t{{ getTitle() }}\r\n\t\t</h3>\r\n\t\t<button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n\t\t\t<smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<p>\r\n\t\t{{ getText() }}\r\n\t</p>\r\n\t<smartform #form [smartForm]=\"folderForm\"></smartform>\r\n\t<div class=\"folderNameDialogButtonsContainer\">\r\n\t\t<button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n\t\t\t{{ getCancelButtonLabel() }}\r\n\t\t</button>\r\n\t\t<button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"save()\">\r\n\t\t\t{{ getActionButtonLabel() }}\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.SmartformComponent, selector: "smartform", inputs: ["smartForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionInputDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'smart-ui-action-input-dialog', template: "<div class=\"folderNameDialogContainer\">\r\n\t<div class=\"headerContainer\">\r\n\t\t<h3 class=\"color-accent-700\">\r\n\t\t\t{{ getTitle() }}\r\n\t\t</h3>\r\n\t\t<button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n\t\t\t<smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<p>\r\n\t\t{{ getText() }}\r\n\t</p>\r\n\t<smartform #form [smartForm]=\"folderForm\"></smartform>\r\n\t<div class=\"folderNameDialogButtonsContainer\">\r\n\t\t<button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n\t\t\t{{ getCancelButtonLabel() }}\r\n\t\t</button>\r\n\t\t<button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"save()\">\r\n\t\t\t{{ getActionButtonLabel() }}\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"] }]
@@ -3741,10 +3935,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: i2$1.Router }]; } });
 
+class UiActionFileUploadDialogComponent {
+    constructor(service, manager) {
+        this.service = service;
+        this.manager = manager;
+        this.code = this.service.action.code;
+        this.setUp();
+    }
+    ngOnDestroy() {
+        this.service._destroy$.next();
+        this.cancel();
+    }
+    setUp() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.descriptor = yield this.manager.getActionDescriptor(this.service.action);
+            this.isMultiple = this.service.isMultiple;
+            this.i18n = {
+                addFile: (_b = (_a = this.descriptor.upload) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : 'dokumentum hozzáadása',
+                browseOrDrag: (_d = (_c = this.descriptor.upload) === null || _c === void 0 ? void 0 : _c.description) !== null && _d !== void 0 ? _d : 'tallózás vagy behúzás',
+                formats: (_f = (_e = this.descriptor.upload) === null || _e === void 0 ? void 0 : _e.formats) !== null && _f !== void 0 ? _f : '',
+                maxSize: (_h = (_g = this.descriptor.upload) === null || _g === void 0 ? void 0 : _g.maxSize) !== null && _h !== void 0 ? _h : '',
+                upload: (_j = this.descriptor.upload) === null || _j === void 0 ? void 0 : _j.uploadButtonTitle,
+            };
+            // TODO set max size and file formats by UiAction.params
+            if (this.descriptor[this.service.inputTypeName]) {
+                this.dialogType = this.service.inputTypeName;
+            }
+            else {
+                this.dialogType = this.descriptor.inputDialog ? 'inputDialog' : 'dialog';
+            }
+        });
+    }
+    getTitle() {
+        return this.descriptor[this.dialogType].title;
+    }
+    getText() {
+        var _a;
+        return (_a = this.descriptor[this.dialogType].text) !== null && _a !== void 0 ? _a : '';
+    }
+    getActionButtonLabel() {
+        return this.descriptor[this.dialogType].actionButton.caption;
+    }
+    getActionButtonColor() {
+        return this.descriptor[this.dialogType].actionButton.color;
+    }
+    getCancelButtonLabel() {
+        return this.descriptor[this.dialogType].cancelButton.caption;
+    }
+    getCancelButtonColor() {
+        return this.descriptor[this.dialogType].cancelButton.color;
+    }
+    upload(files) {
+        this.service.onSave(files);
+    }
+    cancel() {
+        this.service.cancel();
+    }
+}
+UiActionFileUploadDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionFileUploadDialogComponent, deps: [{ token: UiActionFileUploadDialogService }, { token: UiActionDescriptorService }], target: i0.ɵɵFactoryTarget.Component });
+UiActionFileUploadDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UiActionFileUploadDialogComponent, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\r\n  <div class=\"headerContainer\">\r\n    <h3 class=\"color-accent-700\">\r\n      {{ getTitle() }}\r\n    </h3>\r\n    <button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n      <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n    </button>\r\n  </div>\r\n  <p>\r\n    {{ getText() }}\r\n  </p>\r\n  <smartfileuploader\r\n    [i18n]=\"i18n\"\r\n    [fileFormats]=\"fileFormats\"\r\n    [maxSizeMb]=\"maxSizeMb\"\r\n    [uploadCallback]=\"upload.bind(this)\"\r\n    [isMultiple]=\"isMultiple\"\r\n  ></smartfileuploader>\r\n  <div class=\"folderNameDialogButtonsContainer\">\r\n    <button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n      {{ getCancelButtonLabel() }}\r\n    </button>\r\n    <!-- <button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"upload()\">\r\n      {{ getActionButtonLabel() }}\r\n    </button> -->\r\n  </div>\r\n</div>\r\n", styles: [""], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionFileUploadDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-ui-action-file-upload-dialog', template: "<div class=\"folderNameDialogContainer\">\r\n  <div class=\"headerContainer\">\r\n    <h3 class=\"color-accent-700\">\r\n      {{ getTitle() }}\r\n    </h3>\r\n    <button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n      <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n    </button>\r\n  </div>\r\n  <p>\r\n    {{ getText() }}\r\n  </p>\r\n  <smartfileuploader\r\n    [i18n]=\"i18n\"\r\n    [fileFormats]=\"fileFormats\"\r\n    [maxSizeMb]=\"maxSizeMb\"\r\n    [uploadCallback]=\"upload.bind(this)\"\r\n    [isMultiple]=\"isMultiple\"\r\n  ></smartfileuploader>\r\n  <div class=\"folderNameDialogButtonsContainer\">\r\n    <button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n      {{ getCancelButtonLabel() }}\r\n    </button>\r\n    <!-- <button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"upload()\">\r\n      {{ getActionButtonLabel() }}\r\n    </button> -->\r\n  </div>\r\n</div>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: UiActionFileUploadDialogService }, { type: UiActionDescriptorService }]; } });
+
+class UiActionFileUploadDialogService extends SmartdialogService {
+    constructor(dialog, router) {
+        super(dialog, router);
+        this._destroy$ = new Subject();
+        this.onAction = new SmartSubject(this._destroy$);
+        this.isMultiple = false;
+    }
+    setDataAndOpenDialog(action, nodeName) {
+        this.action = action;
+        this.nodeName = nodeName;
+        this.openDialog();
+    }
+    openDialog() {
+        this.files = undefined;
+        this.onAction = new SmartSubject(this._destroy$);
+        const dialogData = {
+            content: {
+                title: '',
+            },
+            size: {},
+            customComponent: UiActionFileUploadDialogComponent,
+        };
+        this.createDialog(dialogData, UiActionFileUploadDialogComponent);
+    }
+    onSave(files) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.files = files;
+            this.onAction.complete();
+            this.closeDialog();
+            this.onAction = new SmartSubject(this._destroy$);
+        });
+    }
+    cancel() {
+        this.onAction.complete();
+        this.closeDialog();
+        this.onAction = new SmartSubject(this._destroy$);
+    }
+}
+UiActionFileUploadDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionFileUploadDialogService, deps: [{ token: i1$1.MatDialog }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+UiActionFileUploadDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionFileUploadDialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionFileUploadDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: i2$1.Router }]; } });
+
 class UiActionService {
-    constructor(confirmDialogService, textFieldDialogService, _snackBar) {
+    constructor(confirmDialogService, textFieldDialogService, fileUploadDialogService, _snackBar) {
         this.confirmDialogService = confirmDialogService;
         this.textFieldDialogService = textFieldDialogService;
+        this.fileUploadDialogService = fileUploadDialogService;
         this._snackBar = _snackBar;
         this._destroy$ = new Subject();
     }
@@ -3818,6 +4125,10 @@ class UiActionService {
                     return yield this.handleInputTypeTextField(inputTypeName, uiAction, uiActionRequest);
                 case UiActionInputType.UserSelect:
                     return yield this.handleInputTypeUserSelect(inputTypeName, uiAction, uiActionRequest);
+                case UiActionInputType.File:
+                    return yield this.handleInputTypeUpload(inputTypeName, uiAction, uiActionRequest, false);
+                case UiActionInputType.MultipleFiles:
+                    return yield this.handleInputTypeUpload(inputTypeName, uiAction, uiActionRequest, true);
                 default:
                     return uiActionRequest;
             }
@@ -3846,6 +4157,24 @@ class UiActionService {
             return uiActionRequest;
         });
     }
+    handleInputTypeUpload(inputTypeName, uiAction, uiActionRequest, isMultiple) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.fileUploadDialogService.inputTypeName = inputTypeName;
+            this.fileUploadDialogService.action = uiAction;
+            this.fileUploadDialogService.isMultiple = isMultiple;
+            this.fileUploadDialogService.openDialog();
+            yield this.fileUploadDialogService.onAction.toPromise();
+            let files = this.fileUploadDialogService.files;
+            if (!files || !files.length) {
+                console.error('There was no response from InputDialog');
+                return;
+            }
+            uiActionRequest.params = Object.assign(Object.assign({}, uiActionRequest.params), { _files: files, isMultiple, param: uiAction.inputType === 'file' || uiAction.inputType === 'multiple_files'
+                    ? 'INPUT'
+                    : 'INPUT2' });
+            return uiActionRequest;
+        });
+    }
     handleInputTypeUserSelect(inputTypeName, uiAction, uiActionRequest) {
         return __awaiter(this, void 0, void 0, function* () {
             let response = yield this.uiActionModel.serviceToUse.handleSpecificDemandsAsynchronously(uiAction, uiActionRequest);
@@ -3887,14 +4216,14 @@ class UiActionService {
         });
     }
 }
-UiActionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionService, deps: [{ token: UiActionConfirmDialogService }, { token: UiActionInputDialogService }, { token: i3$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
+UiActionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionService, deps: [{ token: UiActionConfirmDialogService }, { token: UiActionInputDialogService }, { token: UiActionFileUploadDialogService }, { token: i4$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
 UiActionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: UiActionConfirmDialogService }, { type: UiActionInputDialogService }, { type: i3$3.MatSnackBar }]; } });
+        }], ctorParameters: function () { return [{ type: UiActionConfirmDialogService }, { type: UiActionInputDialogService }, { type: UiActionFileUploadDialogService }, { type: i4$4.MatSnackBar }]; } });
 
 class UiActionToolbarComponent {
     constructor(service, inject) {
@@ -3993,7 +4322,7 @@ class UiActionToolbarComponent {
     }
 }
 UiActionToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionToolbarComponent, deps: [{ token: UiActionService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-UiActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: "uiActionModels", uiActionDescriptorService: "uiActionDescriptorService" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"uiActionButtonsContainer\">\r\n  <button\r\n    *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions\"\r\n    mat-button\r\n    [ngClass]=\"getType(uiActionModel)\"\r\n    class=\"{{ uiActionModel.cssClass }}\"\r\n    [color]=\"uiActionModel.descriptor?.color\"\r\n    (click)=\"onActionClicked($event, uiActionModel)\"\r\n    (dblclick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n  >\r\n    <div *ngIf=\"isOnlyIcon(uiActionModel); then iconOnly; else text\"></div>\r\n    <ng-template #iconOnly>\r\n      <smart-icon\r\n        *ngIf=\"uiActionModel.descriptor?.icon\"\r\n        [icon]=\"uiActionModel.descriptor!.icon!\"\r\n        [color]=\"uiActionModel.descriptor?.iconColor ?? uiActionModel.descriptor?.color\"\r\n      ></smart-icon>\r\n    </ng-template>\r\n    <ng-template #text>\r\n      <smart-icon\r\n        *ngIf=\"\r\n          uiActionModel.descriptor?.icon &&\r\n          uiActionModel.descriptor?.iconPosition === iconPosition().Pre\r\n        \"\r\n        [icon]=\"uiActionModel.descriptor!.icon!\"\r\n        [color]=\"uiActionModel.descriptor?.iconColor ?? uiActionModel.descriptor?.color\"\r\n      ></smart-icon>\r\n      {{ uiActionModel.descriptor?.title }}\r\n      <smart-icon\r\n        *ngIf=\"\r\n          uiActionModel.descriptor?.icon &&\r\n          uiActionModel.descriptor?.iconPosition === iconPosition().Post\r\n        \"\r\n        [icon]=\"uiActionModel.descriptor!.icon!\"\r\n        [color]=\"uiActionModel.descriptor?.iconColor ?? uiActionModel.descriptor?.color\"\r\n      ></smart-icon>\r\n    </ng-template>\r\n  </button>\r\n</div>\r\n", styles: [".uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap;min-height:2.25rem}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+UiActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: "uiActionModels", uiActionDescriptorService: "uiActionDescriptorService" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"uiActionButtonsContainer\">\r\n  <button\r\n    *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions\"\r\n    mat-button\r\n    [ngClass]=\"getType(uiActionModel)\"\r\n    class=\"{{ uiActionModel.cssClass }}\"\r\n    [color]=\"uiActionModel.descriptor?.color\"\r\n    (click)=\"onActionClicked($event, uiActionModel)\"\r\n    (dblclick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n  >\r\n    <div *ngIf=\"isOnlyIcon(uiActionModel); then iconOnly; else text\"></div>\r\n    <ng-template #iconOnly>\r\n      <smart-icon\r\n        *ngIf=\"uiActionModel.descriptor?.icon\"\r\n        [icon]=\"uiActionModel.descriptor!.icon!\"\r\n        [color]=\"uiActionModel.descriptor?.iconColor ?? uiActionModel.descriptor?.color\"\r\n      ></smart-icon>\r\n    </ng-template>\r\n    <ng-template #text>\r\n      <smart-icon\r\n        *ngIf=\"\r\n          uiActionModel.descriptor?.icon &&\r\n          uiActionModel.descriptor?.iconPosition === iconPosition().Pre\r\n        \"\r\n        [icon]=\"uiActionModel.descriptor!.icon!\"\r\n        [color]=\"uiActionModel.descriptor?.iconColor ?? uiActionModel.descriptor?.color\"\r\n      ></smart-icon>\r\n      {{ uiActionModel.descriptor?.title }}\r\n      <smart-icon\r\n        *ngIf=\"\r\n          uiActionModel.descriptor?.icon &&\r\n          uiActionModel.descriptor?.iconPosition === iconPosition().Post\r\n        \"\r\n        [icon]=\"uiActionModel.descriptor!.icon!\"\r\n        [color]=\"uiActionModel.descriptor?.iconColor ?? uiActionModel.descriptor?.color\"\r\n      ></smart-icon>\r\n    </ng-template>\r\n  </button>\r\n</div>\r\n", styles: [".uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap;min-height:2.25rem}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'smart-ui-action-toolbar', template: "<div class=\"uiActionButtonsContainer\">\r\n  <button\r\n    *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions\"\r\n    mat-button\r\n    [ngClass]=\"getType(uiActionModel)\"\r\n    class=\"{{ uiActionModel.cssClass }}\"\r\n    [color]=\"uiActionModel.descriptor?.color\"\r\n    (click)=\"onActionClicked($event, uiActionModel)\"\r\n    (dblclick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n  >\r\n    <div *ngIf=\"isOnlyIcon(uiActionModel); then iconOnly; else text\"></div>\r\n    <ng-template #iconOnly>\r\n      <smart-icon\r\n        *ngIf=\"uiActionModel.descriptor?.icon\"\r\n        [icon]=\"uiActionModel.descriptor!.icon!\"\r\n        [color]=\"uiActionModel.descriptor?.iconColor ?? uiActionModel.descriptor?.color\"\r\n      ></smart-icon>\r\n    </ng-template>\r\n    <ng-template #text>\r\n      <smart-icon\r\n        *ngIf=\"\r\n          uiActionModel.descriptor?.icon &&\r\n          uiActionModel.descriptor?.iconPosition === iconPosition().Pre\r\n        \"\r\n        [icon]=\"uiActionModel.descriptor!.icon!\"\r\n        [color]=\"uiActionModel.descriptor?.iconColor ?? uiActionModel.descriptor?.color\"\r\n      ></smart-icon>\r\n      {{ uiActionModel.descriptor?.title }}\r\n      <smart-icon\r\n        *ngIf=\"\r\n          uiActionModel.descriptor?.icon &&\r\n          uiActionModel.descriptor?.iconPosition === iconPosition().Post\r\n        \"\r\n        [icon]=\"uiActionModel.descriptor!.icon!\"\r\n        [color]=\"uiActionModel.descriptor?.iconColor ?? uiActionModel.descriptor?.color\"\r\n      ></smart-icon>\r\n    </ng-template>\r\n  </button>\r\n</div>\r\n", styles: [".uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap;min-height:2.25rem}\n"] }]
@@ -4011,7 +4340,8 @@ SmartViewContextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         SmartViewRedirect,
         UiActionToolbarComponent,
         UiActionInputDialogComponent,
-        UiActionConfirmDialogComponent], imports: [CommonModule,
+        UiActionConfirmDialogComponent,
+        UiActionFileUploadDialogComponent], imports: [CommonModule,
         HttpClientModule,
         MatCommonModule,
         MatButtonModule,
@@ -4046,6 +4376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         UiActionToolbarComponent,
                         UiActionInputDialogComponent,
                         UiActionConfirmDialogComponent,
+                        UiActionFileUploadDialogComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -4234,7 +4565,21 @@ let SmartComponentApiClient = class SmartComponentApiClient {
     }
     performUiActionRequest(uiActionRequest, widgetId, nodeId) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (widgetId && nodeId) {
+            if (uiActionRequest.params['_files']) {
+                const param = uiActionRequest.params['param'];
+                const files = uiActionRequest.params['_files'];
+                const isMultiple = uiActionRequest.params['isMultiple'];
+                delete uiActionRequest.params['param'];
+                delete uiActionRequest.params['_files'];
+                delete uiActionRequest.params['isMultiple'];
+                if (!isMultiple) {
+                    yield this.viewContext.performUploadAction(this.uuid, uiActionRequest, param, files[0]);
+                }
+                else {
+                    yield this.viewContext.performUploadMultipleAction(this.uuid, uiActionRequest, param, files);
+                }
+            }
+            else if (widgetId && nodeId) {
                 yield this.viewContext.performWidgetAction(this.uuid, widgetId, nodeId, uiActionRequest);
             }
             else if (widgetId) {