@smartbit4all/ng-client 4.3.11 → 4.3.13

package/fesm2022/smartbit4all-ng-client.mjs

@@ -5848,334 +5848,688 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }], ctorParameters: () => [{ type: SmartViewContextService }] });
 
-class SuccessSnackBarComponent {
-    constructor(data, viewContext, manager) {
-        this.data = data;
-        this.viewContext = viewContext;
-        this.manager = manager;
-        this.manager.getActionDescriptor(data).then((descriptor) => {
-            if (descriptor.feedbackText) {
-                this.text = descriptor.feedbackText;
-            }
-            else {
-                this.text = this.viewContext.commonFeedbackText ?? "A mentés sikeres volt!";
-            }
-        });
+/**
+ * Custom HttpParameterCodec
+ * Workaround for https://github.com/angular/angular/issues/18261
+ */
+let CustomHttpParameterCodec$5 = class CustomHttpParameterCodec {
+    encodeKey(k) {
+        return encodeURIComponent(k);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SuccessSnackBarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: SmartViewContextService }, { token: UiActionDescriptorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SuccessSnackBarComponent, selector: "app-success-snack-bar", ngImport: i0, template: "<span class=\"successSnakBarContainer\" matSnackBarLabel> {{ text }} </span>\r\n", styles: ["::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.successSnakBarContainer{color:#fff}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SuccessSnackBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "app-success-snack-bar", template: "<span class=\"successSnakBarContainer\" matSnackBarLabel> {{ text }} </span>\r\n", styles: ["::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.successSnakBarContainer{color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_SNACK_BAR_DATA]
-                }] }, { type: SmartViewContextService }, { type: UiActionDescriptorService }] });
-
-class InvalidFieldsSnackBarComponent {
-    constructor(data) {
-        this.data = data;
+    encodeValue(v) {
+        return encodeURIComponent(v);
     }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InvalidFieldsSnackBarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: InvalidFieldsSnackBarComponent, selector: "app-invalid-fields-snack-bar", ngImport: i0, template: "<div class=\"invalidFieldsSnackBar\">\r\n  <!-- <div class=\"invalidFieldsSnackBarContainer\" *ngIf=\"data.message\">\r\n    <span class=\"successSnakBarContainer\" matSnackBarLabel>\r\n      {{ data.message }}\r\n    </span>\r\n  </div> -->\r\n  <div class=\"invalidFieldsSnackBarContainer\">\r\n    <span class=\"invalidFieldsMessage\" matSnackBarLabel> Hi\u00E1nyos vagy hib\u00E1s adatok! </span>\r\n  </div>\r\n</div>\r\n", styles: [".invalidFieldsSnackBar ::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.invalidFieldsMessage{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$4.MatSnackBarLabel, selector: "[matSnackBarLabel]" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InvalidFieldsSnackBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-invalid-fields-snack-bar', template: "<div class=\"invalidFieldsSnackBar\">\r\n  <!-- <div class=\"invalidFieldsSnackBarContainer\" *ngIf=\"data.message\">\r\n    <span class=\"successSnakBarContainer\" matSnackBarLabel>\r\n      {{ data.message }}\r\n    </span>\r\n  </div> -->\r\n  <div class=\"invalidFieldsSnackBarContainer\">\r\n    <span class=\"invalidFieldsMessage\" matSnackBarLabel> Hi\u00E1nyos vagy hib\u00E1s adatok! </span>\r\n  </div>\r\n</div>\r\n", styles: [".invalidFieldsSnackBar ::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.invalidFieldsMessage{color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_SNACK_BAR_DATA]
-                }] }] });
-
-class UiActionService {
-    constructor(confirmDialogService, textFieldDialogService, fileUploadDialogService, _snackBar) {
-        this.confirmDialogService = confirmDialogService;
-        this.textFieldDialogService = textFieldDialogService;
-        this.fileUploadDialogService = fileUploadDialogService;
-        this._snackBar = _snackBar;
-        this._destroy$ = new Subject();
+    decodeKey(k) {
+        return decodeURIComponent(k);
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
+    decodeValue(v) {
+        return decodeURIComponent(v);
     }
-    async execute(uiAction, options) {
-        let uiActionRequest;
-        uiActionRequest = {
-            code: uiAction.code,
-            path: uiAction.path,
-            identifier: uiAction.identifier,
-            params: uiAction.params ?? {},
-        };
-        if (uiAction.submit || uiAction.model) {
-            // submit: with validation, model: without validation. both can be undefined
-            const validate = uiAction.submit || !uiAction.model;
-            if ('reSubscribeToChange' in this.uiActionModel.serviceToUse) {
-                if (!validate) {
-                    console.error(`Validate = false, but UseUiAction doesn't support it`);
-                }
-                this.uiActionModel.serviceToUse.submit.next();
-                try {
-                    await this.uiActionModel.serviceToUse.submit.toPromise();
-                    this.uiActionModel.serviceToUse.submit = new SmartSubject(this._destroy$);
-                    this.uiActionModel.serviceToUse.reSubscribeToChange.next();
-                }
-                catch (error) {
-                    console.error(error);
-                    this.uiActionModel.serviceToUse.submit = new SmartSubject(this._destroy$);
-                    this.uiActionModel.serviceToUse.reSubscribeToChange.next();
-                    return;
-                }
-            }
-            else {
-                this.uiActionModel.serviceToUse.submitForm(validate);
-                let invalidFields = this.uiActionModel.serviceToUse.getInvalidFields();
-                if (validate && invalidFields.invalidFieldKeys.length) {
-                    this.showInvalidFieldsSnackbar(invalidFields);
-                    return;
-                }
-            }
-        }
-        if (uiAction.confirm) {
-            this.confirmDialogService.action = uiAction;
-            this.confirmDialogService.openDialog();
-            await this.confirmDialogService.onAction.toPromise();
-            if (!this.confirmDialogService.shouldDoAction) {
-                return;
-            }
-        }
-        // InputType
-        if (uiAction.inputType && uiAction.inputType !== UiActionInputType.NONE) {
-            uiActionRequest = await this.handleInputType(uiAction.inputType, uiAction, uiActionRequest, 'inputDialog');
-            if (!uiActionRequest) {
-                return;
-            }
-            await new Promise((resolve) => setTimeout(resolve, 250));
+};
+
+const BASE_PATH$5 = new InjectionToken('basePath');
+const COLLECTION_FORMATS$5 = {
+    'csv': ',',
+    'tsv': '   ',
+    'ssv': ' ',
+    'pipes': '|'
+};
+
+let Configuration$5 = class Configuration {
+    constructor(configurationParameters = {}) {
+        this.apiKeys = configurationParameters.apiKeys;
+        this.username = configurationParameters.username;
+        this.password = configurationParameters.password;
+        this.accessToken = configurationParameters.accessToken;
+        this.basePath = configurationParameters.basePath;
+        this.withCredentials = configurationParameters.withCredentials;
+        this.encoder = configurationParameters.encoder;
+        if (configurationParameters.encodeParam) {
+            this.encodeParam = configurationParameters.encodeParam;
         }
-        // Input2Type
-        if (uiAction.input2Type && uiAction.input2Type !== UiActionInputType.NONE) {
-            uiActionRequest = await this.handleInputType(uiAction.input2Type, uiAction, uiActionRequest, 'input2Dialog');
-            if (!uiActionRequest) {
-                return;
-            }
+        else {
+            this.encodeParam = param => this.defaultEncodeParam(param);
         }
-        if (this.uiActionModel.exception) {
-            let response = await this.uiActionModel.serviceToUse.handleSpecificDemandsAsynchronously(uiAction, uiActionRequest);
-            if (!response.shouldPerformAction || !response.uiActionRequest) {
-                return;
-            }
-            uiActionRequest = response.uiActionRequest;
+        if (configurationParameters.credentials) {
+            this.credentials = configurationParameters.credentials;
         }
-        await this.performAction(uiAction, uiActionRequest, options);
-    }
-    async handleInputType(inputType, uiAction, uiActionRequest, inputTypeName) {
-        switch (inputType) {
-            case UiActionInputType.NONE:
-                return uiActionRequest;
-            case UiActionInputType.TEXTAREA:
-            case UiActionInputType.TEXTFIELD:
-                return await this.handleInputTypeTextField(inputTypeName, uiAction, uiActionRequest);
-            case UiActionInputType.USER_SELECT:
-                return await this.handleInputTypeUserSelect(inputTypeName, uiAction, uiActionRequest);
-            case UiActionInputType.FILE:
-                return await this.handleInputTypeUpload(inputTypeName, uiAction, uiActionRequest, false);
-            case UiActionInputType.MULTIPLE_FILES:
-                return await this.handleInputTypeUpload(inputTypeName, uiAction, uiActionRequest, true);
-            default:
-                return uiActionRequest;
+        else {
+            this.credentials = {};
         }
     }
-    async handleInputTypeTextField(inputTypeName, uiAction, uiActionRequest) {
-        let additionalParams = this.uiActionModel.serviceToUse.getAdditionalParams(uiAction);
-        let inputType = inputTypeName === 'inputDialog' ? 'inputType' : 'input2Type';
-        if (uiAction[inputType] === UiActionInputType.TEXTFIELD) {
-            this.textFieldDialogService.nodeName = additionalParams.forTextField;
-        }
-        else if (uiAction[inputType] === UiActionInputType.TEXTAREA) {
-            this.textFieldDialogService.nodeName = additionalParams.forTextArea;
+    /**
+     * Select the correct content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param contentTypes - the array of content types that are available for selection
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    selectHeaderContentType(contentTypes) {
+        if (contentTypes.length === 0) {
+            return undefined;
         }
-        this.textFieldDialogService.inputTypeName = inputTypeName;
-        this.textFieldDialogService.action = uiAction;
-        this.textFieldDialogService.openDialog();
-        await this.textFieldDialogService.onAction.toPromise();
-        let params = this.textFieldDialogService.params;
-        if (!params) {
-            console.error('There was no response from InputDialog');
-            return;
+        const type = contentTypes.find((x) => this.isJsonMime(x));
+        if (type === undefined) {
+            return contentTypes[0];
         }
-        uiActionRequest.params = {
-            ...uiActionRequest.params,
-            ...params,
-        };
-        return uiActionRequest;
+        return type;
     }
-    async handleInputTypeUpload(inputTypeName, uiAction, uiActionRequest, isMultiple) {
-        this.fileUploadDialogService.inputTypeName = inputTypeName;
-        this.fileUploadDialogService.action = uiAction;
-        this.fileUploadDialogService.isMultiple = isMultiple;
-        this.fileUploadDialogService.openDialog();
-        await this.fileUploadDialogService.onAction.toPromise();
-        let files = this.fileUploadDialogService.files;
-        let uploadDescriptor = this.fileUploadDialogService.uploadDescriptor;
-        if (!files || !files.length) {
-            return;
+    /**
+     * Select the correct accept content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param accepts - the array of content types that are available for selection.
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    selectHeaderAccept(accepts) {
+        if (accepts.length === 0) {
+            return undefined;
         }
-        uiActionRequest.params = {
-            ...uiActionRequest.params,
-            _files: files,
-            _uploadDescriptor: uploadDescriptor,
-            isMultiple,
-            param: uiAction.inputType === 'file' || uiAction.inputType === 'multiple_files'
-                ? 'input'
-                : 'input2',
-        };
-        return uiActionRequest;
-    }
-    async handleInputTypeUserSelect(inputTypeName, uiAction, uiActionRequest) {
-        let response = await this.uiActionModel.serviceToUse.handleSpecificDemandsAsynchronously(uiAction, uiActionRequest);
-        if (!response.shouldPerformAction || !response.uiActionRequest) {
-            return;
+        const type = accepts.find((x) => this.isJsonMime(x));
+        if (type === undefined) {
+            return accepts[0];
         }
-        uiActionRequest = response.uiActionRequest;
-        return uiActionRequest;
+        return type;
     }
-    async performAction(uiAction, uiActionRequest, options) {
-        if (!uiActionRequest.params ||
-            (uiActionRequest.params && !Object.keys(uiActionRequest.params).length)) {
-            uiActionRequest.params = {
-                model: this.uiActionModel.serviceToUse.getModel(),
-            };
-        }
-        else if (uiAction.submit || uiAction.model) {
-            uiActionRequest.params['model'] = this.uiActionModel.serviceToUse.getModel();
-        }
-        try {
-            await this.uiActionModel.serviceToUse.performUiActionRequest(uiActionRequest, options?.widgetId, options?.nodeId);
-            if (this.uiActionModel.descriptor?.feedbackType === UiActionFeedbackType.SNACKBAR) {
-                this.showSavedSnackbar(uiAction);
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    isJsonMime(mime) {
+        const jsonMime = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
+        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
+    }
+    lookupCredential(key) {
+        const value = this.credentials[key];
+        return typeof value === 'function'
+            ? value()
+            : value;
+    }
+    defaultEncodeParam(param) {
+        // This implementation exists as fallback for missing configuration
+        // and for backwards compatibility to older typescript-angular generator versions.
+        // It only works for the 'simple' parameter style.
+        // Date-handling only works for the 'date-time' format.
+        // All other styles and Date-formats are probably handled incorrectly.
+        //
+        // But: if that's all you need (i.e.: the most common use-case): no need for customization!
+        const value = param.dataFormat === 'date-time' && param.value instanceof Date
+            ? param.value.toISOString()
+            : param.value;
+        return encodeURIComponent(String(value));
+    }
+};
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class DefaultService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration$5();
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
             }
+            this.configuration.basePath = basePath;
         }
-        catch (error) {
-            console.error(error);
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec$5();
+    }
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        }
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
         }
+        return httpParams;
     }
-    showSavedSnackbar(uiAction) {
-        this._snackBar.openFromComponent(SuccessSnackBarComponent, {
-            duration: 5 * 1000,
-            panelClass: ['backgroundColor-accent'],
-            data: uiAction,
-        });
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
+        }
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substr(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
+        }
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        }
+        else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
     }
-    showInvalidFieldsSnackbar(invalidFields) {
-        this._snackBar.openFromComponent(InvalidFieldsSnackBarComponent, {
-            duration: 5 * 1000,
-            panelClass: ['backgroundColor-warn'],
-            data: invalidFields,
+    nopePost(observe = 'body', reportProgress = false, options) {
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/nope`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionService, deps: [{ token: 'confirmDialogService' }, { token: 'textFieldDialogService' }, { token: 'fileUploadDialogService' }, { token: i1$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$5, optional: true }, { token: Configuration$5, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['confirmDialogService']
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['textFieldDialogService']
-                }] }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
-                    args: ['fileUploadDialogService']
-                }] }, { type: i1$4.MatSnackBar }] });
+                    args: [BASE_PATH$5]
+                }] }, { type: Configuration$5, decorators: [{
+                    type: Optional
+                }] }] });
 
-const SUBMENU_POSITIONS = [
-    // Top-left of trigger → aligns top-left of overlay
-    //   {
-    //     originX: 'start',
-    //     originY: 'top',
-    //     overlayX: 'start',
-    //     overlayY: 'top',
-    //   },
-    //   // Bottom-left of trigger → aligns bottom-left of overlay
-    //   {
-    //     originX: 'start',
-    //     originY: 'bottom',
-    //     overlayX: 'start',
-    //     overlayY: 'bottom',
-    //   },
-    //   // Top-right of trigger → aligns top-right of overlay
-    //   {
-    //     originX: 'end',
-    //     originY: 'top',
-    //     overlayX: 'end',
-    //     overlayY: 'top',
-    //   },
-    //   // Bottom-right of trigger → aligns bottom-right of overlay
-    //   {
-    //     originX: 'end',
-    //     originY: 'bottom',
-    //     overlayX: 'end',
-    //     overlayY: 'bottom',
-    //   },
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'top',
-    },
-    {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'top',
-    },
-];
-const ROOT_MENU_POSITIONS = [
-    // Below-right of trigger
-    {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top',
-    }, // Below-left of trigger
-    {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'top',
-    },
-    // Above-left of trigger
-    {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'bottom',
-    },
-    // Above-right of trigger
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'bottom',
-    },
-];
+const APIS$3 = [DefaultService];
 
-class UiMenuService {
-    constructor() {
-        this.closeMenus$ = new Subject();
-    }
-    closeAllMenus() {
-        this.closeMenus$.next();
-    }
-    getCloseSignal() {
-        return this.closeMenus$.asObservable();
-    }
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var ComponentType;
+(function (ComponentType) {
+    ComponentType["CONTAINER"] = "container";
+    ComponentType["FORM"] = "form";
+    ComponentType["WIDGET"] = "widget";
+})(ComponentType || (ComponentType = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var ComponentWidgetType;
+(function (ComponentWidgetType) {
+    ComponentWidgetType["GRID"] = "grid";
+    ComponentWidgetType["FILTER"] = "filter";
+    ComponentWidgetType["TREE"] = "tree";
+    ComponentWidgetType["TOOLBAR"] = "toolbar";
+    ComponentWidgetType["MAP"] = "map";
+    ComponentWidgetType["DIAGRAM"] = "diagram";
+    ComponentWidgetType["EMBEDDED_SLOT"] = "embedded_slot";
+})(ComponentWidgetType || (ComponentWidgetType = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var LayoutDirection;
+(function (LayoutDirection) {
+    LayoutDirection["HORIZONTAL"] = "horizontal";
+    LayoutDirection["VERTICAL"] = "vertical";
+})(LayoutDirection || (LayoutDirection = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var ToolbarDirection;
+(function (ToolbarDirection) {
+    ToolbarDirection["HORIZONTAL"] = "HORIZONTAL";
+    ToolbarDirection["VERTICAL"] = "VERTICAL";
+})(ToolbarDirection || (ToolbarDirection = {}));
+
+let ApiModule$3 = class ApiModule {
+    static forRoot(configurationFactory) {
+        return {
+            ngModule: ApiModule,
+            providers: [{ provide: Configuration$5, useFactory: configurationFactory }]
+        };
+    }
+    constructor(parentModule, http) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+                'See also https://github.com/angular/angular/issues/20575');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule$3, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [],
+                    exports: [],
+                    providers: []
+                }]
+        }], ctorParameters: () => [{ type: ApiModule$3, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i1.HttpClient, decorators: [{
+                    type: Optional
+                }] }] });
+
+class SuccessSnackBarComponent {
+    constructor(data, viewContext, manager) {
+        this.data = data;
+        this.viewContext = viewContext;
+        this.manager = manager;
+        this.manager.getActionDescriptor(data).then((descriptor) => {
+            if (descriptor.feedbackText) {
+                this.text = descriptor.feedbackText;
+            }
+            else {
+                this.text = this.viewContext.commonFeedbackText ?? "A mentés sikeres volt!";
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SuccessSnackBarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: SmartViewContextService }, { token: UiActionDescriptorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SuccessSnackBarComponent, selector: "app-success-snack-bar", ngImport: i0, template: "<span class=\"successSnakBarContainer\" matSnackBarLabel> {{ text }} </span>\r\n", styles: ["::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.successSnakBarContainer{color:#fff}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SuccessSnackBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-success-snack-bar", template: "<span class=\"successSnakBarContainer\" matSnackBarLabel> {{ text }} </span>\r\n", styles: ["::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.successSnakBarContainer{color:#fff}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_SNACK_BAR_DATA]
+                }] }, { type: SmartViewContextService }, { type: UiActionDescriptorService }] });
+
+class InvalidFieldsSnackBarComponent {
+    constructor(data) {
+        this.data = data;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InvalidFieldsSnackBarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: InvalidFieldsSnackBarComponent, selector: "app-invalid-fields-snack-bar", ngImport: i0, template: "<div class=\"invalidFieldsSnackBar\">\r\n  <!-- <div class=\"invalidFieldsSnackBarContainer\" *ngIf=\"data.message\">\r\n    <span class=\"successSnakBarContainer\" matSnackBarLabel>\r\n      {{ data.message }}\r\n    </span>\r\n  </div> -->\r\n  <div class=\"invalidFieldsSnackBarContainer\">\r\n    <span class=\"invalidFieldsMessage\" matSnackBarLabel> Hi\u00E1nyos vagy hib\u00E1s adatok! </span>\r\n  </div>\r\n</div>\r\n", styles: [".invalidFieldsSnackBar ::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.invalidFieldsMessage{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$4.MatSnackBarLabel, selector: "[matSnackBarLabel]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InvalidFieldsSnackBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-invalid-fields-snack-bar', template: "<div class=\"invalidFieldsSnackBar\">\r\n  <!-- <div class=\"invalidFieldsSnackBarContainer\" *ngIf=\"data.message\">\r\n    <span class=\"successSnakBarContainer\" matSnackBarLabel>\r\n      {{ data.message }}\r\n    </span>\r\n  </div> -->\r\n  <div class=\"invalidFieldsSnackBarContainer\">\r\n    <span class=\"invalidFieldsMessage\" matSnackBarLabel> Hi\u00E1nyos vagy hib\u00E1s adatok! </span>\r\n  </div>\r\n</div>\r\n", styles: [".invalidFieldsSnackBar ::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.invalidFieldsMessage{color:#fff}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_SNACK_BAR_DATA]
+                }] }] });
+
+class UiActionService {
+    constructor(confirmDialogService, textFieldDialogService, fileUploadDialogService, _snackBar) {
+        this.confirmDialogService = confirmDialogService;
+        this.textFieldDialogService = textFieldDialogService;
+        this.fileUploadDialogService = fileUploadDialogService;
+        this._snackBar = _snackBar;
+        this._destroy$ = new Subject();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    async execute(uiAction, options) {
+        let uiActionRequest;
+        uiActionRequest = {
+            code: uiAction.code,
+            path: uiAction.path,
+            identifier: uiAction.identifier,
+            params: uiAction.params ?? {},
+        };
+        if (uiAction.submit || uiAction.model) {
+            // submit: with validation, model: without validation. both can be undefined
+            const validate = uiAction.submit || !uiAction.model;
+            if ('reSubscribeToChange' in this.uiActionModel.serviceToUse) {
+                if (!validate) {
+                    console.error(`Validate = false, but UseUiAction doesn't support it`);
+                }
+                this.uiActionModel.serviceToUse.submit.next();
+                try {
+                    await this.uiActionModel.serviceToUse.submit.toPromise();
+                    this.uiActionModel.serviceToUse.submit = new SmartSubject(this._destroy$);
+                    this.uiActionModel.serviceToUse.reSubscribeToChange.next();
+                }
+                catch (error) {
+                    console.error(error);
+                    this.uiActionModel.serviceToUse.submit = new SmartSubject(this._destroy$);
+                    this.uiActionModel.serviceToUse.reSubscribeToChange.next();
+                    return;
+                }
+            }
+            else {
+                this.uiActionModel.serviceToUse.submitForm(validate);
+                let invalidFields = this.uiActionModel.serviceToUse.getInvalidFields();
+                if (validate && invalidFields.invalidFieldKeys.length) {
+                    this.showInvalidFieldsSnackbar(invalidFields);
+                    return;
+                }
+            }
+        }
+        if (uiAction.confirm) {
+            this.confirmDialogService.action = uiAction;
+            this.confirmDialogService.openDialog();
+            await this.confirmDialogService.onAction.toPromise();
+            if (!this.confirmDialogService.shouldDoAction) {
+                return;
+            }
+        }
+        // InputType
+        if (uiAction.inputType && uiAction.inputType !== UiActionInputType.NONE) {
+            uiActionRequest = await this.handleInputType(uiAction.inputType, uiAction, uiActionRequest, 'inputDialog');
+            if (!uiActionRequest) {
+                return;
+            }
+            await new Promise((resolve) => setTimeout(resolve, 250));
+        }
+        // Input2Type
+        if (uiAction.input2Type && uiAction.input2Type !== UiActionInputType.NONE) {
+            uiActionRequest = await this.handleInputType(uiAction.input2Type, uiAction, uiActionRequest, 'input2Dialog');
+            if (!uiActionRequest) {
+                return;
+            }
+        }
+        if (this.uiActionModel.exception) {
+            let response = await this.uiActionModel.serviceToUse.handleSpecificDemandsAsynchronously(uiAction, uiActionRequest);
+            if (!response.shouldPerformAction || !response.uiActionRequest) {
+                return;
+            }
+            uiActionRequest = response.uiActionRequest;
+        }
+        await this.performAction(uiAction, uiActionRequest, options);
+    }
+    async handleInputType(inputType, uiAction, uiActionRequest, inputTypeName) {
+        switch (inputType) {
+            case UiActionInputType.NONE:
+                return uiActionRequest;
+            case UiActionInputType.TEXTAREA:
+            case UiActionInputType.TEXTFIELD:
+                return await this.handleInputTypeTextField(inputTypeName, uiAction, uiActionRequest);
+            case UiActionInputType.USER_SELECT:
+                return await this.handleInputTypeUserSelect(inputTypeName, uiAction, uiActionRequest);
+            case UiActionInputType.FILE:
+                return await this.handleInputTypeUpload(inputTypeName, uiAction, uiActionRequest, false);
+            case UiActionInputType.MULTIPLE_FILES:
+                return await this.handleInputTypeUpload(inputTypeName, uiAction, uiActionRequest, true);
+            default:
+                return uiActionRequest;
+        }
+    }
+    async handleInputTypeTextField(inputTypeName, uiAction, uiActionRequest) {
+        let additionalParams = this.uiActionModel.serviceToUse.getAdditionalParams(uiAction);
+        let inputType = inputTypeName === 'inputDialog' ? 'inputType' : 'input2Type';
+        if (uiAction[inputType] === UiActionInputType.TEXTFIELD) {
+            this.textFieldDialogService.nodeName = additionalParams.forTextField;
+        }
+        else if (uiAction[inputType] === UiActionInputType.TEXTAREA) {
+            this.textFieldDialogService.nodeName = additionalParams.forTextArea;
+        }
+        this.textFieldDialogService.inputTypeName = inputTypeName;
+        this.textFieldDialogService.action = uiAction;
+        this.textFieldDialogService.openDialog();
+        await this.textFieldDialogService.onAction.toPromise();
+        let params = this.textFieldDialogService.params;
+        if (!params) {
+            console.error('There was no response from InputDialog');
+            return;
+        }
+        uiActionRequest.params = {
+            ...uiActionRequest.params,
+            ...params,
+        };
+        return uiActionRequest;
+    }
+    async handleInputTypeUpload(inputTypeName, uiAction, uiActionRequest, isMultiple) {
+        this.fileUploadDialogService.inputTypeName = inputTypeName;
+        this.fileUploadDialogService.action = uiAction;
+        this.fileUploadDialogService.isMultiple = isMultiple;
+        this.fileUploadDialogService.openDialog();
+        await this.fileUploadDialogService.onAction.toPromise();
+        let files = this.fileUploadDialogService.files;
+        let uploadDescriptor = this.fileUploadDialogService.uploadDescriptor;
+        if (!files || !files.length) {
+            return;
+        }
+        uiActionRequest.params = {
+            ...uiActionRequest.params,
+            _files: files,
+            _uploadDescriptor: uploadDescriptor,
+            isMultiple,
+            param: uiAction.inputType === 'file' || uiAction.inputType === 'multiple_files'
+                ? 'input'
+                : 'input2',
+        };
+        return uiActionRequest;
+    }
+    async handleInputTypeUserSelect(inputTypeName, uiAction, uiActionRequest) {
+        let response = await this.uiActionModel.serviceToUse.handleSpecificDemandsAsynchronously(uiAction, uiActionRequest);
+        if (!response.shouldPerformAction || !response.uiActionRequest) {
+            return;
+        }
+        uiActionRequest = response.uiActionRequest;
+        return uiActionRequest;
+    }
+    async performAction(uiAction, uiActionRequest, options) {
+        if (!uiActionRequest.params ||
+            (uiActionRequest.params && !Object.keys(uiActionRequest.params).length)) {
+            uiActionRequest.params = {
+                model: this.uiActionModel.serviceToUse.getModel(),
+            };
+        }
+        else if (uiAction.submit || uiAction.model) {
+            uiActionRequest.params['model'] = this.uiActionModel.serviceToUse.getModel();
+        }
+        try {
+            await this.uiActionModel.serviceToUse.performUiActionRequest(uiActionRequest, options?.widgetId, options?.nodeId);
+            if (this.uiActionModel.descriptor?.feedbackType === UiActionFeedbackType.SNACKBAR) {
+                this.showSavedSnackbar(uiAction);
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    showSavedSnackbar(uiAction) {
+        this._snackBar.openFromComponent(SuccessSnackBarComponent, {
+            duration: 5 * 1000,
+            panelClass: ['backgroundColor-accent'],
+            data: uiAction,
+        });
+    }
+    showInvalidFieldsSnackbar(invalidFields) {
+        this._snackBar.openFromComponent(InvalidFieldsSnackBarComponent, {
+            duration: 5 * 1000,
+            panelClass: ['backgroundColor-warn'],
+            data: invalidFields,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionService, deps: [{ token: 'confirmDialogService' }, { token: 'textFieldDialogService' }, { token: 'fileUploadDialogService' }, { token: i1$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['confirmDialogService']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['textFieldDialogService']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['fileUploadDialogService']
+                }] }, { type: i1$4.MatSnackBar }] });
+
+const SUBMENU_POSITIONS = [
+    // Top-left of trigger → aligns top-left of overlay
+    //   {
+    //     originX: 'start',
+    //     originY: 'top',
+    //     overlayX: 'start',
+    //     overlayY: 'top',
+    //   },
+    //   // Bottom-left of trigger → aligns bottom-left of overlay
+    //   {
+    //     originX: 'start',
+    //     originY: 'bottom',
+    //     overlayX: 'start',
+    //     overlayY: 'bottom',
+    //   },
+    //   // Top-right of trigger → aligns top-right of overlay
+    //   {
+    //     originX: 'end',
+    //     originY: 'top',
+    //     overlayX: 'end',
+    //     overlayY: 'top',
+    //   },
+    //   // Bottom-right of trigger → aligns bottom-right of overlay
+    //   {
+    //     originX: 'end',
+    //     originY: 'bottom',
+    //     overlayX: 'end',
+    //     overlayY: 'bottom',
+    //   },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'top',
+    },
+];
+const ROOT_MENU_POSITIONS = [
+    // Below-right of trigger
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+    }, // Below-left of trigger
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+    },
+    // Above-left of trigger
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+    },
+    // Above-right of trigger
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+    },
+];
+
+class UiMenuService {
+    constructor() {
+        this.closeMenus$ = new Subject();
+    }
+    closeAllMenus() {
+        this.closeMenus$.next();
+    }
+    getCloseSignal() {
+        return this.closeMenus$.asObservable();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiMenuService, providedIn: 'root' }); }
 }
@@ -6599,12 +6953,15 @@ class UiActionToolbarComponent {
             this.scrollInterval = null;
         }
     }
+    get isVertical() {
+        return this.toolbarPropertes?.direction === ToolbarDirection.VERTICAL;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionToolbarComponent, deps: [{ token: UiActionService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: COMPONENT_LIBRARY }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: "uiActionModels", uiActionDescriptorService: "uiActionDescriptorService", id: "id", scrollOnWrap: "scrollOnWrap", toolbarPropertes: "toolbarPropertes" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div #container class=\"uiActionButtonsContainer\" [ngClass]=\"{ scrollableContent: scrollOnWrap }\">\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: "uiActionModels", uiActionDescriptorService: "uiActionDescriptorService", id: "id", scrollOnWrap: "scrollOnWrap", toolbarPropertes: "toolbarPropertes" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-ui-action-toolbar', template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div #container class=\"uiActionButtonsContainer\" [ngClass]=\"{ scrollableContent: scrollOnWrap }\">\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}\n"] }]
+            args: [{ selector: 'smart-ui-action-toolbar', template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"] }]
         }], ctorParameters: () => [{ type: UiActionService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -7568,11 +7925,11 @@ class FileEditorToolbarComponent extends UiActionToolbarComponent {
         await super.fireAction(uiActionModel);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FileEditorToolbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: FileEditorToolbarComponent, selector: "file-editor-toolbar", inputs: { dataUri: "dataUri" }, outputs: { actionEvent: "actionEvent" }, usesInheritance: true, ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div #container class=\"uiActionButtonsContainer\" [ngClass]=\"{ scrollableContent: scrollOnWrap }\">\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: FileEditorToolbarComponent, selector: "file-editor-toolbar", inputs: { dataUri: "dataUri" }, outputs: { actionEvent: "actionEvent" }, usesInheritance: true, ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FileEditorToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-editor-toolbar', template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div #container class=\"uiActionButtonsContainer\" [ngClass]=\"{ scrollableContent: scrollOnWrap }\">\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}\n"] }]
+            args: [{ selector: 'file-editor-toolbar', template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"] }]
         }], propDecorators: { dataUri: [{
                 type: Input
             }], actionEvent: [{
@@ -7710,7 +8067,7 @@ class SmartMultiFileEditorComponent {
                 useExisting: forwardRef(() => SmartMultiFileEditorComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }], ngImport: i0, template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\r\n  <h4\r\n    *ngIf=\"widgetInstance.showLabel\"\r\n    class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n    [ngClass]=\"getLabelNgClass()\"\r\n    [ngStyle]=\"getLabelStyle()\"\r\n  >\r\n    {{ widgetInstance.label }}\r\n  </h4>\r\n  <smart-ui-action-toolbar\r\n    [id]=\"widgetInstance.toolbarId\"\r\n    #toolbar\r\n    [style]=\"{ display: 'none' }\"\r\n  ></smart-ui-action-toolbar>\r\n\r\n  <div class=\"fileEditorComponent\">\r\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\r\n      <div class=\"errorMessage\">\r\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\r\n        <span> Unsupported widgetInstance.value type for this widget.</span>\r\n      </div>\r\n    } @else {\r\n      <smart-upload-widget\r\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n        [ngClass]=\"getNgClass()\"\r\n        [ngStyle]=\"getStyle()\"\r\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\r\n        [isMultiple]=\"true\"\r\n        [isDisabled]=\"widgetInstance.isDisabled\"\r\n        (uploadFilesEvent)=\"upload($event)\"\r\n      />\r\n    }\r\n\r\n    <div\r\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\r\n      class=\"uploadedFileContainer\"\r\n      [style.display]=\"\r\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\r\n      \"\r\n    >\r\n      <div class=\"scrollable\">\r\n        <div class=\"uploadedFile\" *ngFor=\"let file of widgetInstance.value; let i = index\">\r\n          <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\r\n\r\n          <div class=\"fileData\">\r\n            <div class=\"fileDataContainer\">\r\n              <span class=\"fileName\">{{ file?.fileName }}</span>\r\n              <span class=\"fileSize\">{{ formatSize(file?.size) }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"fileActions\">\r\n            @if (toolbarComponent && toolbarComponent.uiActionModels) {\r\n              <file-editor-toolbar\r\n                [id]=\"widgetInstance.toolbarId\"\r\n                [dataUri]=\"file.dataUri\"\r\n                [uiActionModels]=\"toolbarComponent.uiActionModels\"\r\n              ></file-editor-toolbar>\r\n            }\r\n            <smart-icon\r\n              class=\"downloadIcon\"\r\n              icon=\"download\"\r\n              (click)=\"downloadFile(file.dataUri)\"\r\n            ></smart-icon>\r\n            <smart-icon\r\n              class=\"removeIcon\"\r\n              [icon]=\"removeIcon\"\r\n              (click)=\"!isDisabled && deleteFile(file.dataUri)\"\r\n            ></smart-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep .pi,.downloadIcon ::ng-deep .pi{font-size:1.5rem!important}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}:host ::ng-deep .p-fileupload-content{border:unset;border-radius:var(--def-border-radius)}smart-icon ::ng-deep .pi{font-size:2rem!important}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon *{opacity:.4!important;pointer-events:none!important}:host ::ng-deep .disabledWidget ::ng-deep .changeButton:hover,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon:hover{cursor:not-allowed}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile,:host ::ng-deep .p-fileupload-file{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: FileEditorToolbarComponent, selector: "file-editor-toolbar", inputs: ["dataUri"], outputs: ["actionEvent"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }] }); }
+        ], viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }], ngImport: i0, template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\r\n  <h4\r\n    *ngIf=\"widgetInstance.showLabel\"\r\n    class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n    [ngClass]=\"getLabelNgClass()\"\r\n    [ngStyle]=\"getLabelStyle()\"\r\n  >\r\n    {{ widgetInstance.label }}\r\n  </h4>\r\n  <smart-ui-action-toolbar\r\n    [id]=\"widgetInstance.toolbarId\"\r\n    #toolbar\r\n    [style]=\"{ display: 'none' }\"\r\n  ></smart-ui-action-toolbar>\r\n\r\n  <div class=\"fileEditorComponent\">\r\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\r\n      <div class=\"errorMessage\">\r\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\r\n        <span> Unsupported widgetInstance.value type for this widget.</span>\r\n      </div>\r\n    } @else {\r\n      <smart-upload-widget\r\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n        [ngClass]=\"getNgClass()\"\r\n        [ngStyle]=\"getStyle()\"\r\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\r\n        [isMultiple]=\"true\"\r\n        [isDisabled]=\"widgetInstance.isDisabled\"\r\n        (uploadFilesEvent)=\"upload($event)\"\r\n      />\r\n    }\r\n\r\n    <div\r\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\r\n      class=\"uploadedFileContainer\"\r\n      [style.display]=\"\r\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\r\n      \"\r\n    >\r\n      <div class=\"scrollable\">\r\n        <div class=\"uploadedFile\" *ngFor=\"let file of widgetInstance.value; let i = index\">\r\n          <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\r\n\r\n          <div class=\"fileData\">\r\n            <div class=\"fileDataContainer\">\r\n              <span class=\"fileName\">{{ file?.fileName }}</span>\r\n              <span class=\"fileSize\">{{ formatSize(file?.size) }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"fileActions\">\r\n            @if (toolbarComponent && toolbarComponent.uiActionModels) {\r\n              <file-editor-toolbar\r\n                [id]=\"widgetInstance.toolbarId\"\r\n                [dataUri]=\"file.dataUri\"\r\n                [uiActionModels]=\"toolbarComponent.uiActionModels\"\r\n              ></file-editor-toolbar>\r\n            }\r\n            <smart-icon\r\n              class=\"downloadIcon\"\r\n              icon=\"download\"\r\n              (click)=\"downloadFile(file.dataUri)\"\r\n            ></smart-icon>\r\n            @if (!file.readOnly) {\r\n              <smart-icon\r\n                class=\"removeIcon\"\r\n                [icon]=\"removeIcon\"\r\n                (click)=\"!isDisabled && file.readOnly === false && deleteFile(file.dataUri)\"\r\n              ></smart-icon>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep .pi,.downloadIcon ::ng-deep .pi{font-size:1.5rem!important}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}:host ::ng-deep .p-fileupload-content{border:unset;border-radius:var(--def-border-radius)}smart-icon ::ng-deep .pi{font-size:2rem!important}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon *{opacity:.4!important;pointer-events:none!important}:host ::ng-deep .disabledWidget ::ng-deep .changeButton:hover,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon:hover{cursor:not-allowed}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile,:host ::ng-deep .p-fileupload-file{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: FileEditorToolbarComponent, selector: "file-editor-toolbar", inputs: ["dataUri"], outputs: ["actionEvent"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMultiFileEditorComponent, decorators: [{
             type: Component,
@@ -7720,7 +8077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                             useExisting: forwardRef(() => SmartMultiFileEditorComponent),
                             multi: true,
                         },
-                    ], template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\r\n  <h4\r\n    *ngIf=\"widgetInstance.showLabel\"\r\n    class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n    [ngClass]=\"getLabelNgClass()\"\r\n    [ngStyle]=\"getLabelStyle()\"\r\n  >\r\n    {{ widgetInstance.label }}\r\n  </h4>\r\n  <smart-ui-action-toolbar\r\n    [id]=\"widgetInstance.toolbarId\"\r\n    #toolbar\r\n    [style]=\"{ display: 'none' }\"\r\n  ></smart-ui-action-toolbar>\r\n\r\n  <div class=\"fileEditorComponent\">\r\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\r\n      <div class=\"errorMessage\">\r\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\r\n        <span> Unsupported widgetInstance.value type for this widget.</span>\r\n      </div>\r\n    } @else {\r\n      <smart-upload-widget\r\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n        [ngClass]=\"getNgClass()\"\r\n        [ngStyle]=\"getStyle()\"\r\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\r\n        [isMultiple]=\"true\"\r\n        [isDisabled]=\"widgetInstance.isDisabled\"\r\n        (uploadFilesEvent)=\"upload($event)\"\r\n      />\r\n    }\r\n\r\n    <div\r\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\r\n      class=\"uploadedFileContainer\"\r\n      [style.display]=\"\r\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\r\n      \"\r\n    >\r\n      <div class=\"scrollable\">\r\n        <div class=\"uploadedFile\" *ngFor=\"let file of widgetInstance.value; let i = index\">\r\n          <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\r\n\r\n          <div class=\"fileData\">\r\n            <div class=\"fileDataContainer\">\r\n              <span class=\"fileName\">{{ file?.fileName }}</span>\r\n              <span class=\"fileSize\">{{ formatSize(file?.size) }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"fileActions\">\r\n            @if (toolbarComponent && toolbarComponent.uiActionModels) {\r\n              <file-editor-toolbar\r\n                [id]=\"widgetInstance.toolbarId\"\r\n                [dataUri]=\"file.dataUri\"\r\n                [uiActionModels]=\"toolbarComponent.uiActionModels\"\r\n              ></file-editor-toolbar>\r\n            }\r\n            <smart-icon\r\n              class=\"downloadIcon\"\r\n              icon=\"download\"\r\n              (click)=\"downloadFile(file.dataUri)\"\r\n            ></smart-icon>\r\n            <smart-icon\r\n              class=\"removeIcon\"\r\n              [icon]=\"removeIcon\"\r\n              (click)=\"!isDisabled && deleteFile(file.dataUri)\"\r\n            ></smart-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep .pi,.downloadIcon ::ng-deep .pi{font-size:1.5rem!important}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}:host ::ng-deep .p-fileupload-content{border:unset;border-radius:var(--def-border-radius)}smart-icon ::ng-deep .pi{font-size:2rem!important}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon *{opacity:.4!important;pointer-events:none!important}:host ::ng-deep .disabledWidget ::ng-deep .changeButton:hover,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon:hover{cursor:not-allowed}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile,:host ::ng-deep .p-fileupload-file{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"] }]
+                    ], template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\r\n  <h4\r\n    *ngIf=\"widgetInstance.showLabel\"\r\n    class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n    [ngClass]=\"getLabelNgClass()\"\r\n    [ngStyle]=\"getLabelStyle()\"\r\n  >\r\n    {{ widgetInstance.label }}\r\n  </h4>\r\n  <smart-ui-action-toolbar\r\n    [id]=\"widgetInstance.toolbarId\"\r\n    #toolbar\r\n    [style]=\"{ display: 'none' }\"\r\n  ></smart-ui-action-toolbar>\r\n\r\n  <div class=\"fileEditorComponent\">\r\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\r\n      <div class=\"errorMessage\">\r\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\r\n        <span> Unsupported widgetInstance.value type for this widget.</span>\r\n      </div>\r\n    } @else {\r\n      <smart-upload-widget\r\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n        [ngClass]=\"getNgClass()\"\r\n        [ngStyle]=\"getStyle()\"\r\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\r\n        [isMultiple]=\"true\"\r\n        [isDisabled]=\"widgetInstance.isDisabled\"\r\n        (uploadFilesEvent)=\"upload($event)\"\r\n      />\r\n    }\r\n\r\n    <div\r\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\r\n      class=\"uploadedFileContainer\"\r\n      [style.display]=\"\r\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\r\n      \"\r\n    >\r\n      <div class=\"scrollable\">\r\n        <div class=\"uploadedFile\" *ngFor=\"let file of widgetInstance.value; let i = index\">\r\n          <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\r\n\r\n          <div class=\"fileData\">\r\n            <div class=\"fileDataContainer\">\r\n              <span class=\"fileName\">{{ file?.fileName }}</span>\r\n              <span class=\"fileSize\">{{ formatSize(file?.size) }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"fileActions\">\r\n            @if (toolbarComponent && toolbarComponent.uiActionModels) {\r\n              <file-editor-toolbar\r\n                [id]=\"widgetInstance.toolbarId\"\r\n                [dataUri]=\"file.dataUri\"\r\n                [uiActionModels]=\"toolbarComponent.uiActionModels\"\r\n              ></file-editor-toolbar>\r\n            }\r\n            <smart-icon\r\n              class=\"downloadIcon\"\r\n              icon=\"download\"\r\n              (click)=\"downloadFile(file.dataUri)\"\r\n            ></smart-icon>\r\n            @if (!file.readOnly) {\r\n              <smart-icon\r\n                class=\"removeIcon\"\r\n                [icon]=\"removeIcon\"\r\n                (click)=\"!isDisabled && file.readOnly === false && deleteFile(file.dataUri)\"\r\n              ></smart-icon>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep .pi,.downloadIcon ::ng-deep .pi{font-size:1.5rem!important}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}:host ::ng-deep .p-fileupload-content{border:unset;border-radius:var(--def-border-radius)}smart-icon ::ng-deep .pi{font-size:2rem!important}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon *{opacity:.4!important;pointer-events:none!important}:host ::ng-deep .disabledWidget ::ng-deep .changeButton:hover,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon:hover{cursor:not-allowed}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile,:host ::ng-deep .p-fileupload-file{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -12690,7 +13047,7 @@ var FilterExpressionOrderBy;
  * Custom HttpParameterCodec
  * Workaround for https://github.com/angular/angular/issues/18261
  */
-let CustomHttpParameterCodec$5 = class CustomHttpParameterCodec {
+let CustomHttpParameterCodec$4 = class CustomHttpParameterCodec {
     encodeKey(k) {
         return encodeURIComponent(k);
     }
@@ -12705,15 +13062,15 @@ let CustomHttpParameterCodec$5 = class CustomHttpParameterCodec {
     }
 };
 
-const BASE_PATH$5 = new InjectionToken('basePath');
-const COLLECTION_FORMATS$5 = {
+const BASE_PATH$4 = new InjectionToken('basePath');
+const COLLECTION_FORMATS$4 = {
     'csv': ',',
     'tsv': '   ',
     'ssv': ' ',
     'pipes': '|'
 };
 
-let Configuration$5 = class Configuration {
+let Configuration$4 = class Configuration {
     constructor(configurationParameters = {}) {
         this.apiKeys = configurationParameters.apiKeys;
         this.username = configurationParameters.username;
@@ -12821,7 +13178,7 @@ class GridService {
         this.httpClient = httpClient;
         this.basePath = 'http://localhost';
         this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration$5();
+        this.configuration = new Configuration$4();
         if (configuration) {
             this.configuration = configuration;
         }
@@ -12834,7 +13191,7 @@ class GridService {
             }
             this.configuration.basePath = basePath;
         }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec$5();
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec$4();
     }
     // @ts-ignore
     addToHttpParams(httpParams, value, key) {
@@ -13274,7 +13631,7 @@ class GridService {
             reportProgress: reportProgress
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GridService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$5, optional: true }, { token: Configuration$5, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GridService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$4, optional: true }, { token: Configuration$4, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GridService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GridService, decorators: [{
@@ -13286,12 +13643,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                     type: Optional
                 }, {
                     type: Inject,
-                    args: [BASE_PATH$5]
-                }] }, { type: Configuration$5, decorators: [{
+                    args: [BASE_PATH$4]
+                }] }, { type: Configuration$4, decorators: [{
                     type: Optional
                 }] }] });
 
-const APIS$3 = [GridService];
+const APIS$2 = [GridService];
 
 /**
  * Grid api
@@ -13385,11 +13742,11 @@ var GridViewDescriptorKindEnum;
 })(GridViewDescriptorKindEnum || (GridViewDescriptorKindEnum = {}));
 ;
 
-let ApiModule$3 = class ApiModule {
+let ApiModule$2 = class ApiModule {
     static forRoot(configurationFactory) {
         return {
             ngModule: ApiModule,
-            providers: [{ provide: Configuration$5, useFactory: configurationFactory }]
+            providers: [{ provide: Configuration$4, useFactory: configurationFactory }]
         };
     }
     constructor(parentModule, http) {
@@ -13405,7 +13762,7 @@ let ApiModule$3 = class ApiModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule$3, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule$2, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -13413,7 +13770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                     exports: [],
                     providers: []
                 }]
-        }], ctorParameters: () => [{ type: ApiModule$3, decorators: [{
+        }], ctorParameters: () => [{ type: ApiModule$2, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
@@ -15415,7 +15772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Custom HttpParameterCodec
  * Workaround for https://github.com/angular/angular/issues/18261
  */
-let CustomHttpParameterCodec$4 = class CustomHttpParameterCodec {
+let CustomHttpParameterCodec$3 = class CustomHttpParameterCodec {
     encodeKey(k) {
         return encodeURIComponent(k);
     }
@@ -15430,15 +15787,15 @@ let CustomHttpParameterCodec$4 = class CustomHttpParameterCodec {
     }
 };
 
-const BASE_PATH$4 = new InjectionToken('basePath');
-const COLLECTION_FORMATS$4 = {
+const BASE_PATH$3 = new InjectionToken('basePath');
+const COLLECTION_FORMATS$3 = {
     'csv': ',',
     'tsv': '   ',
     'ssv': ' ',
     'pipes': '|'
 };
 
-let Configuration$4 = class Configuration {
+let Configuration$3 = class Configuration {
     constructor(configurationParameters = {}) {
         this.apiKeys = configurationParameters.apiKeys;
         this.username = configurationParameters.username;
@@ -15546,7 +15903,7 @@ class TreeService {
         this.httpClient = httpClient;
         this.basePath = 'http://localhost';
         this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration$4();
+        this.configuration = new Configuration$3();
         if (configuration) {
             this.configuration = configuration;
         }
@@ -15559,7 +15916,7 @@ class TreeService {
             }
             this.configuration.basePath = basePath;
         }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec$4();
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec$3();
     }
     // @ts-ignore
     addToHttpParams(httpParams, value, key) {
@@ -16693,7 +17050,7 @@ class TreeService {
             reportProgress: reportProgress,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TreeService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$4, optional: true }, { token: Configuration$4, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TreeService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$3, optional: true }, { token: Configuration$3, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TreeService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TreeService, decorators: [{
@@ -16705,8 +17062,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                     type: Optional
                 }, {
                     type: Inject,
-                    args: [BASE_PATH$4]
-                }] }, { type: Configuration$4, decorators: [{
+                    args: [BASE_PATH$3]
+                }] }, { type: Configuration$3, decorators: [{
                     type: Optional
                 }] }] });
 
@@ -17259,7 +17616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Custom HttpParameterCodec
  * Workaround for https://github.com/angular/angular/issues/18261
  */
-let CustomHttpParameterCodec$3 = class CustomHttpParameterCodec {
+let CustomHttpParameterCodec$2 = class CustomHttpParameterCodec {
     encodeKey(k) {
         return encodeURIComponent(k);
     }
@@ -17274,15 +17631,15 @@ let CustomHttpParameterCodec$3 = class CustomHttpParameterCodec {
     }
 };
 
-const BASE_PATH$3 = new InjectionToken('basePath');
-const COLLECTION_FORMATS$3 = {
+const BASE_PATH$2 = new InjectionToken('basePath');
+const COLLECTION_FORMATS$2 = {
     'csv': ',',
     'tsv': '   ',
     'ssv': ' ',
     'pipes': '|'
 };
 
-let Configuration$3 = class Configuration {
+let Configuration$2 = class Configuration {
     constructor(configurationParameters = {}) {
         this.apiKeys = configurationParameters.apiKeys;
         this.username = configurationParameters.username;
@@ -17390,7 +17747,7 @@ class GeoMapService {
         this.httpClient = httpClient;
         this.basePath = 'http://localhost';
         this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration$3();
+        this.configuration = new Configuration$2();
         if (configuration) {
             this.configuration = configuration;
         }
@@ -17403,7 +17760,7 @@ class GeoMapService {
             }
             this.configuration.basePath = basePath;
         }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec$3();
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec$2();
     }
     // @ts-ignore
     addToHttpParams(httpParams, value, key) {
@@ -17659,7 +18016,7 @@ class GeoMapService {
             reportProgress: reportProgress
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GeoMapService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$3, optional: true }, { token: Configuration$3, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GeoMapService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$2, optional: true }, { token: Configuration$2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GeoMapService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GeoMapService, decorators: [{
@@ -17671,12 +18028,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                     type: Optional
                 }, {
                     type: Inject,
-                    args: [BASE_PATH$3]
-                }] }, { type: Configuration$3, decorators: [{
+                    args: [BASE_PATH$2]
+                }] }, { type: Configuration$2, decorators: [{
                     type: Optional
                 }] }] });
 
-const APIS$2 = [GeoMapService];
+const APIS$1 = [GeoMapService];
 
 /**
  * GeoMap api
@@ -17796,11 +18153,11 @@ var GeoMapTextType;
     GeoMapTextType["HTML"] = "HTML";
 })(GeoMapTextType || (GeoMapTextType = {}));
 
-let ApiModule$2 = class ApiModule {
+let ApiModule$1 = class ApiModule {
     static forRoot(configurationFactory) {
         return {
             ngModule: ApiModule,
-            providers: [{ provide: Configuration$3, useFactory: configurationFactory }]
+            providers: [{ provide: Configuration$2, useFactory: configurationFactory }]
         };
     }
     constructor(parentModule, http) {
@@ -17816,7 +18173,7 @@ let ApiModule$2 = class ApiModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule$2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule$1, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -17824,7 +18181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                     exports: [],
                     providers: []
                 }]
-        }], ctorParameters: () => [{ type: ApiModule$2, decorators: [{
+        }], ctorParameters: () => [{ type: ApiModule$1, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
@@ -18444,718 +18801,369 @@ class LeafletMap extends AbstractMap {
                                 x: event.latlng.lng,
                                 y: event.latlng.lat,
                             },
-                        });
-                    });
-                });
-            }
-            it.record.addTo(this.map);
-            this.editingOverlays.set(it.id, it.record);
-        });
-    }
-    findDatasetBounds() {
-        const items = this.items()
-            .flatMap((it) => (it.position ? [it.position] : it.route ? it.route.points : []))
-            .map((it) => {
-            return { x: it.latitude, y: it.longitude };
-        });
-        if (!items || items.length === 0) {
-            return null;
-        }
-        let southwest = { x: items[0].x, y: items[0].y };
-        let northeast = { x: items[0].x, y: items[0].y };
-        items.forEach((it) => {
-            if (it.x < southwest.x)
-                southwest.x = it.x;
-            if (it.y < southwest.y)
-                southwest.y = it.y;
-            if (it.x > northeast.x)
-                northeast.x = it.x;
-            if (it.y > northeast.y)
-                northeast.y = it.y;
-        });
-        return { a: southwest, b: northeast };
-    }
-    toBase64() {
-        return new Promise((resolve, reject) => {
-            setTimeout(() => {
-                leafletImage(this.map, (err, canvas) => {
-                    if (err) {
-                        console.error('Leaflet image capture error', err);
-                        reject(err);
-                        return;
-                    }
-                    const ctx = canvas.getContext('2d');
-                    if (!ctx) {
-                        reject('No context');
-                        return;
-                    }
-                    this.markers.forEach((marker) => {
-                        const tooltip = marker.getTooltip();
-                        if (!tooltip) {
-                            return;
-                        }
-                        const latLng = marker.getLatLng();
-                        const point = this.map.latLngToContainerPoint(latLng);
-                        const text = tooltip.getContent();
-                        // Tooltip szöveg megjelenítése
-                        ctx.font = 'bold 30px sans-serif';
-                        ctx.fillStyle = 'black';
-                        ctx.strokeStyle = 'white';
-                        ctx.lineWidth = 4;
-                        ctx.textAlign = 'center';
-                        ctx.textBaseline = 'bottom';
-                        ctx.strokeText(text, point.x, point.y + 10); // fehér kontúr
-                        ctx.fillText(text, point.x, point.y + 10); // fekete szöveg
-                    });
-                    resolve(canvas.toDataURL('image/png'));
-                });
-            }, 300);
-        });
-    }
-    createLabel(group) {
-        let label = '';
-        group.forEach((item) => {
-            label += item._tooltip._content + ', ';
-            item._tooltip.permanent = false;
-        });
-        return label;
-    }
-    createNumberedIcon(number) {
-        const size = 35;
-        const scaleFactor = 15;
-        const scaledSize = size * scaleFactor;
-        const canvas = document.createElement('canvas');
-        canvas.width = scaledSize;
-        canvas.height = scaledSize;
-        canvas.style.width = canvas.style.height = '35px';
-        const ctx = canvas.getContext('2d');
-        ctx.scale(scaleFactor, scaleFactor);
-        ctx.beginPath();
-        ctx.arc(size / 2, size / 2, size / 2 - 2, 0, 2 * Math.PI, false);
-        ctx.fillStyle = '#0078d4';
-        ctx.fill();
-        ctx.lineWidth = 2;
-        ctx.strokeStyle = '#ffffff';
-        ctx.stroke();
-        ctx.fillStyle = '#ffffff';
-        ctx.font = 'bold 16px sans-serif';
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillText(number.toString(), size / 2, size / 2);
-        return L.icon({
-            iconUrl: canvas.toDataURL(),
-            iconSize: [size, size],
-            iconAnchor: [size / 2, size / 2],
-            popupAnchor: [0, -size / 2],
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LeafletMap, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: LeafletMap, selector: "leaflet-map", usesInheritance: true, ngImport: i0, template: ` <div id="leaflet"></div>`, isInline: true, styles: ["#leaflet{height:720px}::ng-deep .marker-count{background-color:#0078d4;color:#fff;font-weight:700;border-radius:50%;width:30px;height:30px;line-height:30px;text-align:center;border:2px solid white;box-shadow:0 0 4px #0006}::ng-deep .custom-cluster-icon{pointer-events:auto!important}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LeafletMap, decorators: [{
-            type: Component,
-            args: [{ selector: 'leaflet-map', template: ` <div id="leaflet"></div>`, styles: ["#leaflet{height:720px}::ng-deep .marker-count{background-color:#0078d4;color:#fff;font-weight:700;border-radius:50%;width:30px;height:30px;line-height:30px;text-align:center;border:2px solid white;box-shadow:0 0 4px #0006}::ng-deep .custom-cluster-icon{pointer-events:auto!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }] });
-function getIcon(color) {
-    const size = 12;
-    const scaleFactor = 12;
-    const scaledSize = size * scaleFactor;
-    const canvas = document.createElement('canvas');
-    canvas.width = scaledSize;
-    canvas.height = scaledSize;
-    canvas.style.width = canvas.style.height = `${size}px`;
-    const ctx = canvas.getContext('2d');
-    ctx.scale(scaleFactor, scaleFactor);
-    ctx.beginPath();
-    ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
-    ctx.fillStyle = color;
-    ctx.fill();
-    return L.icon({
-        iconUrl: canvas.toDataURL(),
-        iconSize: [size, size],
-        iconAnchor: [size / 2, size / 2],
-        popupAnchor: [0, -size / 2],
-    });
-}
-
-var MapEngine;
-(function (MapEngine) {
-    MapEngine["GOOGLE"] = "GOOGLE";
-    MapEngine["LEAFLET"] = "LEAFLET";
-})(MapEngine || (MapEngine = {}));
-const MAP_ENGINE = new InjectionToken('MAP_ENGINE');
-const itemEq = (a, b) => {
-    const positions = new Set(a.map((it) => it.position));
-    b.forEach((it) => positions.delete(it.position));
-    return a.length === b.length && positions.size === 0;
-};
-class SmartMapComponent {
-    constructor(mapEngine, api) {
-        this.mapEngine = mapEngine;
-        this.api = api;
-        this.MapEngine = MapEngine;
-        this.model = signal(undefined);
-        this.items = computed(() => {
-            const model = this.model();
-            return model?.layers.flatMap((l) => l.items ?? []) ?? [];
-        });
-        this.editingSession = computed(() => this.model()?.viewState?.editingSession);
-        this.selection = computed(() => new Set(this.items()
-            .filter((it) => !!it.selected)
-            .map((it) => it.id)
-            .values()));
-    }
-    ngOnInit() { }
-    ngAfterViewInit() {
-        this.load();
-    }
-    async load() {
-        const model = await lastValueFrom(this.api.load(this.uuid, this.identifier));
-        if (!model.viewport) {
-            throw new Error('GeoMapModel contains no viewport!');
-        }
-        this.model.update(() => model);
-    }
-    async move(viewport) {
-        this.model.update((it) => {
-            console.log('model update is running!');
-            if (it) {
-                it.viewport = viewport;
-            }
-            return it;
-        });
-        const change = await lastValueFrom(this.api.move(this.uuid, this.identifier, viewport));
-        this.handleChange(change);
-    }
-    async update(mapState) {
-        this.model.update((it) => {
-            if (it) {
-                it.viewState = mapState;
-            }
-            return it;
-        });
-        const change = await lastValueFrom(this.api.update(this.uuid, this.identifier, mapState));
-        this.handleChange(change);
-    }
-    handleChange(change) {
-        if (!change.items) {
-            return;
-        }
-        this.model.update((it) => {
-            const layersById = new Map();
-            if (!it) {
-                return it;
-            }
-            it.layers.forEach((layer) => layersById.set(layer.code, layer));
-            for (const layerChange of change.items) {
-                const layerId = layerChange.code;
-                const toAdd = layerChange.toAdd;
-                layersById.set(layerId, {
-                    code: layerId,
-                    items: toAdd,
-                });
-            }
-            it.viewState.editingSession = change.editingSession;
-            return {
-                ...it,
-                layers: [...layersById.values()],
-                viewState: it.viewState,
-            };
+                        });
+                    });
+                });
+            }
+            it.record.addTo(this.map);
+            this.editingOverlays.set(it.id, it.record);
         });
     }
-    handleMapClick(position) {
-        let viewState = this.model()?.viewState;
-        const operationMode = this.model()?.viewState?.operationMode ?? GeoMapOperationMode.ACTION;
-        switch (operationMode) {
-            case GeoMapOperationMode.ACTION:
-                // TODO: Fire action for layer, if applicable (maybe only on double click).
-                break;
-            case GeoMapOperationMode.SELECTION:
-                // no-op, can't select empty space.
-                break;
-        }
-        if (viewState.editingSession &&
-            Object.keys(viewState.editingSession?.pendingItems).length > 0) {
-            const pendingItems = viewState.editingSession.pendingItems;
-            const firstKey = Object.keys(pendingItems)[0];
-            const pendingItem = pendingItems[firstKey];
-            if (pendingItem && pendingItem.length > 0) {
-                const editingItem = pendingItem[0];
-                if (editingItem.kind === GeoMapItemKind.MARKER) {
-                    editingItem.position = position;
-                }
-                else {
-                    editingItem.route.points.push(position);
-                }
-            }
-            this.update(viewState);
+    findDatasetBounds() {
+        const items = this.items()
+            .flatMap((it) => (it.position ? [it.position] : it.route ? it.route.points : []))
+            .map((it) => {
+            return { x: it.latitude, y: it.longitude };
+        });
+        if (!items || items.length === 0) {
+            return null;
         }
+        let southwest = { x: items[0].x, y: items[0].y };
+        let northeast = { x: items[0].x, y: items[0].y };
+        items.forEach((it) => {
+            if (it.x < southwest.x)
+                southwest.x = it.x;
+            if (it.y < southwest.y)
+                southwest.y = it.y;
+            if (it.x > northeast.x)
+                northeast.x = it.x;
+            if (it.y > northeast.y)
+                northeast.y = it.y;
+        });
+        return { a: southwest, b: northeast };
     }
-    handleItemClick(id) {
-        const operationMode = this.model()?.viewState?.operationMode ?? GeoMapOperationMode.ACTION;
-        let targetItem = this.items().find((it) => id === it.id);
-        if (!targetItem) {
-            console.warn('Selection item is seemingly missing from known items: ', id);
-            return;
-        }
-        switch (operationMode) {
-            case GeoMapOperationMode.ACTION:
-                // TODO: fire action!
-                break;
-            case GeoMapOperationMode.SELECTION:
-                lastValueFrom(this.api.interact(this.uuid, this.identifier, {
-                    operationMode,
-                    targetItem,
-                    targetLayer: '',
-                    inverse: this.selection().has(id),
-                })).then((change) => {
-                    if (!this.viewContextService) {
-                        console.warn('Smart Map has no ViewContext Service set up!');
-                        return null;
+    toBase64() {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                leafletImage(this.map, (err, canvas) => {
+                    if (err) {
+                        console.error('Leaflet image capture error', err);
+                        reject(err);
+                        return;
                     }
-                    else {
-                        return this.viewContextService.handlePerformActionResponse(change);
+                    const ctx = canvas.getContext('2d');
+                    if (!ctx) {
+                        reject('No context');
+                        return;
                     }
-                }, (err) => {
-                    console.warn('Could not submit selection change! ', err);
+                    this.markers.forEach((marker) => {
+                        const tooltip = marker.getTooltip();
+                        if (!tooltip) {
+                            return;
+                        }
+                        const latLng = marker.getLatLng();
+                        const point = this.map.latLngToContainerPoint(latLng);
+                        const text = tooltip.getContent();
+                        // Tooltip szöveg megjelenítése
+                        ctx.font = 'bold 30px sans-serif';
+                        ctx.fillStyle = 'black';
+                        ctx.strokeStyle = 'white';
+                        ctx.lineWidth = 4;
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'bottom';
+                        ctx.strokeText(text, point.x, point.y + 10); // fehér kontúr
+                        ctx.fillText(text, point.x, point.y + 10); // fekete szöveg
+                    });
+                    resolve(canvas.toDataURL('image/png'));
                 });
-                break;
-        }
-    }
-    handleEditingItemClick(id, event) {
-        let viewState = this.model()?.viewState;
-        const pendingValues = viewState?.editingSession?.pendingItems;
-        const firstKey = Object.keys(pendingValues)[0];
-        const pendingItems = pendingValues[firstKey];
-        let targetItem = pendingItems[0];
-        if (!targetItem) {
-            console.warn('Selection item is seemingly missing from known items: ', id);
-            return;
-        }
-        if (targetItem.kind === GeoMapItemKind.MARKER) {
-            targetItem.position = undefined;
-            this.update(viewState);
-        }
-        else {
-            const points = targetItem.route.points;
-            const index = points.findIndex((point) => point.latitude === event.coord.y && point.longitude === event.coord.x);
-            if (index !== -1) {
-                points.splice(index, 1);
-            }
-        }
-        this.update(viewState);
+            }, 300);
+        });
     }
-    handleEditingItemDrag(id, event) {
-        let viewState = this.model()?.viewState;
-        const pendingValues = viewState?.editingSession?.pendingItems;
-        const firstKey = Object.keys(pendingValues)[0];
-        const pendingItems = pendingValues[firstKey];
-        let targetItem = pendingItems[0];
-        if (!targetItem) {
-            console.warn('Selection item is seemingly missing from known items: ', id);
-            return;
-        }
-        if (targetItem.kind === GeoMapItemKind.MARKER) {
-            targetItem.position.latitude = event.dragTo.y;
-            targetItem.position.longitude = event.dragTo.x;
-        }
-        else {
-            const points = targetItem.route.points;
-            const index = points.findIndex((point) => point.latitude === event.startPosition.y && point.longitude === event.startPosition.x);
-            if (index !== -1) {
-                points[index].latitude = event.dragTo.y;
-                points[index].longitude = event.dragTo.x;
-            }
-            targetItem.route.points = points;
-        }
-        this.update(viewState);
+    createLabel(group) {
+        let label = '';
+        group.forEach((item) => {
+            label += item._tooltip._content + ', ';
+            item._tooltip.permanent = false;
+        });
+        return label;
     }
-    toBase64() {
-        return this.mapComponent.toBase64();
+    createNumberedIcon(number) {
+        const size = 35;
+        const scaleFactor = 15;
+        const scaledSize = size * scaleFactor;
+        const canvas = document.createElement('canvas');
+        canvas.width = scaledSize;
+        canvas.height = scaledSize;
+        canvas.style.width = canvas.style.height = '35px';
+        const ctx = canvas.getContext('2d');
+        ctx.scale(scaleFactor, scaleFactor);
+        ctx.beginPath();
+        ctx.arc(size / 2, size / 2, size / 2 - 2, 0, 2 * Math.PI, false);
+        ctx.fillStyle = '#0078d4';
+        ctx.fill();
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = '#ffffff';
+        ctx.stroke();
+        ctx.fillStyle = '#ffffff';
+        ctx.font = 'bold 16px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(number.toString(), size / 2, size / 2);
+        return L.icon({
+            iconUrl: canvas.toDataURL(),
+            iconSize: [size, size],
+            iconAnchor: [size / 2, size / 2],
+            popupAnchor: [0, -size / 2],
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapComponent, deps: [{ token: MAP_ENGINE }, { token: GeoMapService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartMapComponent, selector: "smart-map", inputs: { uuid: "uuid", identifier: "identifier", parent: "parent" }, viewQueries: [{ propertyName: "mapComponent", first: true, predicate: ["mapComponent"], descendants: true }], ngImport: i0, template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\r\n<google-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [style]=\"{ width: '100%', height: '320px' }\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n>\r\n</google-map>\r\n} @else if (mapEngine === MapEngine.LEAFLET) {\r\n<leaflet-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [editingSession]=\"editingSession()\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n  (onEditingOverlayDrag)=\"handleEditingItemDrag($event.itemId, $event)\"\r\n>\r\n</leaflet-map>\r\n} @else {\r\n<p>\r\n  <strong>Not recognised map engine: [ {{ mapEngine }} ]</strong>\r\n</p>\r\n<p>Please provide a valid choice of map engine!</p>\r\n} }\r\n", styles: [""], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["style", "styleClass"], outputs: ["onOverlayDblClick", "onOverlayDragStart", "onOverlayDrag", "onOverlayDragEnd", "onMapReady"] }, { kind: "component", type: LeafletMap, selector: "leaflet-map" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LeafletMap, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: LeafletMap, selector: "leaflet-map", usesInheritance: true, ngImport: i0, template: ` <div id="leaflet"></div>`, isInline: true, styles: ["#leaflet{height:720px}::ng-deep .marker-count{background-color:#0078d4;color:#fff;font-weight:700;border-radius:50%;width:30px;height:30px;line-height:30px;text-align:center;border:2px solid white;box-shadow:0 0 4px #0006}::ng-deep .custom-cluster-icon{pointer-events:auto!important}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LeafletMap, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-map', template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\r\n<google-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [style]=\"{ width: '100%', height: '320px' }\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n>\r\n</google-map>\r\n} @else if (mapEngine === MapEngine.LEAFLET) {\r\n<leaflet-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [editingSession]=\"editingSession()\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n  (onEditingOverlayDrag)=\"handleEditingItemDrag($event.itemId, $event)\"\r\n>\r\n</leaflet-map>\r\n} @else {\r\n<p>\r\n  <strong>Not recognised map engine: [ {{ mapEngine }} ]</strong>\r\n</p>\r\n<p>Please provide a valid choice of map engine!</p>\r\n} }\r\n" }]
-        }], ctorParameters: () => [{ type: MapEngine, decorators: [{
-                    type: Inject,
-                    args: [MAP_ENGINE]
-                }] }, { type: GeoMapService }], propDecorators: { uuid: [{
-                type: Input
-            }], identifier: [{
-                type: Input
-            }], parent: [{
-                type: Input
-            }], mapComponent: [{
-                type: ViewChild,
-                args: ['mapComponent']
-            }] } });
-
-class SmartMapModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartMapModule, declarations: [SmartMapComponent, GoogleMap, LeafletMap], imports: [CommonModule, BrowserModule], exports: [SmartMapComponent, GoogleMap, LeafletMap] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapModule, providers: [{ provide: MAP_ENGINE, useValue: MapEngine.GOOGLE }], imports: [CommonModule, BrowserModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SmartMapComponent, GoogleMap, LeafletMap],
-                    imports: [CommonModule, BrowserModule],
-                    providers: [{ provide: MAP_ENGINE, useValue: MapEngine.GOOGLE }],
-                    exports: [SmartMapComponent, GoogleMap, LeafletMap],
-                }]
-        }] });
-
-/**
- * Custom HttpParameterCodec
- * Workaround for https://github.com/angular/angular/issues/18261
- */
-let CustomHttpParameterCodec$2 = class CustomHttpParameterCodec {
-    encodeKey(k) {
-        return encodeURIComponent(k);
-    }
-    encodeValue(v) {
-        return encodeURIComponent(v);
-    }
-    decodeKey(k) {
-        return decodeURIComponent(k);
-    }
-    decodeValue(v) {
-        return decodeURIComponent(v);
-    }
-};
+            args: [{ selector: 'leaflet-map', template: ` <div id="leaflet"></div>`, styles: ["#leaflet{height:720px}::ng-deep .marker-count{background-color:#0078d4;color:#fff;font-weight:700;border-radius:50%;width:30px;height:30px;line-height:30px;text-align:center;border:2px solid white;box-shadow:0 0 4px #0006}::ng-deep .custom-cluster-icon{pointer-events:auto!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }] });
+function getIcon(color) {
+    const size = 12;
+    const scaleFactor = 12;
+    const scaledSize = size * scaleFactor;
+    const canvas = document.createElement('canvas');
+    canvas.width = scaledSize;
+    canvas.height = scaledSize;
+    canvas.style.width = canvas.style.height = `${size}px`;
+    const ctx = canvas.getContext('2d');
+    ctx.scale(scaleFactor, scaleFactor);
+    ctx.beginPath();
+    ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
+    ctx.fillStyle = color;
+    ctx.fill();
+    return L.icon({
+        iconUrl: canvas.toDataURL(),
+        iconSize: [size, size],
+        iconAnchor: [size / 2, size / 2],
+        popupAnchor: [0, -size / 2],
+    });
+}
 
-const BASE_PATH$2 = new InjectionToken('basePath');
-const COLLECTION_FORMATS$2 = {
-    'csv': ',',
-    'tsv': '   ',
-    'ssv': ' ',
-    'pipes': '|'
+var MapEngine;
+(function (MapEngine) {
+    MapEngine["GOOGLE"] = "GOOGLE";
+    MapEngine["LEAFLET"] = "LEAFLET";
+})(MapEngine || (MapEngine = {}));
+const MAP_ENGINE = new InjectionToken('MAP_ENGINE');
+const itemEq = (a, b) => {
+    const positions = new Set(a.map((it) => it.position));
+    b.forEach((it) => positions.delete(it.position));
+    return a.length === b.length && positions.size === 0;
 };
-
-let Configuration$2 = class Configuration {
-    constructor(configurationParameters = {}) {
-        this.apiKeys = configurationParameters.apiKeys;
-        this.username = configurationParameters.username;
-        this.password = configurationParameters.password;
-        this.accessToken = configurationParameters.accessToken;
-        this.basePath = configurationParameters.basePath;
-        this.withCredentials = configurationParameters.withCredentials;
-        this.encoder = configurationParameters.encoder;
-        if (configurationParameters.encodeParam) {
-            this.encodeParam = configurationParameters.encodeParam;
-        }
-        else {
-            this.encodeParam = param => this.defaultEncodeParam(param);
-        }
-        if (configurationParameters.credentials) {
-            this.credentials = configurationParameters.credentials;
-        }
-        else {
-            this.credentials = {};
-        }
+class SmartMapComponent {
+    constructor(mapEngine, api) {
+        this.mapEngine = mapEngine;
+        this.api = api;
+        this.MapEngine = MapEngine;
+        this.model = signal(undefined);
+        this.items = computed(() => {
+            const model = this.model();
+            return model?.layers.flatMap((l) => l.items ?? []) ?? [];
+        });
+        this.editingSession = computed(() => this.model()?.viewState?.editingSession);
+        this.selection = computed(() => new Set(this.items()
+            .filter((it) => !!it.selected)
+            .map((it) => it.id)
+            .values()));
     }
-    /**
-     * Select the correct content-type to use for a request.
-     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
-     * If no content type is found return the first found type if the contentTypes is not empty
-     * @param contentTypes - the array of content types that are available for selection
-     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
-     */
-    selectHeaderContentType(contentTypes) {
-        if (contentTypes.length === 0) {
-            return undefined;
-        }
-        const type = contentTypes.find((x) => this.isJsonMime(x));
-        if (type === undefined) {
-            return contentTypes[0];
-        }
-        return type;
+    ngOnInit() { }
+    ngAfterViewInit() {
+        this.load();
     }
-    /**
-     * Select the correct accept content-type to use for a request.
-     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
-     * If no content type is found return the first found type if the contentTypes is not empty
-     * @param accepts - the array of content types that are available for selection.
-     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
-     */
-    selectHeaderAccept(accepts) {
-        if (accepts.length === 0) {
-            return undefined;
-        }
-        const type = accepts.find((x) => this.isJsonMime(x));
-        if (type === undefined) {
-            return accepts[0];
+    async load() {
+        const model = await lastValueFrom(this.api.load(this.uuid, this.identifier));
+        if (!model.viewport) {
+            throw new Error('GeoMapModel contains no viewport!');
         }
-        return type;
-    }
-    /**
-     * Check if the given MIME is a JSON MIME.
-     * JSON MIME examples:
-     *   application/json
-     *   application/json; charset=UTF8
-     *   APPLICATION/JSON
-     *   application/vnd.company+json
-     * @param mime - MIME (Multipurpose Internet Mail Extensions)
-     * @return True if the given MIME is JSON, false otherwise.
-     */
-    isJsonMime(mime) {
-        const jsonMime = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
-        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
+        this.model.update(() => model);
     }
-    lookupCredential(key) {
-        const value = this.credentials[key];
-        return typeof value === 'function'
-            ? value()
-            : value;
+    async move(viewport) {
+        this.model.update((it) => {
+            console.log('model update is running!');
+            if (it) {
+                it.viewport = viewport;
+            }
+            return it;
+        });
+        const change = await lastValueFrom(this.api.move(this.uuid, this.identifier, viewport));
+        this.handleChange(change);
     }
-    defaultEncodeParam(param) {
-        // This implementation exists as fallback for missing configuration
-        // and for backwards compatibility to older typescript-angular generator versions.
-        // It only works for the 'simple' parameter style.
-        // Date-handling only works for the 'date-time' format.
-        // All other styles and Date-formats are probably handled incorrectly.
-        //
-        // But: if that's all you need (i.e.: the most common use-case): no need for customization!
-        const value = param.dataFormat === 'date-time' && param.value instanceof Date
-            ? param.value.toISOString()
-            : param.value;
-        return encodeURIComponent(String(value));
+    async update(mapState) {
+        this.model.update((it) => {
+            if (it) {
+                it.viewState = mapState;
+            }
+            return it;
+        });
+        const change = await lastValueFrom(this.api.update(this.uuid, this.identifier, mapState));
+        this.handleChange(change);
     }
-};
-
-/**
- * Form layout definition
- * Contains form layout definition objects.
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-/* tslint:disable:no-unused-variable member-ordering */
-class DefaultService {
-    constructor(httpClient, basePath, configuration) {
-        this.httpClient = httpClient;
-        this.basePath = 'http://localhost';
-        this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration$2();
-        if (configuration) {
-            this.configuration = configuration;
+    handleChange(change) {
+        if (!change.items) {
+            return;
         }
-        if (typeof this.configuration.basePath !== 'string') {
-            if (Array.isArray(basePath) && basePath.length > 0) {
-                basePath = basePath[0];
+        this.model.update((it) => {
+            const layersById = new Map();
+            if (!it) {
+                return it;
             }
-            if (typeof basePath !== 'string') {
-                basePath = this.basePath;
+            it.layers.forEach((layer) => layersById.set(layer.code, layer));
+            for (const layerChange of change.items) {
+                const layerId = layerChange.code;
+                const toAdd = layerChange.toAdd;
+                layersById.set(layerId, {
+                    code: layerId,
+                    items: toAdd,
+                });
             }
-            this.configuration.basePath = basePath;
+            it.viewState.editingSession = change.editingSession;
+            return {
+                ...it,
+                layers: [...layersById.values()],
+                viewState: it.viewState,
+            };
+        });
+    }
+    handleMapClick(position) {
+        let viewState = this.model()?.viewState;
+        const operationMode = this.model()?.viewState?.operationMode ?? GeoMapOperationMode.ACTION;
+        switch (operationMode) {
+            case GeoMapOperationMode.ACTION:
+                // TODO: Fire action for layer, if applicable (maybe only on double click).
+                break;
+            case GeoMapOperationMode.SELECTION:
+                // no-op, can't select empty space.
+                break;
+        }
+        if (viewState.editingSession &&
+            Object.keys(viewState.editingSession?.pendingItems).length > 0) {
+            const pendingItems = viewState.editingSession.pendingItems;
+            const firstKey = Object.keys(pendingItems)[0];
+            const pendingItem = pendingItems[firstKey];
+            if (pendingItem && pendingItem.length > 0) {
+                const editingItem = pendingItem[0];
+                if (editingItem.kind === GeoMapItemKind.MARKER) {
+                    editingItem.position = position;
+                }
+                else {
+                    editingItem.route.points.push(position);
+                }
+            }
+            this.update(viewState);
         }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec$2();
     }
-    // @ts-ignore
-    addToHttpParams(httpParams, value, key) {
-        if (typeof value === "object" && value instanceof Date === false) {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+    handleItemClick(id) {
+        const operationMode = this.model()?.viewState?.operationMode ?? GeoMapOperationMode.ACTION;
+        let targetItem = this.items().find((it) => id === it.id);
+        if (!targetItem) {
+            console.warn('Selection item is seemingly missing from known items: ', id);
+            return;
         }
-        else {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        switch (operationMode) {
+            case GeoMapOperationMode.ACTION:
+                // TODO: fire action!
+                break;
+            case GeoMapOperationMode.SELECTION:
+                lastValueFrom(this.api.interact(this.uuid, this.identifier, {
+                    operationMode,
+                    targetItem,
+                    targetLayer: '',
+                    inverse: this.selection().has(id),
+                })).then((change) => {
+                    if (!this.viewContextService) {
+                        console.warn('Smart Map has no ViewContext Service set up!');
+                        return null;
+                    }
+                    else {
+                        return this.viewContextService.handlePerformActionResponse(change);
+                    }
+                }, (err) => {
+                    console.warn('Could not submit selection change! ', err);
+                });
+                break;
         }
-        return httpParams;
     }
-    addToHttpParamsRecursive(httpParams, value, key) {
-        if (value == null) {
-            return httpParams;
-        }
-        if (typeof value === "object") {
-            if (Array.isArray(value)) {
-                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
-            }
-            else if (value instanceof Date) {
-                if (key != null) {
-                    httpParams = httpParams.append(key, value.toISOString().substr(0, 10));
-                }
-                else {
-                    throw Error("key may not be null if value is Date");
-                }
-            }
-            else {
-                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
-            }
+    handleEditingItemClick(id, event) {
+        let viewState = this.model()?.viewState;
+        const pendingValues = viewState?.editingSession?.pendingItems;
+        const firstKey = Object.keys(pendingValues)[0];
+        const pendingItems = pendingValues[firstKey];
+        let targetItem = pendingItems[0];
+        if (!targetItem) {
+            console.warn('Selection item is seemingly missing from known items: ', id);
+            return;
         }
-        else if (key != null) {
-            httpParams = httpParams.append(key, value);
+        if (targetItem.kind === GeoMapItemKind.MARKER) {
+            targetItem.position = undefined;
+            this.update(viewState);
         }
         else {
-            throw Error("key may not be null if value is not object or array");
+            const points = targetItem.route.points;
+            const index = points.findIndex((point) => point.latitude === event.coord.y && point.longitude === event.coord.x);
+            if (index !== -1) {
+                points.splice(index, 1);
+            }
         }
-        return httpParams;
+        this.update(viewState);
     }
-    nopePost(observe = 'body', reportProgress = false, options) {
-        let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = [];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+    handleEditingItemDrag(id, event) {
+        let viewState = this.model()?.viewState;
+        const pendingValues = viewState?.editingSession?.pendingItems;
+        const firstKey = Object.keys(pendingValues)[0];
+        const pendingItems = pendingValues[firstKey];
+        let targetItem = pendingItems[0];
+        if (!targetItem) {
+            console.warn('Selection item is seemingly missing from known items: ', id);
+            return;
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
+        if (targetItem.kind === GeoMapItemKind.MARKER) {
+            targetItem.position.latitude = event.dragTo.y;
+            targetItem.position.longitude = event.dragTo.x;
         }
-        let responseType_ = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
-            }
-            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
-            }
-            else {
-                responseType_ = 'blob';
+        else {
+            const points = targetItem.route.points;
+            const index = points.findIndex((point) => point.latitude === event.startPosition.y && point.longitude === event.startPosition.x);
+            if (index !== -1) {
+                points[index].latitude = event.dragTo.y;
+                points[index].longitude = event.dragTo.x;
             }
+            targetItem.route.points = points;
         }
-        let localVarPath = `/nope`;
-        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
-            context: localVarHttpContext,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress
-        });
+        this.update(viewState);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$2, optional: true }, { token: Configuration$2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, providedIn: 'root' }); }
+    toBase64() {
+        return this.mapComponent.toBase64();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapComponent, deps: [{ token: MAP_ENGINE }, { token: GeoMapService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartMapComponent, selector: "smart-map", inputs: { uuid: "uuid", identifier: "identifier", parent: "parent" }, viewQueries: [{ propertyName: "mapComponent", first: true, predicate: ["mapComponent"], descendants: true }], ngImport: i0, template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\r\n<google-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [style]=\"{ width: '100%', height: '320px' }\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n>\r\n</google-map>\r\n} @else if (mapEngine === MapEngine.LEAFLET) {\r\n<leaflet-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [editingSession]=\"editingSession()\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n  (onEditingOverlayDrag)=\"handleEditingItemDrag($event.itemId, $event)\"\r\n>\r\n</leaflet-map>\r\n} @else {\r\n<p>\r\n  <strong>Not recognised map engine: [ {{ mapEngine }} ]</strong>\r\n</p>\r\n<p>Please provide a valid choice of map engine!</p>\r\n} }\r\n", styles: [""], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["style", "styleClass"], outputs: ["onOverlayDblClick", "onOverlayDragStart", "onOverlayDrag", "onOverlayDragEnd", "onMapReady"] }, { kind: "component", type: LeafletMap, selector: "leaflet-map" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-map', template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\r\n<google-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [style]=\"{ width: '100%', height: '320px' }\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n>\r\n</google-map>\r\n} @else if (mapEngine === MapEngine.LEAFLET) {\r\n<leaflet-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [editingSession]=\"editingSession()\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n  (onEditingOverlayDrag)=\"handleEditingItemDrag($event.itemId, $event)\"\r\n>\r\n</leaflet-map>\r\n} @else {\r\n<p>\r\n  <strong>Not recognised map engine: [ {{ mapEngine }} ]</strong>\r\n</p>\r\n<p>Please provide a valid choice of map engine!</p>\r\n} }\r\n" }]
+        }], ctorParameters: () => [{ type: MapEngine, decorators: [{
                     type: Inject,
-                    args: [BASE_PATH$2]
-                }] }, { type: Configuration$2, decorators: [{
-                    type: Optional
-                }] }] });
-
-const APIS$1 = [DefaultService];
-
-/**
- * Form layout definition
- * Contains form layout definition objects.
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-var ComponentType;
-(function (ComponentType) {
-    ComponentType["CONTAINER"] = "container";
-    ComponentType["FORM"] = "form";
-    ComponentType["WIDGET"] = "widget";
-})(ComponentType || (ComponentType = {}));
-
-/**
- * Form layout definition
- * Contains form layout definition objects.
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-var ComponentWidgetType;
-(function (ComponentWidgetType) {
-    ComponentWidgetType["GRID"] = "grid";
-    ComponentWidgetType["FILTER"] = "filter";
-    ComponentWidgetType["TREE"] = "tree";
-    ComponentWidgetType["TOOLBAR"] = "toolbar";
-    ComponentWidgetType["MAP"] = "map";
-    ComponentWidgetType["DIAGRAM"] = "diagram";
-    ComponentWidgetType["EMBEDDED_SLOT"] = "embedded_slot";
-})(ComponentWidgetType || (ComponentWidgetType = {}));
-
-/**
- * Form layout definition
- * Contains form layout definition objects.
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-var LayoutDirection;
-(function (LayoutDirection) {
-    LayoutDirection["HORIZONTAL"] = "horizontal";
-    LayoutDirection["VERTICAL"] = "vertical";
-})(LayoutDirection || (LayoutDirection = {}));
-
-/**
- * Form layout definition
- * Contains form layout definition objects.
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
+                    args: [MAP_ENGINE]
+                }] }, { type: GeoMapService }], propDecorators: { uuid: [{
+                type: Input
+            }], identifier: [{
+                type: Input
+            }], parent: [{
+                type: Input
+            }], mapComponent: [{
+                type: ViewChild,
+                args: ['mapComponent']
+            }] } });
 
-let ApiModule$1 = class ApiModule {
-    static forRoot(configurationFactory) {
-        return {
-            ngModule: ApiModule,
-            providers: [{ provide: Configuration$2, useFactory: configurationFactory }]
-        };
-    }
-    constructor(parentModule, http) {
-        if (parentModule) {
-            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
-        }
-        if (!http) {
-            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
-                'See also https://github.com/angular/angular/issues/20575');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
-};
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule$1, decorators: [{
+class SmartMapModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartMapModule, declarations: [SmartMapComponent, GoogleMap, LeafletMap], imports: [CommonModule, BrowserModule], exports: [SmartMapComponent, GoogleMap, LeafletMap] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapModule, providers: [{ provide: MAP_ENGINE, useValue: MapEngine.GOOGLE }], imports: [CommonModule, BrowserModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [],
-                    declarations: [],
-                    exports: [],
-                    providers: []
+                    declarations: [SmartMapComponent, GoogleMap, LeafletMap],
+                    imports: [CommonModule, BrowserModule],
+                    providers: [{ provide: MAP_ENGINE, useValue: MapEngine.GOOGLE }],
+                    exports: [SmartMapComponent, GoogleMap, LeafletMap],
                 }]
-        }], ctorParameters: () => [{ type: ApiModule$1, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }, { type: i1.HttpClient, decorators: [{
-                    type: Optional
-                }] }] });
+        }] });
 
 /*
  * Public API Surface of smart-grid
@@ -23128,5 +23136,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APIS$5 as APIS, AbstractMap, ApiModule$5 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, COMPONENT_LIBRARY, CUSTOM_DIAGRAM_OPTIONS, CloseResult, ComparableDropdownDirective, ComparableMultiselectDirective, ComponentFactoryService, ComponentFactoryServiceModule, ComponentLibrary, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GoogleMap, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, LayoutDirection, LeafletMap, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuComponent, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, PhotoCaptureWidgetComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SharedModule, SimplifiedTabGroupComponent, SmartActionType, SmartAuthService, SmartComponent, SmartComponentApiClient, SmartComponentLayoutComponent, SmartComponentLayoutModule, SmartComponentLayoutUtility, SmartDatePipe, SmartDateTimePipe, SmartDiagramComponent, SmartDiagramModule, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionModule, SmartExpandableSectionService, SmartFileEditorComponent, SmartFileUploaderComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorModule, SmartFilterEditorService, SmartFilterExpressionItemComponent, SmartFilterExpressionItemsComponent, SmartFilterModule, SmartFilterParamComponent, SmartFilterParamsComponent, SmartFilterPosition, SmartFilterType, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridModule, SmartGridService, SmartGridType, SmartIconComponent, SmartIconModule, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMapModule, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarModule, SmartNavbarService, SmartNavigationModule, SmartNavigationService, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSessionTimerService, SmartSubject, SmartTabGroupModule, SmartTabGroupService, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidationModule, SmartValidatorName, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartWidgetSettings, SmartdialogModule, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmartformwidgetComponent, SmarttableComponent, SmarttableModule, SmarttableService, SmarttreeGenericService, SmarttreeModule, SmarttreeService, TabGroupComponent, ToggleLabelPosition, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetComponent, UploadWidgetType, ValueChangeMode, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, VoiceRecordWidgetComponent, barChart, bubbleChart, createBasicOptions, doughnutChart, horizontalBarChart, horizontalStackedBarChart, multiAxisLineChart, pieChart, polarAreaChart, radarChart, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter };
+export { APIS$5 as APIS, AbstractMap, ApiModule$5 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, COMPONENT_LIBRARY, CUSTOM_DIAGRAM_OPTIONS, CloseResult, ComparableDropdownDirective, ComparableMultiselectDirective, ComponentFactoryService, ComponentFactoryServiceModule, ComponentLibrary, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GoogleMap, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, LayoutDirection, LeafletMap, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuComponent, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, PhotoCaptureWidgetComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SharedModule, SimplifiedTabGroupComponent, SmartActionType, SmartAuthService, SmartComponent, SmartComponentApiClient, SmartComponentLayoutComponent, SmartComponentLayoutModule, SmartComponentLayoutUtility, SmartDatePipe, SmartDateTimePipe, SmartDiagramComponent, SmartDiagramModule, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionModule, SmartExpandableSectionService, SmartFileEditorComponent, SmartFileUploaderComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorModule, SmartFilterEditorService, SmartFilterExpressionItemComponent, SmartFilterExpressionItemsComponent, SmartFilterModule, SmartFilterParamComponent, SmartFilterParamsComponent, SmartFilterPosition, SmartFilterType, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridModule, SmartGridService, SmartGridType, SmartIconComponent, SmartIconModule, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMapModule, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarModule, SmartNavbarService, SmartNavigationModule, SmartNavigationService, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSessionTimerService, SmartSubject, SmartTabGroupModule, SmartTabGroupService, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidationModule, SmartValidatorName, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartWidgetSettings, SmartdialogModule, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmartformwidgetComponent, SmarttableComponent, SmarttableModule, SmarttableService, SmarttreeGenericService, SmarttreeModule, SmarttreeService, TabGroupComponent, ToggleLabelPosition, ToolbarDirection, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetComponent, UploadWidgetType, ValueChangeMode, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, VoiceRecordWidgetComponent, barChart, bubbleChart, createBasicOptions, doughnutChart, horizontalBarChart, horizontalStackedBarChart, multiAxisLineChart, pieChart, polarAreaChart, radarChart, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter };
 //# sourceMappingURL=smartbit4all-ng-client.mjs.map