spiderly 19.4.0-preview.0 → 19.5.0

package/fesm2022/spiderly.mjs

@@ -30,7 +30,7 @@ import * as i1$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1$5 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
-import { Subject, throttleTime, map, BehaviorSubject, of, firstValueFrom, forkJoin, delay as delay$1, withLatestFrom, combineLatest, filter as filter$1, finalize as finalize$1, tap as tap$1, throwError } from 'rxjs';
+import { Subject, throttleTime, map, BehaviorSubject, of, firstValueFrom, delay as delay$1, withLatestFrom, combineLatest, filter as filter$1, finalize as finalize$1, tap as tap$1 } from 'rxjs';
 import * as i3$2 from '@angular/router';
 import { RouterModule, NavigationEnd } from '@angular/router';
 import * as FileSaver from 'file-saver';
@@ -45,14 +45,14 @@ import * as i4$7 from 'primeng/password';
 import { PasswordModule } from 'primeng/password';
 import * as i4$8 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
-import * as i1$3 from 'primeng/skeleton';
+import * as i1$3 from '@angular/common/http';
+import { HttpParams, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angular/common/http';
+import * as i1$4 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i2$1 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
 import * as i4$9 from 'primeng/panel';
 import { PanelModule } from 'primeng/panel';
-import * as i1$4 from '@angular/common/http';
-import { HttpParams, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import { map as map$1, finalize, delay, tap, filter, catchError } from 'rxjs/operators';
 import * as i3$4 from '@abacritt/angularx-social-login';
 import * as i9 from 'primeng/table';
@@ -1307,372 +1307,553 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 }]
         }] });
 
-class IsAuthorizedForSaveEvent extends BaseEntity {
-    constructor({ isAuthorizedForSave, } = {}) {
-        super();
-        this.isAuthorizedForSave = isAuthorizedForSave;
-    }
-    static { this.typeName = 'IsAuthorizedForSaveEvent'; }
-}
-
-class Namebook extends BaseEntity {
-    constructor({ id, displayName, } = {}) {
-        super();
-        this.id = id;
-        this.displayName = displayName;
+// When we call it, inside the console, it will show SpiderlyError: ...
+class SpiderlyError extends Error {
+    constructor(message) {
+        super(message);
     }
-    static { this.schema = {
-        id: {
-            type: 'any',
-        },
-        displayName: {
-            type: 'string',
-        },
-    }; }
-    static { this.typeName = 'Namebook'; }
 }
 
-class UserBase extends BaseEntity {
-    static { this.typeName = 'UserBase'; }
-    constructor({ id, email, } = {}) {
-        super();
-        this.id = id;
-        this.email = email;
-    }
-    static { this.schema = {
-        id: {
-            type: 'number',
-        },
-        email: {
-            type: 'string',
-        },
-    }; }
-}
-class RolePermission extends BaseEntity {
-    static { this.typeName = 'RolePermission'; }
-    constructor({ roleDisplayName, roleId, permissionDisplayName, permissionId } = {}) {
-        super();
-        this.roleDisplayName = roleDisplayName;
-        this.roleId = roleId;
-        this.permissionDisplayName = permissionDisplayName;
-        this.permissionId = permissionId;
-    }
-    static { this.schema = {
-        roleDisplayName: {
-            type: 'string',
-        },
-        roleId: {
-            type: 'number',
-        },
-        permissionDisplayName: {
-            type: 'string',
-        },
-        permissionId: {
-            type: 'number',
-        },
-    }; }
-}
-class RolePermissionSaveBody extends BaseEntity {
-    static { this.typeName = 'RolePermissionSaveBody'; }
-    constructor({ rolePermissionDTO } = {}) {
-        super();
-        this.rolePermissionDTO = rolePermissionDTO;
-    }
-    static { this.schema = {
-        rolePermissionDTO: {
-            type: 'RolePermission',
-            get nestedConstructor() { return RolePermission; },
-        },
-    }; }
-}
-class AuthResult extends BaseEntity {
-    static { this.typeName = 'AuthResult'; }
-    constructor({ userId, email, accessToken, refreshToken } = {}) {
-        super();
-        this.userId = userId;
-        this.email = email;
-        this.accessToken = accessToken;
-        this.refreshToken = refreshToken;
-    }
-    static { this.schema = {
-        userId: {
-            type: 'number',
-        },
-        email: {
-            type: 'string',
-        },
-        accessToken: {
-            type: 'string',
-        },
-        refreshToken: {
-            type: 'string',
-        },
-    }; }
-}
-class VerificationTokenRequest extends BaseEntity {
-    static { this.typeName = 'VerificationTokenRequest'; }
-    constructor({ verificationCode, browserId, email } = {}) {
-        super();
-        this.verificationCode = verificationCode;
-        this.browserId = browserId;
-        this.email = email;
-    }
-    static { this.schema = {
-        verificationCode: {
-            type: 'string',
-        },
-        browserId: {
-            type: 'string',
-        },
-        email: {
-            type: 'string',
-        },
-    }; }
-}
-class ExternalProvider extends BaseEntity {
-    static { this.typeName = 'ExternalProvider'; }
-    constructor({ idToken, browserId } = {}) {
-        super();
-        this.idToken = idToken;
-        this.browserId = browserId;
+class SpiderlyMessageService {
+    constructor(messageService, translocoService, ngZone) {
+        this.messageService = messageService;
+        this.translocoService = translocoService;
+        this.ngZone = ngZone;
     }
-    static { this.schema = {
-        idToken: {
-            type: 'string',
-        },
-        browserId: {
-            type: 'string',
-        },
-    }; }
-}
-class UserRole extends BaseEntity {
-    static { this.typeName = 'UserRole'; }
-    constructor({ roleId, userId } = {}) {
-        super();
-        this.roleId = roleId;
-        this.userId = userId;
+    successMessage(detail, title = this.translocoService.translate('SuccessfulAction')) {
+        this.messageService.add({
+            severity: 'success',
+            summary: title,
+            detail: detail,
+            life: 10000,
+        });
     }
-    static { this.schema = {
-        roleId: {
-            type: 'number',
-        },
-        userId: {
-            type: 'number',
-        },
-    }; }
-}
-class UserRoleSaveBody extends BaseEntity {
-    static { this.typeName = 'UserRoleSaveBody'; }
-    constructor({ userRoleDTO } = {}) {
-        super();
-        this.userRoleDTO = userRoleDTO;
+    warningMessage(detail, title, sticky) {
+        this.messageService.add({
+            severity: 'warn',
+            summary: title ?? this.translocoService.translate('Warning'),
+            detail: detail,
+            life: 10000,
+            sticky: sticky
+        });
     }
-    static { this.schema = {
-        userRoleDTO: {
-            type: 'UserRole',
-            get nestedConstructor() { return UserRole; },
-        },
-    }; }
-}
-class LoginVerificationToken extends BaseEntity {
-    static { this.typeName = 'LoginVerificationToken'; }
-    constructor({ email, userId, browserId, expireAt } = {}) {
-        super();
-        this.email = email;
-        this.userId = userId;
-        this.browserId = browserId;
-        this.expireAt = expireAt;
+    errorMessage(detail, title = this.translocoService.translate('Error')) {
+        this.messageService.add({
+            severity: 'error',
+            summary: title,
+            detail: detail,
+            life: 10000,
+        });
     }
-    static { this.schema = {
-        email: {
-            type: 'string',
-        },
-        userId: {
-            type: 'number',
-        },
-        browserId: {
-            type: 'string',
-        },
-        expireAt: {
-            type: 'Date',
-        },
-    }; }
-}
-class Login extends BaseEntity {
-    static { this.typeName = 'Login'; }
-    constructor({ email, browserId } = {}) {
-        super();
-        this.email = email;
-        this.browserId = browserId;
+    infoMessage(detail, title, sticky) {
+        this.messageService.add({
+            severity: 'info',
+            summary: title ?? this.translocoService.translate('Info'),
+            detail: detail,
+            life: 10000,
+            sticky: sticky,
+        });
     }
-    static { this.schema = {
-        email: {
-            type: 'string',
-        },
-        browserId: {
-            type: 'string',
-        },
-    }; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMessageService, deps: [{ token: i1$2.MessageService }, { token: i1.TranslocoService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMessageService, providedIn: 'root' }); }
 }
-class RefreshTokenRequest extends BaseEntity {
-    static { this.typeName = 'RefreshTokenRequest'; }
-    constructor({ refreshToken, browserId } = {}) {
-        super();
-        this.refreshToken = refreshToken;
-        this.browserId = browserId;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMessageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$2.MessageService }, { type: i1.TranslocoService }, { type: i0.NgZone }] });
+
+class TranslateLabelsAbstractService {
+    constructor() {
     }
-    static { this.schema = {
-        refreshToken: {
-            type: 'string',
-        },
-        browserId: {
-            type: 'string',
-        },
-    }; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TranslateLabelsAbstractService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TranslateLabelsAbstractService, providedIn: 'root' }); }
 }
-class Role extends BaseEntity {
-    static { this.typeName = 'Role'; }
-    constructor({ name, description, version, id, createdAt, modifiedAt } = {}) {
-        super();
-        this.name = name;
-        this.description = description;
-        this.version = version;
-        this.id = id;
-        this.createdAt = createdAt;
-        this.modifiedAt = modifiedAt;
-    }
-    static { this.schema = {
-        name: {
-            type: 'string',
-        },
-        description: {
-            type: 'string',
-        },
-        version: {
-            type: 'number',
-        },
-        id: {
-            type: 'number',
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TranslateLabelsAbstractService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class BaseFormService {
+    constructor(translateLabelsService, validatorService, messageService, translocoService) {
+        this.translateLabelsService = translateLabelsService;
+        this.validatorService = validatorService;
+        this.messageService = messageService;
+        this.translocoService = translocoService;
+        this.initFormGroup = (formGroup, targetClass, initialValues, updateOnChangeControls) => {
+            if (!formGroup)
+                throw new SpiderlyError('You need to instantiate the form group.');
+            if (!targetClass)
+                throw new SpiderlyError('You need to pass targetClass.');
+            if (!initialValues)
+                initialValues = {};
+            Object.keys(targetClass.schema).forEach((formControlName) => {
+                const propSchema = targetClass.schema[formControlName];
+                let propInitialValue = initialValues[formControlName];
+                const existingControl = formGroup.get(formControlName);
+                if (propSchema.type.endsWith('[]') &&
+                    propSchema.nestedConstructor &&
+                    propSchema.type !== 'Namebook[]') {
+                    if (existingControl instanceof SpiderlyFormArray) {
+                        this.initFormArray(existingControl, propSchema.nestedConstructor, propInitialValue);
+                    }
+                    else {
+                        const control = new SpiderlyFormArray([], this.translocoService, this);
+                        this.initFormArray(control, propSchema.nestedConstructor, propInitialValue);
+                        control.label = formControlName;
+                        control.labelForDisplay = this.getTranslatedLabel(formControlName);
+                        formGroup.setControl(formControlName, control);
+                    }
+                }
+                else if (propSchema.nestedConstructor &&
+                    propSchema.type !== 'Namebook[]') {
+                    if (existingControl instanceof SpiderlyFormGroup) {
+                        this.initFormGroup(existingControl, propSchema.nestedConstructor, propInitialValue);
+                    }
+                    else {
+                        const control = new SpiderlyFormGroup({});
+                        this.initFormGroup(control, propSchema.nestedConstructor, propInitialValue);
+                        formGroup.setControl(formControlName, control);
+                    }
+                }
+                else {
+                    // HACK: Because on the backend id type is not nullable on generated DTOs, we need to do this, it's ugly hack and we should make it better.
+                    if (formControlName === 'id' && !propInitialValue) {
+                        propInitialValue = 0;
+                    }
+                    if (existingControl instanceof SpiderlyFormControl) {
+                        existingControl.setValue(propInitialValue);
+                    }
+                    else {
+                        let control;
+                        if (updateOnChangeControls?.includes(formControlName) ||
+                            (formControlName.endsWith('Id') && formControlName.length > 2) ||
+                            propSchema.type === 'Date' ||
+                            propSchema.type === 'Namebook[]') {
+                            control = new SpiderlyFormControl(propInitialValue, { updateOn: 'change' });
+                        }
+                        else {
+                            control = new SpiderlyFormControl(propInitialValue, { updateOn: 'blur' });
+                        }
+                        control.label = formControlName;
+                        control.labelForDisplay = this.getTranslatedLabel(formControlName);
+                        control.parentClassName = targetClass.typeName;
+                        this.validatorService.setValidator(control, targetClass.typeName);
+                        formGroup.setControl(formControlName, control);
+                    }
+                }
+            });
+            formGroup.targetClass = targetClass;
+            return formGroup;
+        };
+        //#region Helpers
+        this.showInvalidFieldsMessage = () => {
+            this.messageService.warningMessage(this.translocoService.translate('YouHaveSomeInvalidFieldsDescription'), this.translocoService.translate('YouHaveSomeInvalidFieldsTitle'));
+        };
+        this.getSaveBodyMainDTOKey = (saveBodyClass) => {
+            const schema = saveBodyClass.schema;
+            return Object.keys(schema).find(k => schema[k].isSaveBodyMainDTO === true);
+        };
+        this.mapMainUIFormToSaveBody = (mainUIFormClass, mainUIFormValues) => {
+            let saveBody = {};
+            Object.keys(mainUIFormClass.schema).forEach(propName => {
+                const property = mainUIFormClass.schema[propName];
+                const value = mainUIFormValues[propName];
+                // Handle ordered one-to-many (e.g., "orderedItemsMainUIFormDTO" -> "orderedItemsSaveBodyDTO")
+                if (propName.startsWith('ordered') && propName.endsWith('MainUIFormDTO')) {
+                    const newKey = propName.replace('MainUIFormDTO', 'SaveBodyDTO');
+                    // Recursively map nested DTOs
+                    const relatedEntity = property.nestedConstructor;
+                    saveBody[newKey] = value?.map(item => this.mapMainUIFormToSaveBody(relatedEntity, item)) ?? [];
+                }
+                // Handle multi-select (e.g., "itemsIds" -> "selectedItemsIds")
+                else if (propName.endsWith('Ids')) {
+                    saveBody[`selected${capitalizeFirstChar(propName)}`] = value ?? [];
+                }
+                // Handle multi-autocomplete (e.g., "itemsNamebookDTOList" -> "selectedItemsIds")
+                else if (propName.endsWith('NamebookDTOList')) {
+                    saveBody[`selected${capitalizeFirstChar(propName)}`] = value ?? [];
+                }
+                // Handle the main DTO object (e.g., "entityDTO")
+                else {
+                    saveBody[propName] = value;
+                }
+            });
+            return saveBody;
+        };
+    }
+    getTranslatedLabel(formControlName) {
+        if (formControlName.endsWith('Id') && formControlName.length > 2) {
+            formControlName = formControlName.substring(0, formControlName.length - 2);
+        }
+        else if (formControlName.endsWith('DisplayName')) {
+            formControlName = formControlName.replace('DisplayName', '');
+        }
+        return this.translateLabelsService.translate(formControlName);
+    }
+    addNewFormGroupToFormArray(formArray, targetClass, initialValues, index) {
+        let helperFormGroup = new SpiderlyFormGroup({});
+        this.initFormGroup(helperFormGroup, targetClass, initialValues);
+        if (index == null) {
+            formArray.push(helperFormGroup);
+        }
+        else {
+            formArray.insert(index, helperFormGroup);
+        }
+        return helperFormGroup;
+    }
+    removeFormControlFromTheFormArray(formArray, index) {
+        if (index == null)
+            throw new SpiderlyError('Can not pass null index.');
+        formArray.removeAt(index);
+    }
+    initFormArray(formArray, targetClass, initialValues = []) {
+        if (!formArray)
+            throw new SpiderlyError('You must pass a FormArray instance to be initialized or updated.');
+        if (!targetClass)
+            throw new SpiderlyError('You did not initialize targetClass');
+        formArray.formGroupInitialValues = {}; // When we need we can pass formGroupInitialValues to this method instead of assigning it to empty object
+        formArray.targetClass = targetClass;
+        initialValues.forEach((model, index) => {
+            const existingControl = formArray.at(index);
+            if (existingControl instanceof SpiderlyFormGroup) {
+                this.initFormGroup(existingControl, targetClass, model);
+            }
+            else {
+                let helperFormGroup = new SpiderlyFormGroup({});
+                this.initFormGroup(helperFormGroup, targetClass, model);
+                formArray.push(helperFormGroup);
+            }
+        });
+        return formArray;
+    }
+    generateNewNegativeId(formArray) {
+        return -formArray.getRawValue().filter(x => x.id < 0).length - 1;
+    }
+    isControlValid(control, controlNamesFromHtml) {
+        let invalid = false;
+        if (control instanceof SpiderlyFormControl) {
+            if (control.invalid &&
+                (controlNamesFromHtml == null || controlNamesFromHtml?.includes(control.label))) {
+                control.markAsDirty();
+                invalid = true;
+            }
+        }
+        else if (control instanceof SpiderlyFormGroup) {
+            Object.keys(control.controls).forEach(key => {
+                const nestedControl = control.controls[key];
+                if (!this.isControlValid(nestedControl, control.controlNamesFromHtml)) {
+                    invalid = true;
+                }
+            });
+        }
+        else if (control instanceof SpiderlyFormArray) {
+            control.controls.forEach((nestedControl) => {
+                if (!this.isControlValid(nestedControl)) {
+                    invalid = true;
+                }
+            });
+        }
+        if (invalid) {
+            return false;
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormService, deps: [{ token: TranslateLabelsAbstractService }, { token: ValidatorAbstractService }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: TranslateLabelsAbstractService }, { type: ValidatorAbstractService }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }] });
+
+class BaseFormCopy {
+    constructor(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService) {
+        this.differs = differs;
+        this.http = http;
+        this.messageService = messageService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.router = router;
+        this.route = route;
+        this.translocoService = translocoService;
+        this.baseFormService = baseFormService;
+        this.parentFormGroup = new SpiderlyFormGroup({});
+        this.successfulSaveToastDescription = this.translocoService.translate('SuccessfulSaveToastDescription');
+        //#region Model
+        // onSave method is here only because of the hooks, we should move everything except them to the BaseFromService
+        this.onSave = (reroute = true) => {
+            if (!this.saveBodyClass)
+                throw new SpiderlyError('You did not initialize saveBodyClass');
+            if (!this.mainUIFormClass)
+                throw new SpiderlyError('You did not initialize mainUIFormClass');
+            this.saveBody = this.parentFormGroup.initSaveBody();
+            this.onBeforeSave(this.saveBody);
+            this.saveBody = this.saveBody ?? this.parentFormGroup.getRawValue();
+            const isValid = this.baseFormService.isControlValid(this.parentFormGroup);
+            if (isValid) {
+                this.parentFormGroup.saveObservableMethod(this.saveBody).subscribe(res => {
+                    this.messageService.successMessage(this.successfulSaveToastDescription);
+                    this.baseFormService.initFormGroup(this.parentFormGroup, this.mainUIFormClass, res);
+                    if (reroute) {
+                        const saveBodyMainDTOKey = this.baseFormService.getSaveBodyMainDTOKey(this.saveBodyClass);
+                        const savedObjectId = res[saveBodyMainDTOKey]?.id;
+                        this.rerouteToSavedObject(savedObjectId); // You always need to have id, because of id == 0 and version change
+                    }
+                    this.onAfterSave();
+                });
+                this.onAfterSaveRequest();
+            }
+            else {
+                this.baseFormService.showInvalidFieldsMessage();
+            }
+        };
+        this.rerouteToSavedObject = (rerouteId) => {
+            if (rerouteId == null) {
+                const currentUrl = this.router.url;
+                const parentUrl = getParentUrl(currentUrl);
+                this.router.navigateByUrl(parentUrl);
+                return;
+            }
+            const segments = this.router.url.split('/');
+            segments[segments.length - 1] = rerouteId.toString();
+            const newUrl = segments.join('/');
+            this.router.navigateByUrl(newUrl);
+        };
+        this.onBeforeSave = (saveBody) => { };
+        this.onAfterSave = () => { };
+        this.onAfterSaveRequest = () => { };
+    }
+    ngOnInit() {
+    }
+    //#endregion
+    //#region Model List
+    getFormArrayControlByIndex(formControlName, formArray, index, filter) {
+        // if(formArray.controlNamesFromHtml.findIndex(x => x === formControlName) === -1)
+        //   formArray.controlNamesFromHtml.push(formControlName);
+        let filteredFormGroups;
+        if (filter) {
+            filteredFormGroups = filter(formArray.controls);
+        }
+        else {
+            return formArray.controls[index].controls[formControlName];
+        }
+        return filteredFormGroups[index]?.controls[formControlName]; // FT: Don't change this. It's always possible that change detection occurs before something.
+    }
+    getFormArrayControls(formControlName, formArray, filter) {
+        // if(formArray.controlNamesFromHtml.findIndex(x => x === formControlName) === -1)
+        //   formArray.controlNamesFromHtml.push(formControlName);
+        let filteredFormGroups;
+        if (filter) {
+            filteredFormGroups = filter(formArray.controls);
+        }
+        else {
+            return formArray.controls.map(x => x.controls[formControlName]);
+        }
+        return filteredFormGroups.map(x => x.controls[formControlName]);
+    }
+    removeFormControlsFromTheFormArray(formArray, indexes) {
+        // Sort indexes in descending order to avoid index shifts when removing controls
+        const sortedIndexes = indexes.sort((a, b) => b - a);
+        sortedIndexes.forEach(index => {
+            if (index >= 0 && index < formArray.length) {
+                formArray.removeAt(index);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormCopy, deps: [{ token: i0.KeyValueDiffers }, { token: i1$3.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: BaseFormCopy, isStandalone: false, selector: "base-form", ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormCopy, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-form', template: '', standalone: false }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$3.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }] });
+
+class CardSkeletonComponent {
+    constructor() {
+        this.height = 400;
+        this.titleHeight = 23;
+        this.padding = 21;
+        this.titleMarginBottom = 14;
+        this.titleMarginTop = 4;
+    }
+    ngOnInit() {
+        this.dataHeight = this.height - (this.titleHeight + this.padding * 2 + this.titleMarginBottom + this.titleMarginTop);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: CardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: CardSkeletonComponent, isStandalone: true, selector: "card-skeleton", inputs: { height: "height" }, ngImport: i0, template: "<div class=\"border-round border-1 surface-border p-4 surface-card\" [style]=\"'height: ' + height + 'px;'\">\n    <div [style]=\"'margin-bottom:' + titleMarginBottom + 'px; margin-top:' + titleMarginTop + 'px;'\">\n        <p-skeleton width=\"160px\" [height]=\"titleHeight + 'px'\"></p-skeleton>\n    </div>\n    <div [style]=\"'height: ' + dataHeight + 'px;'\">\n        <p-skeleton width=\"100%\" height=\"100%\"/>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: CardSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'card-skeleton', imports: [SkeletonModule], template: "<div class=\"border-round border-1 surface-border p-4 surface-card\" [style]=\"'height: ' + height + 'px;'\">\n    <div [style]=\"'margin-bottom:' + titleMarginBottom + 'px; margin-top:' + titleMarginTop + 'px;'\">\n        <p-skeleton width=\"160px\" [height]=\"titleHeight + 'px'\"></p-skeleton>\n    </div>\n    <div [style]=\"'height: ' + dataHeight + 'px;'\">\n        <p-skeleton width=\"100%\" height=\"100%\"/>\n    </div>\n</div>" }]
+        }], propDecorators: { height: [{
+                type: Input
+            }] } });
+
+class UserBase extends BaseEntity {
+    static { this.typeName = 'UserBase'; }
+    constructor({ id, email, } = {}) {
+        super();
+        this.id = id;
+        this.email = email;
+    }
+    static { this.schema = {
+        id: {
+            type: 'number',
+        },
+        email: {
+            type: 'string',
+        },
+    }; }
+}
+class AuthResult extends BaseEntity {
+    static { this.typeName = 'AuthResult'; }
+    constructor({ userId, email, accessToken, refreshToken } = {}) {
+        super();
+        this.userId = userId;
+        this.email = email;
+        this.accessToken = accessToken;
+        this.refreshToken = refreshToken;
+    }
+    static { this.schema = {
+        userId: {
+            type: 'number',
         },
-        createdAt: {
-            type: 'Date',
+        email: {
+            type: 'string',
         },
-        modifiedAt: {
-            type: 'Date',
+        accessToken: {
+            type: 'string',
+        },
+        refreshToken: {
+            type: 'string',
         },
     }; }
 }
-class RoleMainUIForm extends BaseEntity {
-    static { this.typeName = 'RoleMainUIForm'; }
-    constructor({ roleDTO, usersNamebookDTOList = [], permissionsIds = [] } = {}) {
+class VerificationTokenRequest extends BaseEntity {
+    static { this.typeName = 'VerificationTokenRequest'; }
+    constructor({ verificationCode, browserId, email } = {}) {
         super();
-        this.roleDTO = roleDTO;
-        this.usersNamebookDTOList = usersNamebookDTOList;
-        this.permissionsIds = permissionsIds;
+        this.verificationCode = verificationCode;
+        this.browserId = browserId;
+        this.email = email;
     }
     static { this.schema = {
-        roleDTO: {
-            type: 'Role',
-            get nestedConstructor() { return Role; },
-            isMainDTOForMainUIFormDTO: true,
+        verificationCode: {
+            type: 'string',
         },
-        usersNamebookDTOList: {
-            type: 'Namebook[]',
-            get nestedConstructor() { return Namebook; },
+        browserId: {
+            type: 'string',
         },
-        permissionsIds: {
-            type: 'number[]',
+        email: {
+            type: 'string',
         },
     }; }
 }
-class RoleSaveBody extends BaseEntity {
-    static { this.typeName = 'RoleSaveBody'; }
-    constructor({ roleDTO, selectedPermissionsIds = [], selectedUsersIds = [] } = {}) {
+class ExternalProvider extends BaseEntity {
+    static { this.typeName = 'ExternalProvider'; }
+    constructor({ idToken, browserId } = {}) {
         super();
-        this.roleDTO = roleDTO;
-        this.selectedPermissionsIds = selectedPermissionsIds;
-        this.selectedUsersIds = selectedUsersIds;
+        this.idToken = idToken;
+        this.browserId = browserId;
     }
     static { this.schema = {
-        roleDTO: {
-            type: 'Role',
-            get nestedConstructor() { return Role; },
-            isSaveBodyMainDTO: true,
+        idToken: {
+            type: 'string',
         },
-        selectedPermissionsIds: {
-            type: 'number[]',
+        browserId: {
+            type: 'string',
+        },
+    }; }
+}
+class UserRole extends BaseEntity {
+    static { this.typeName = 'UserRole'; }
+    constructor({ roleId, userId } = {}) {
+        super();
+        this.roleId = roleId;
+        this.userId = userId;
+    }
+    static { this.schema = {
+        roleId: {
+            type: 'number',
         },
-        selectedUsersIds: {
-            type: 'number[]',
+        userId: {
+            type: 'number',
         },
     }; }
 }
-class Permission extends BaseEntity {
-    static { this.typeName = 'Permission'; }
-    constructor({ name, nameLatin, description, descriptionLatin, code, id } = {}) {
+class LoginVerificationToken extends BaseEntity {
+    static { this.typeName = 'LoginVerificationToken'; }
+    constructor({ email, userId, browserId, expireAt } = {}) {
         super();
-        this.name = name;
-        this.nameLatin = nameLatin;
-        this.description = description;
-        this.descriptionLatin = descriptionLatin;
-        this.code = code;
-        this.id = id;
+        this.email = email;
+        this.userId = userId;
+        this.browserId = browserId;
+        this.expireAt = expireAt;
     }
     static { this.schema = {
-        name: {
+        email: {
             type: 'string',
         },
-        nameLatin: {
-            type: 'string',
+        userId: {
+            type: 'number',
         },
-        description: {
+        browserId: {
             type: 'string',
         },
-        descriptionLatin: {
-            type: 'string',
+        expireAt: {
+            type: 'Date',
         },
-        code: {
+    }; }
+}
+class Login extends BaseEntity {
+    static { this.typeName = 'Login'; }
+    constructor({ email, browserId } = {}) {
+        super();
+        this.email = email;
+        this.browserId = browserId;
+    }
+    static { this.schema = {
+        email: {
             type: 'string',
         },
-        id: {
-            type: 'number',
+        browserId: {
+            type: 'string',
         },
     }; }
 }
-class PermissionSaveBody extends BaseEntity {
-    static { this.typeName = 'PermissionSaveBody'; }
-    constructor({ permissionDTO } = {}) {
+class RefreshTokenRequest extends BaseEntity {
+    static { this.typeName = 'RefreshTokenRequest'; }
+    constructor({ refreshToken, browserId } = {}) {
         super();
-        this.permissionDTO = permissionDTO;
+        this.refreshToken = refreshToken;
+        this.browserId = browserId;
     }
     static { this.schema = {
-        permissionDTO: {
-            type: 'Permission',
-            get nestedConstructor() { return Permission; },
+        refreshToken: {
+            type: 'string',
+        },
+        browserId: {
+            type: 'string',
         },
     }; }
 }
-
-class CardSkeletonComponent {
-    constructor() {
-        this.height = 400;
-        this.titleHeight = 23;
-        this.padding = 21;
-        this.titleMarginBottom = 14;
-        this.titleMarginTop = 4;
-    }
-    ngOnInit() {
-        this.dataHeight = this.height - (this.titleHeight + this.padding * 2 + this.titleMarginBottom + this.titleMarginTop);
+class SendLoginVerificationEmailResult extends BaseEntity {
+    static { this.typeName = 'SendLoginVerificationEmailResult'; }
+    constructor({ message } = {}) {
+        super();
+        this.message = message;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: CardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: CardSkeletonComponent, isStandalone: true, selector: "card-skeleton", inputs: { height: "height" }, ngImport: i0, template: "<div class=\"border-round border-1 surface-border p-4 surface-card\" [style]=\"'height: ' + height + 'px;'\">\n    <div [style]=\"'margin-bottom:' + titleMarginBottom + 'px; margin-top:' + titleMarginTop + 'px;'\">\n        <p-skeleton width=\"160px\" [height]=\"titleHeight + 'px'\"></p-skeleton>\n    </div>\n    <div [style]=\"'height: ' + dataHeight + 'px;'\">\n        <p-skeleton width=\"100%\" height=\"100%\"/>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] }); }
+    static { this.schema = {
+        message: {
+            type: 'string',
+        },
+    }; }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: CardSkeletonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'card-skeleton', imports: [SkeletonModule], template: "<div class=\"border-round border-1 surface-border p-4 surface-card\" [style]=\"'height: ' + height + 'px;'\">\n    <div [style]=\"'margin-bottom:' + titleMarginBottom + 'px; margin-top:' + titleMarginTop + 'px;'\">\n        <p-skeleton width=\"160px\" [height]=\"titleHeight + 'px'\"></p-skeleton>\n    </div>\n    <div [style]=\"'height: ' + dataHeight + 'px;'\">\n        <p-skeleton width=\"100%\" height=\"100%\"/>\n    </div>\n</div>" }]
-        }], propDecorators: { height: [{
-                type: Input
-            }] } });
 
 class PanelBodyComponent {
     constructor() {
@@ -1846,388 +2027,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 }]
         }] });
 
-class ConfigBaseService {
-    constructor() {
-        this.production = false;
-        this.frontendUrl = 'http://localhost:4200';
-        this.companyName = 'Company Name';
-        this.primaryColor = '#111b2c';
-        this.googleAuth = true;
-        /* URLs */
-        this.loginSlug = 'login';
-        /* Local storage */
-        this.accessTokenKey = 'access_token';
-        this.refreshTokenKey = 'refresh_token';
-        this.browserIdKey = 'browser_id';
-        this.httpOptions = {};
-        this.httpSkipSpinnerOptions = {
-            headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
-            params: new HttpParams().set('X-Skip-Spinner', 'true')
-        };
-        this.logoPath = 'assets/images/logo/logo.svg';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigBaseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigBaseService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigBaseService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class ApiSecurityService {
-    constructor(http, config) {
+class VerificationWrapperComponent extends BaseFormCopy {
+    constructor(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService) {
+        super(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService);
+        this.differs = differs;
         this.http = http;
-        this.config = config;
-        //#region Authentication
-        this.login = (request) => {
-            return this.http.post(`${this.config.apiUrl}/Security/Login`, request, this.config.httpOptions);
-        };
-        this.loginExternal = (externalProviderDTO) => {
-            return this.http.post(`${this.config.apiUrl}/Security/LoginExternal`, externalProviderDTO, this.config.httpOptions);
-        };
-        this.sendLoginVerificationEmail = (loginDTO) => {
-            return this.http.post(`${this.config.apiUrl}/Security/SendLoginVerificationEmail`, loginDTO, this.config.httpOptions);
-        };
-        this.logout = (browserId) => {
-            return this.http.get(`${this.config.apiUrl}/Security/Logout?browserId=${browserId}`);
-        };
-        this.refreshToken = (request) => {
-            return this.http.post(`${this.config.apiUrl}/Security/RefreshToken`, request, this.config.httpOptions);
-        };
-        //#endregion
-        //#region User
-        this.getCurrentUserBase = () => {
-            return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUserBase`, this.config.httpSkipSpinnerOptions);
-        };
-        this.getCurrentUserPermissionCodes = () => {
-            return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUserPermissionCodes`, this.config.httpSkipSpinnerOptions);
-        };
-        //#endregion
-        //#region Role
-        this.getPaginatedRoleList = (dto) => {
-            return this.http.post(`${this.config.apiUrl}/Security/GetPaginatedRoleList`, dto, this.config.httpSkipSpinnerOptions);
-        };
-        this.exportRoleListToExcel = (dto) => {
-            return this.http.post(`${this.config.apiUrl}/Security/ExportRoleListToExcel`, dto, this.config.httpOptions);
-        };
-        this.deleteRole = (id) => {
-            return this.http.delete(`${this.config.apiUrl}/Security/DeleteRole?id=${id}`);
-        };
-        this.getRoleMainUIFormDTO = (id) => {
-            return this.http.get(`${this.config.apiUrl}/Security/GetRoleMainUIFormDTO?id=${id}`);
-        };
-        this.getRole = (id) => {
-            return this.http.get(`${this.config.apiUrl}/Security/GetRole?id=${id}`);
-        };
-        this.saveRole = (dto) => {
-            return this.http.put(`${this.config.apiUrl}/Security/SaveRole`, dto, this.config.httpOptions);
-        };
-        this.getUsersNamebookListForRole = (roleId) => {
-            return this.http.get(`${this.config.apiUrl}/Security/GetUsersNamebookListForRole?roleId=${roleId}`, this.config.httpSkipSpinnerOptions);
-        };
-        this.getPermissionsDropdownListForRole = () => {
-            return this.http.get(`${this.config.apiUrl}/Security/GetPermissionsDropdownListForRole`, this.config.httpSkipSpinnerOptions);
-        };
-        this.getPermissionsNamebookListForRole = (roleId) => {
-            return this.http.get(`${this.config.apiUrl}/Security/GetPermissionsNamebookListForRole?roleId=${roleId}`, this.config.httpSkipSpinnerOptions);
-        };
-        this.getUsersAutocompleteListForRole = (limit, query) => {
-            return this.http.get(`${this.config.apiUrl}/Security/GetUsersAutocompleteListForRole?limit=${limit}&query=${query}`, this.config.httpSkipSpinnerOptions);
-        };
-        //#endregion
-        //#region Notification
-        this.getUnreadNotificationsCountForCurrentUser = () => {
-            return this.http.get(`${this.config.apiUrl}/Notification/GetUnreadNotificationsCountForCurrentUser`, this.config.httpSkipSpinnerOptions);
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, deps: [{ token: i1$4.HttpClient }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: ConfigBaseService }] });
-
-// When we call it, inside the console, it will show SpiderlyError: ...
-class SpiderlyError extends Error {
-    constructor(message) {
-        super(message);
-    }
-}
-
-class TranslateLabelsAbstractService {
-    constructor() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TranslateLabelsAbstractService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TranslateLabelsAbstractService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TranslateLabelsAbstractService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class SpiderlyMessageService {
-    constructor(messageService, translocoService, ngZone) {
         this.messageService = messageService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.router = router;
+        this.route = route;
         this.translocoService = translocoService;
-        this.ngZone = ngZone;
+        this.baseFormService = baseFormService;
+        this.verificationTokenRequestFormGroup = new SpiderlyFormGroup({});
+        this.onResendVerificationToken = new EventEmitter();
+        this.onCodeSubmit = new EventEmitter();
     }
-    successMessage(detail, title = this.translocoService.translate('SuccessfulAction')) {
-        this.messageService.add({
-            severity: 'success',
-            summary: title,
-            detail: detail,
-            life: 10000,
-        });
+    ngOnInit() {
+        this.initVerificationTokenRequestFormGroup(new VerificationTokenRequest({ email: this.email }));
     }
-    warningMessage(detail, title, sticky) {
-        this.messageService.add({
-            severity: 'warn',
-            summary: title ?? this.translocoService.translate('Warning'),
-            detail: detail,
-            life: 10000,
-            sticky: sticky
-        });
+    initVerificationTokenRequestFormGroup(model) {
+        this.baseFormService.initFormGroup(this.verificationTokenRequestFormGroup, VerificationTokenRequest, model, ['verificationCode']);
     }
-    errorMessage(detail, title = this.translocoService.translate('Error')) {
-        this.messageService.add({
-            severity: 'error',
-            summary: title,
-            detail: detail,
-            life: 10000,
-        });
+    codeSubmit() {
+        let isValid = this.baseFormService.isControlValid(this.verificationTokenRequestFormGroup);
+        if (isValid) {
+            this.onCodeSubmit.next(this.verificationTokenRequestFormGroup.controls.verificationCode.getRawValue());
+        }
+    }
+    resendVerificationToken() {
+        this.onResendVerificationToken.next(null);
     }
-    infoMessage(detail, title, sticky) {
-        this.messageService.add({
-            severity: 'info',
-            summary: title ?? this.translocoService.translate('Info'),
-            detail: detail,
-            life: 10000,
-            sticky: sticky,
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: VerificationWrapperComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$3.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: VerificationWrapperComponent, isStandalone: true, selector: "verification-wrapper", inputs: { email: "email" }, outputs: { onResendVerificationToken: "onResendVerificationToken", onCodeSubmit: "onCodeSubmit" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"min-h-screen\" style=\"display: flex; justify-content: center; align-items: center;\">\n        <div class=\"dialog\" style=\"padding: 0px;\">\n            @if (verificationTokenRequestFormGroup != null) {\n                <spiderly-panel>\n                    <panel-header [title]=\"t('AccountVerificationHeader')\" [showBigTitle]=\"true\" icon=\"pi pi-envelope\"></panel-header>\n                    \n                    <panel-body>\n                        <form class=\"grid\">\n                            <div class=\"col-12\">\n                                <div style=\"font-size: 17.5px\">{{t('AccountVerificationTitle')}}</div>\n                            </div>\n                            <div class=\"col-12\">\n                                {{t('AccountVerificationDescription', {email: email})}}\n                            </div>\n                            <div class=\"col-12\">\n                                <spiderly-textbox [control]=\"verificationTokenRequestFormGroup.getControl('verificationCode')\"></spiderly-textbox>\n                            </div>\n                            <div class=\"col-12\">\n                                <spiderly-button (onClick)=\"codeSubmit()\" [label]=\"t('Submit')\" icon=\"pi pi-verified\" type=\"submit\"></spiderly-button>\n                            </div>\n                        </form>\n                    </panel-body>\n                    \n                    <panel-footer>\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToGmail')\" icon=\"pi pi-external-link\" href=\"https://mail.google.com/mail/u/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToYahoo')\" icon=\"pi pi-external-link\" href=\"https://mail.yahoo.com/d/folders/1/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n                    </panel-footer>\n                    <panel-footer>\n                        <div>{{t('ResendVerificationCodeFirstPart')}} <a class=\"link\" (click)=\"resendVerificationToken()\">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>\n                    </panel-footer>\n                </spiderly-panel>\n            }\n            @else {\n                <!-- TODO FT: Add skeleton -->\n            }\n        </div>\n    </div>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: PanelFooterComponent, selector: "panel-footer" }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "toggler", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: VerificationWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'verification-wrapper', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SpiderlyControlsModule,
+                        SpiderlyPanelsModule,
+                        ButtonModule,
+                        TranslocoDirective,
+                    ], template: "<ng-container *transloco=\"let t\">\n    <div class=\"min-h-screen\" style=\"display: flex; justify-content: center; align-items: center;\">\n        <div class=\"dialog\" style=\"padding: 0px;\">\n            @if (verificationTokenRequestFormGroup != null) {\n                <spiderly-panel>\n                    <panel-header [title]=\"t('AccountVerificationHeader')\" [showBigTitle]=\"true\" icon=\"pi pi-envelope\"></panel-header>\n                    \n                    <panel-body>\n                        <form class=\"grid\">\n                            <div class=\"col-12\">\n                                <div style=\"font-size: 17.5px\">{{t('AccountVerificationTitle')}}</div>\n                            </div>\n                            <div class=\"col-12\">\n                                {{t('AccountVerificationDescription', {email: email})}}\n                            </div>\n                            <div class=\"col-12\">\n                                <spiderly-textbox [control]=\"verificationTokenRequestFormGroup.getControl('verificationCode')\"></spiderly-textbox>\n                            </div>\n                            <div class=\"col-12\">\n                                <spiderly-button (onClick)=\"codeSubmit()\" [label]=\"t('Submit')\" icon=\"pi pi-verified\" type=\"submit\"></spiderly-button>\n                            </div>\n                        </form>\n                    </panel-body>\n                    \n                    <panel-footer>\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToGmail')\" icon=\"pi pi-external-link\" href=\"https://mail.google.com/mail/u/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToYahoo')\" icon=\"pi pi-external-link\" href=\"https://mail.yahoo.com/d/folders/1/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n                    </panel-footer>\n                    <panel-footer>\n                        <div>{{t('ResendVerificationCodeFirstPart')}} <a class=\"link\" (click)=\"resendVerificationToken()\">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>\n                    </panel-footer>\n                </spiderly-panel>\n            }\n            @else {\n                <!-- TODO FT: Add skeleton -->\n            }\n        </div>\n    </div>\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$3.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }], propDecorators: { email: [{
+                type: Input
+            }], onResendVerificationToken: [{
+                type: Output
+            }], onCodeSubmit: [{
+                type: Output
+            }] } });
+
+class InitCompanyAuthDialogDetails extends BaseEntity {
+    constructor({ image, companyName, } = {}) {
+        super();
+        this.image = image;
+        this.companyName = companyName;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMessageService, deps: [{ token: i1$2.MessageService }, { token: i1.TranslocoService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMessageService, providedIn: 'root' }); }
+    static { this.typeName = 'InitCompanyAuthDialogDetails'; }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMessageService, decorators: [{
+
+class ConfigServiceBase {
+    constructor() {
+        this.production = false;
+        this.frontendUrl = 'http://localhost:4200';
+        this.companyName = 'Company Name';
+        this.primaryColor = '#111b2c';
+        /* URLs */
+        this.loginSlug = 'login';
+        /* Local storage */
+        this.accessTokenKey = 'access_token';
+        this.refreshTokenKey = 'refresh_token';
+        this.browserIdKey = 'browser_id';
+        this.httpOptions = {};
+        this.httpSkipSpinnerOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+            params: new HttpParams().set('X-Skip-Spinner', 'true')
+        };
+        this.logoPath = 'assets/images/logo/logo.svg';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigServiceBase, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigServiceBase, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigServiceBase, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.MessageService }, { type: i1.TranslocoService }, { type: i0.NgZone }] });
+        }], ctorParameters: () => [] });
 
-class BaseFormService {
-    constructor(translateLabelsService, validatorService, messageService, translocoService) {
-        this.translateLabelsService = translateLabelsService;
-        this.validatorService = validatorService;
-        this.messageService = messageService;
-        this.translocoService = translocoService;
-        this.initFormGroup = (formGroup, targetClass, initialValues, updateOnChangeControls) => {
-            if (!formGroup)
-                throw new SpiderlyError('You need to instantiate the form group.');
-            if (!targetClass)
-                throw new SpiderlyError('You need to pass targetClass.');
-            if (!initialValues)
-                initialValues = {};
-            Object.keys(targetClass.schema).forEach((formControlName) => {
-                const propSchema = targetClass.schema[formControlName];
-                let propInitialValue = initialValues[formControlName];
-                const existingControl = formGroup.get(formControlName);
-                if (propSchema.type.endsWith('[]') &&
-                    propSchema.nestedConstructor &&
-                    propSchema.type !== 'Namebook[]') {
-                    if (existingControl instanceof SpiderlyFormArray) {
-                        this.initFormArray(existingControl, propSchema.nestedConstructor, propInitialValue);
-                    }
-                    else {
-                        const control = new SpiderlyFormArray([], this.translocoService, this);
-                        this.initFormArray(control, propSchema.nestedConstructor, propInitialValue);
-                        control.label = formControlName;
-                        control.labelForDisplay = this.getTranslatedLabel(formControlName);
-                        formGroup.setControl(formControlName, control);
-                    }
-                }
-                else if (propSchema.nestedConstructor &&
-                    propSchema.type !== 'Namebook[]') {
-                    if (existingControl instanceof SpiderlyFormGroup) {
-                        this.initFormGroup(existingControl, propSchema.nestedConstructor, propInitialValue);
-                    }
-                    else {
-                        const control = new SpiderlyFormGroup({});
-                        this.initFormGroup(control, propSchema.nestedConstructor, propInitialValue);
-                        formGroup.setControl(formControlName, control);
-                    }
-                }
-                else {
-                    // HACK: Because on the backend id type is not nullable on generated DTOs, we need to do this, it's ugly hack and we should make it better.
-                    if (formControlName === 'id' && !propInitialValue) {
-                        propInitialValue = 0;
-                    }
-                    if (existingControl instanceof SpiderlyFormControl) {
-                        existingControl.setValue(propInitialValue);
-                    }
-                    else {
-                        let control;
-                        if (updateOnChangeControls?.includes(formControlName) ||
-                            (formControlName.endsWith('Id') && formControlName.length > 2) ||
-                            propSchema.type === 'Date' ||
-                            propSchema.type === 'Namebook[]') {
-                            control = new SpiderlyFormControl(propInitialValue, { updateOn: 'change' });
-                        }
-                        else {
-                            control = new SpiderlyFormControl(propInitialValue, { updateOn: 'blur' });
-                        }
-                        control.label = formControlName;
-                        control.labelForDisplay = this.getTranslatedLabel(formControlName);
-                        control.parentClassName = targetClass.typeName;
-                        this.validatorService.setValidator(control, targetClass.typeName);
-                        formGroup.setControl(formControlName, control);
-                    }
-                }
-            });
-            formGroup.targetClass = targetClass;
-            return formGroup;
+class ApiSecurityService {
+    constructor(http, config) {
+        this.http = http;
+        this.config = config;
+        //#region Authentication
+        this.login = (request) => {
+            return this.http.post(`${this.config.apiUrl}/Security/Login`, request, this.config.httpOptions);
         };
-        //#region Helpers
-        this.showInvalidFieldsMessage = () => {
-            this.messageService.warningMessage(this.translocoService.translate('YouHaveSomeInvalidFieldsDescription'), this.translocoService.translate('YouHaveSomeInvalidFieldsTitle'));
+        this.loginExternal = (externalProviderDTO) => {
+            return this.http.post(`${this.config.apiUrl}/Security/LoginExternal`, externalProviderDTO, this.config.httpOptions);
         };
-        this.getSaveBodyMainDTOKey = (saveBodyClass) => {
-            const schema = saveBodyClass.schema;
-            return Object.keys(schema).find(k => schema[k].isSaveBodyMainDTO === true);
+        this.sendLoginVerificationEmail = (loginDTO) => {
+            return this.http.post(`${this.config.apiUrl}/Security/SendLoginVerificationEmail`, loginDTO, this.config.httpOptions);
         };
-        this.mapMainUIFormToSaveBody = (mainUIFormClass, mainUIFormValues) => {
-            let saveBody = {};
-            Object.keys(mainUIFormClass.schema).forEach(propName => {
-                const property = mainUIFormClass.schema[propName];
-                const value = mainUIFormValues[propName];
-                // Handle ordered one-to-many (e.g., "orderedItemsMainUIFormDTO" -> "orderedItemsSaveBodyDTO")
-                if (propName.startsWith('ordered') && propName.endsWith('MainUIFormDTO')) {
-                    const newKey = propName.replace('MainUIFormDTO', 'SaveBodyDTO');
-                    // Recursively map nested DTOs
-                    const relatedEntity = property.nestedConstructor;
-                    saveBody[newKey] = value?.map(item => this.mapMainUIFormToSaveBody(relatedEntity, item)) ?? [];
-                }
-                // Handle multi-select (e.g., "itemsIds" -> "selectedItemsIds")
-                else if (propName.endsWith('Ids')) {
-                    saveBody[`selected${capitalizeFirstChar(propName)}`] = value ?? [];
-                }
-                // Handle multi-autocomplete (e.g., "itemsNamebookDTOList" -> "selectedItemsIds")
-                else if (propName.endsWith('NamebookDTOList')) {
-                    saveBody[`selected${capitalizeFirstChar(propName)}`] = value ?? [];
-                }
-                // Handle the main DTO object (e.g., "entityDTO")
-                else {
-                    saveBody[propName] = value;
-                }
-            });
-            return saveBody;
+        this.logout = (browserId) => {
+            return this.http.get(`${this.config.apiUrl}/Security/Logout?browserId=${browserId}`);
+        };
+        this.refreshToken = (request) => {
+            return this.http.post(`${this.config.apiUrl}/Security/RefreshToken`, request, this.config.httpOptions);
+        };
+        //#endregion
+        //#region User
+        this.getCurrentUserBase = () => {
+            return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUserBase`, this.config.httpSkipSpinnerOptions);
+        };
+        this.getCurrentUserPermissionCodes = () => {
+            return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUserPermissionCodes`, this.config.httpSkipSpinnerOptions);
+        };
+        //#endregion
+        //#region Notification
+        this.getUnreadNotificationsCountForCurrentUser = () => {
+            return this.http.get(`${this.config.apiUrl}/Notification/GetUnreadNotificationsCountForCurrentUser`, this.config.httpSkipSpinnerOptions);
         };
     }
-    getTranslatedLabel(formControlName) {
-        if (formControlName.endsWith('Id') && formControlName.length > 2) {
-            formControlName = formControlName.substring(0, formControlName.length - 2);
-        }
-        else if (formControlName.endsWith('DisplayName')) {
-            formControlName = formControlName.replace('DisplayName', '');
-        }
-        return this.translateLabelsService.translate(formControlName);
-    }
-    addNewFormGroupToFormArray(formArray, targetClass, initialValues, index) {
-        let helperFormGroup = new SpiderlyFormGroup({});
-        this.initFormGroup(helperFormGroup, targetClass, initialValues);
-        if (index == null) {
-            formArray.push(helperFormGroup);
-        }
-        else {
-            formArray.insert(index, helperFormGroup);
-        }
-        return helperFormGroup;
-    }
-    removeFormControlFromTheFormArray(formArray, index) {
-        if (index == null)
-            throw new SpiderlyError('Can not pass null index.');
-        formArray.removeAt(index);
-    }
-    initFormArray(formArray, targetClass, initialValues = []) {
-        if (!formArray)
-            throw new SpiderlyError('You must pass a FormArray instance to be initialized or updated.');
-        if (!targetClass)
-            throw new SpiderlyError('You did not initialize targetClass');
-        // formArray.required = required;
-        formArray.formGroupInitialValues = {}; // When we need we can pass formGroupInitialValues to this method instead of assigning it to empty object
-        formArray.targetClass = targetClass;
-        initialValues.forEach((model, index) => {
-            const existingControl = formArray.at(index);
-            if (existingControl instanceof SpiderlyFormGroup) {
-                this.initFormGroup(existingControl, targetClass, model);
-            }
-            else {
-                let helperFormGroup = new SpiderlyFormGroup({});
-                this.initFormGroup(helperFormGroup, targetClass, model);
-                formArray.push(helperFormGroup);
-            }
-        });
-        return formArray;
-    }
-    generateNewNegativeId(formArray) {
-        return -formArray.getRawValue().filter(x => x.id < 0).length - 1;
-    }
-    isControlValid(control, controlNamesFromHtml) {
-        let invalid = false;
-        if (control instanceof SpiderlyFormControl) {
-            if (control.invalid &&
-                (controlNamesFromHtml == null || controlNamesFromHtml?.includes(control.label))) {
-                control.markAsDirty();
-                invalid = true;
-            }
-        }
-        else if (control instanceof SpiderlyFormGroup) {
-            Object.keys(control.controls).forEach(key => {
-                const nestedControl = control.controls[key];
-                if (!this.isControlValid(nestedControl, control.controlNamesFromHtml)) {
-                    invalid = true;
-                }
-            });
-        }
-        else if (control instanceof SpiderlyFormArray) {
-            control.controls.forEach((nestedControl) => {
-                if (!this.isControlValid(nestedControl)) {
-                    invalid = true;
-                }
-            });
-        }
-        if (invalid) {
-            return false;
-        }
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormService, deps: [{ token: TranslateLabelsAbstractService }, { token: ValidatorAbstractService }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, deps: [{ token: i1$3.HttpClient }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: TranslateLabelsAbstractService }, { type: ValidatorAbstractService }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }] });
-
-class InitCompanyAuthDialogDetails extends BaseEntity {
-    constructor({ image, companyName, } = {}) {
-        super();
-        this.image = image;
-        this.companyName = companyName;
-    }
-    static { this.typeName = 'InitCompanyAuthDialogDetails'; }
-}
+        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: ConfigServiceBase }] });
 
-class AuthBaseService {
+class AuthServiceBase {
     constructor(router, http, externalAuthService, apiService, config, platformId) {
         this.router = router;
         this.http = http;
@@ -2423,284 +2357,19 @@ class AuthBaseService {
         }
         this.onAfterNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthBaseService, deps: [{ token: i3$2.Router }, { token: i1$4.HttpClient }, { token: i3$4.SocialAuthService }, { token: ApiSecurityService }, { token: ConfigBaseService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthBaseService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthServiceBase, deps: [{ token: i3$2.Router }, { token: i1$3.HttpClient }, { token: i3$4.SocialAuthService }, { token: ApiSecurityService }, { token: ConfigServiceBase }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthServiceBase, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthBaseService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthServiceBase, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i3$2.Router }, { type: i1$4.HttpClient }, { type: i3$4.SocialAuthService }, { type: ApiSecurityService }, { type: ConfigBaseService }, { type: Object, decorators: [{
+        }], ctorParameters: () => [{ type: i3$2.Router }, { type: i1$3.HttpClient }, { type: i3$4.SocialAuthService }, { type: ApiSecurityService }, { type: ConfigServiceBase }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }] });
 
-class RoleBaseDetailsComponent {
-    constructor(apiService, route, baseFormService, authService) {
-        this.apiService = apiService;
-        this.route = route;
-        this.baseFormService = baseFormService;
-        this.authService = authService;
-        this.onSave = new EventEmitter();
-        this.onAfterFormGroupInit = new EventEmitter();
-        this.additionalButtons = [];
-        this.showBigPanelTitle = true;
-        this.handleAdditionalSaveAuthorization = () => Promise.resolve(true);
-        this.isAuthorizedForSave = false;
-        this.onIsAuthorizedForSaveChange = new EventEmitter();
-        this.loading = true;
-        this.handleAuthorizationForSave = async () => {
-            const currentUserPermissionCodes = await firstValueFrom(this.authService.currentUserPermissionCodes$);
-            const isAdditionallyAuthorizedForSave = await this.handleAdditionalSaveAuthorization();
-            this.isAuthorizedForSave =
-                (currentUserPermissionCodes.includes('InsertRole') && this.modelId <= 0) ||
-                    (currentUserPermissionCodes.includes('UpdateRole') && this.modelId > 0) ||
-                    isAdditionallyAuthorizedForSave;
-            if (this.isAuthorizedForSave) {
-                this.parentFormGroup.enable();
-            }
-            else {
-                this.parentFormGroup.disable();
-            }
-            this.onIsAuthorizedForSaveChange.next(new IsAuthorizedForSaveEvent({
-                isAuthorizedForSave: this.isAuthorizedForSave,
-            }));
-        };
-    }
-    ngOnInit() {
-        this.parentFormGroup.initSaveBody = () => {
-            let saveBody = new RoleSaveBody();
-            saveBody = this.baseFormService.mapMainUIFormToSaveBody(RoleMainUIForm, this.parentFormGroup.getRawValue());
-            return saveBody;
-        };
-        this.parentFormGroup.saveObservableMethod = this.apiService.saveRole;
-        this.route.params.subscribe(async (params) => {
-            this.modelId = params['id'];
-            this.apiService.getPermissionsDropdownListForRole().subscribe(po => {
-                this.permissionsForRoleOptions = po;
-            });
-            if (this.modelId > 0) {
-                forkJoin({
-                    mainUIFormDTO: this.apiService.getRoleMainUIFormDTO(this.modelId)
-                })
-                    .subscribe(async ({ mainUIFormDTO }) => {
-                    this.baseFormService.initFormGroup(this.parentFormGroup, RoleMainUIForm, mainUIFormDTO);
-                    await this.handleAuthorizationForSave();
-                    this.loading = false;
-                    this.onAfterFormGroupInit.next();
-                });
-            }
-            else {
-                this.baseFormService.initFormGroup(this.parentFormGroup, RoleMainUIForm);
-                await this.handleAuthorizationForSave();
-                this.loading = false;
-                this.onAfterFormGroupInit.next();
-            }
-        });
-    }
-    searchUsersForRole(event) {
-        this.apiService.getUsersAutocompleteListForRole(50, event?.query ?? '').subscribe(no => {
-            this.usersForRoleOptions = no;
-        });
-    }
-    save() {
-        this.onSave.next();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RoleBaseDetailsComponent, deps: [{ token: ApiSecurityService }, { token: i3$2.ActivatedRoute }, { token: BaseFormService }, { token: AuthBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: RoleBaseDetailsComponent, isStandalone: true, selector: "role-base-details", inputs: { getCrudMenuForOrderedData: "getCrudMenuForOrderedData", parentFormGroup: "parentFormGroup", additionalButtons: "additionalButtons", panelTitle: "panelTitle", showBigPanelTitle: "showBigPanelTitle", panelIcon: "panelIcon", handleAdditionalSaveAuthorization: "handleAdditionalSaveAuthorization" }, outputs: { onSave: "onSave", onAfterFormGroupInit: "onAfterFormGroupInit", onIsAuthorizedForSaveChange: "onIsAuthorizedForSaveChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <spiderly-panel>\n        <panel-header [title]=\"panelTitle\" [showBigTitle]=\"showBigPanelTitle\" [icon]=\"panelIcon\"></panel-header>\n\n        <panel-body>\n            <form *ngIf=\"loading === false\" class=\"grid\"> <!-- FT: Don't put @deffer it's not working as expected -->\n                <div class=\"col-12\">\n                    <spiderly-textbox [control]=\"parentFormGroup.controls.roleDTO.getControl('name')\"></spiderly-textbox>\n                </div>\n                <div class=\"col-12\">\n                    <spiderly-textarea [control]=\"parentFormGroup.controls.roleDTO.getControl('description')\"></spiderly-textarea>\n                </div>\n                <div class=\"col-12\">\n                    <spiderly-multiautocomplete [control]=\"parentFormGroup.controls.usersNamebookDTOList\" [options]=\"usersForRoleOptions\" (onTextInput)=\"searchUsersForRole($event)\" [label]=\"t('Users')\"></spiderly-multiautocomplete>\n                </div>\n                <div class=\"col-12\">\n                    <spiderly-multiselect [control]=\"parentFormGroup.controls.permissionsIds\" [options]=\"permissionsForRoleOptions\" [label]=\"t('Permissions')\"></spiderly-multiselect>\n                </div>\n            </form>\n\n            <card-skeleton *ngIf=\"loading === true\" [height]=\"502\"></card-skeleton>\n\n        </panel-body>\n\n        <panel-footer>\n            <spiderly-button [disabled]=\"!isAuthorizedForSave\" (onClick)=\"save()\" [label]=\"t('Save')\" icon=\"pi pi-save\"></spiderly-button>\n            @for (button of additionalButtons; track button.label) {\n                <spiderly-button (onClick)=\"button.onClick()\" [disabled]=\"button.disabled\" [label]=\"button.label\" [icon]=\"button.icon\"></spiderly-button>\n            }\n            <return-button></return-button>\n        </panel-footer>\n    </spiderly-panel>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CardSkeletonComponent, selector: "card-skeleton", inputs: ["height"] }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyTextareaComponent, selector: "spiderly-textarea" }, { kind: "component", type: SpiderlyMultiAutocompleteComponent, selector: "spiderly-multiautocomplete" }, { kind: "component", type: SpiderlyMultiSelectComponent, selector: "spiderly-multiselect" }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: PanelFooterComponent, selector: "panel-footer" }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "toggler", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyReturnButtonComponent, selector: "return-button", inputs: ["navigateUrl"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RoleBaseDetailsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'role-base-details', imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        TranslocoDirective,
-                        CardSkeletonComponent,
-                        SpiderlyTextboxComponent,
-                        SpiderlyTextareaComponent,
-                        SpiderlyMultiAutocompleteComponent,
-                        SpiderlyMultiSelectComponent,
-                        SpiderlyPanelsModule,
-                        SpiderlyButtonComponent,
-                        SpiderlyReturnButtonComponent
-                    ], template: "<ng-container *transloco=\"let t\">\n    <spiderly-panel>\n        <panel-header [title]=\"panelTitle\" [showBigTitle]=\"showBigPanelTitle\" [icon]=\"panelIcon\"></panel-header>\n\n        <panel-body>\n            <form *ngIf=\"loading === false\" class=\"grid\"> <!-- FT: Don't put @deffer it's not working as expected -->\n                <div class=\"col-12\">\n                    <spiderly-textbox [control]=\"parentFormGroup.controls.roleDTO.getControl('name')\"></spiderly-textbox>\n                </div>\n                <div class=\"col-12\">\n                    <spiderly-textarea [control]=\"parentFormGroup.controls.roleDTO.getControl('description')\"></spiderly-textarea>\n                </div>\n                <div class=\"col-12\">\n                    <spiderly-multiautocomplete [control]=\"parentFormGroup.controls.usersNamebookDTOList\" [options]=\"usersForRoleOptions\" (onTextInput)=\"searchUsersForRole($event)\" [label]=\"t('Users')\"></spiderly-multiautocomplete>\n                </div>\n                <div class=\"col-12\">\n                    <spiderly-multiselect [control]=\"parentFormGroup.controls.permissionsIds\" [options]=\"permissionsForRoleOptions\" [label]=\"t('Permissions')\"></spiderly-multiselect>\n                </div>\n            </form>\n\n            <card-skeleton *ngIf=\"loading === true\" [height]=\"502\"></card-skeleton>\n\n        </panel-body>\n\n        <panel-footer>\n            <spiderly-button [disabled]=\"!isAuthorizedForSave\" (onClick)=\"save()\" [label]=\"t('Save')\" icon=\"pi pi-save\"></spiderly-button>\n            @for (button of additionalButtons; track button.label) {\n                <spiderly-button (onClick)=\"button.onClick()\" [disabled]=\"button.disabled\" [label]=\"button.label\" [icon]=\"button.icon\"></spiderly-button>\n            }\n            <return-button></return-button>\n        </panel-footer>\n    </spiderly-panel>\n</ng-container>" }]
-        }], ctorParameters: () => [{ type: ApiSecurityService }, { type: i3$2.ActivatedRoute }, { type: BaseFormService }, { type: AuthBaseService }], propDecorators: { onSave: [{
-                type: Output
-            }], onAfterFormGroupInit: [{
-                type: Output
-            }], getCrudMenuForOrderedData: [{
-                type: Input
-            }], parentFormGroup: [{
-                type: Input
-            }], additionalButtons: [{
-                type: Input
-            }], panelTitle: [{
-                type: Input
-            }], showBigPanelTitle: [{
-                type: Input
-            }], panelIcon: [{
-                type: Input
-            }], handleAdditionalSaveAuthorization: [{
-                type: Input
-            }], onIsAuthorizedForSaveChange: [{
-                type: Output
-            }] } });
-
-class BaseFormCopy {
-    constructor(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService) {
-        this.differs = differs;
-        this.http = http;
-        this.messageService = messageService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.router = router;
-        this.route = route;
-        this.translocoService = translocoService;
-        this.baseFormService = baseFormService;
-        this.parentFormGroup = new SpiderlyFormGroup({});
-        this.successfulSaveToastDescription = this.translocoService.translate('SuccessfulSaveToastDescription');
-        //#region Model
-        // onSave method is here only because of the hooks, we should move everything except them to the BaseFromService
-        this.onSave = (reroute = true) => {
-            if (!this.saveBodyClass)
-                throw new SpiderlyError('You did not initialize saveBodyClass');
-            if (!this.mainUIFormClass)
-                throw new SpiderlyError('You did not initialize mainUIFormClass');
-            this.saveBody = this.parentFormGroup.initSaveBody();
-            this.onBeforeSave(this.saveBody);
-            this.saveBody = this.saveBody ?? this.parentFormGroup.getRawValue();
-            const isValid = this.baseFormService.isControlValid(this.parentFormGroup);
-            if (isValid) {
-                this.parentFormGroup.saveObservableMethod(this.saveBody).subscribe(res => {
-                    this.messageService.successMessage(this.successfulSaveToastDescription);
-                    this.baseFormService.initFormGroup(this.parentFormGroup, this.mainUIFormClass, res);
-                    if (reroute) {
-                        const saveBodyMainDTOKey = this.baseFormService.getSaveBodyMainDTOKey(this.saveBodyClass);
-                        const savedObjectId = res[saveBodyMainDTOKey]?.id;
-                        this.rerouteToSavedObject(savedObjectId); // You always need to have id, because of id == 0 and version change
-                    }
-                    this.onAfterSave();
-                });
-                this.onAfterSaveRequest();
-            }
-            else {
-                this.baseFormService.showInvalidFieldsMessage();
-            }
-        };
-        this.rerouteToSavedObject = (rerouteId) => {
-            if (rerouteId == null) {
-                const currentUrl = this.router.url;
-                const parentUrl = getParentUrl(currentUrl);
-                this.router.navigateByUrl(parentUrl);
-                return;
-            }
-            const segments = this.router.url.split('/');
-            segments[segments.length - 1] = rerouteId.toString();
-            const newUrl = segments.join('/');
-            this.router.navigateByUrl(newUrl);
-        };
-        this.onBeforeSave = (saveBody) => { };
-        this.onAfterSave = () => { };
-        this.onAfterSaveRequest = () => { };
-    }
-    ngOnInit() {
-    }
-    //#endregion
-    //#region Model List
-    getFormArrayControlByIndex(formControlName, formArray, index, filter) {
-        // if(formArray.controlNamesFromHtml.findIndex(x => x === formControlName) === -1)
-        //   formArray.controlNamesFromHtml.push(formControlName);
-        let filteredFormGroups;
-        if (filter) {
-            filteredFormGroups = filter(formArray.controls);
-        }
-        else {
-            return formArray.controls[index].controls[formControlName];
-        }
-        return filteredFormGroups[index]?.controls[formControlName]; // FT: Don't change this. It's always possible that change detection occurs before something.
-    }
-    getFormArrayControls(formControlName, formArray, filter) {
-        // if(formArray.controlNamesFromHtml.findIndex(x => x === formControlName) === -1)
-        //   formArray.controlNamesFromHtml.push(formControlName);
-        let filteredFormGroups;
-        if (filter) {
-            filteredFormGroups = filter(formArray.controls);
-        }
-        else {
-            return formArray.controls.map(x => x.controls[formControlName]);
-        }
-        return filteredFormGroups.map(x => x.controls[formControlName]);
-    }
-    removeFormControlsFromTheFormArray(formArray, indexes) {
-        // Sort indexes in descending order to avoid index shifts when removing controls
-        const sortedIndexes = indexes.sort((a, b) => b - a);
-        sortedIndexes.forEach(index => {
-            if (index >= 0 && index < formArray.length) {
-                formArray.removeAt(index);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormCopy, deps: [{ token: i0.KeyValueDiffers }, { token: i1$4.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: BaseFormCopy, isStandalone: false, selector: "base-form", ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormCopy, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-form', template: '', standalone: false }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$4.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }] });
-
-class VerificationWrapperComponent extends BaseFormCopy {
-    constructor(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService) {
-        super(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService);
-        this.differs = differs;
-        this.http = http;
-        this.messageService = messageService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.router = router;
-        this.route = route;
-        this.translocoService = translocoService;
-        this.baseFormService = baseFormService;
-        this.verificationTokenRequestFormGroup = new SpiderlyFormGroup({});
-        this.onResendVerificationToken = new EventEmitter();
-        this.onCodeSubmit = new EventEmitter();
-    }
-    ngOnInit() {
-        this.initVerificationTokenRequestFormGroup(new VerificationTokenRequest({ email: this.email }));
-    }
-    initVerificationTokenRequestFormGroup(model) {
-        this.baseFormService.initFormGroup(this.verificationTokenRequestFormGroup, VerificationTokenRequest, model, ['verificationCode']);
-    }
-    codeSubmit() {
-        let isValid = this.baseFormService.isControlValid(this.verificationTokenRequestFormGroup);
-        if (isValid) {
-            this.onCodeSubmit.next(this.verificationTokenRequestFormGroup.controls.verificationCode.getRawValue());
-        }
-    }
-    resendVerificationToken() {
-        this.onResendVerificationToken.next(null);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: VerificationWrapperComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$4.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: VerificationWrapperComponent, isStandalone: true, selector: "verification-wrapper", inputs: { email: "email" }, outputs: { onResendVerificationToken: "onResendVerificationToken", onCodeSubmit: "onCodeSubmit" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"min-h-screen\" style=\"display: flex; justify-content: center; align-items: center;\">\n        <div class=\"dialog\" style=\"padding: 0px;\">\n            @if (verificationTokenRequestFormGroup != null) {\n                <spiderly-panel>\n                    <panel-header [title]=\"t('AccountVerificationHeader')\" [showBigTitle]=\"true\" icon=\"pi pi-envelope\"></panel-header>\n                    \n                    <panel-body>\n                        <form class=\"grid\">\n                            <div class=\"col-12\">\n                                <div style=\"font-size: 17.5px\">{{t('AccountVerificationTitle')}}</div>\n                            </div>\n                            <div class=\"col-12\">\n                                {{t('AccountVerificationDescription', {email: email})}}\n                            </div>\n                            <div class=\"col-12\">\n                                <spiderly-textbox [control]=\"verificationTokenRequestFormGroup.getControl('verificationCode')\"></spiderly-textbox>\n                            </div>\n                            <div class=\"col-12\">\n                                <spiderly-button (onClick)=\"codeSubmit()\" [label]=\"t('Submit')\" icon=\"pi pi-verified\" type=\"submit\"></spiderly-button>\n                            </div>\n                        </form>\n                    </panel-body>\n                    \n                    <panel-footer>\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToGmail')\" icon=\"pi pi-external-link\" href=\"https://mail.google.com/mail/u/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToYahoo')\" icon=\"pi pi-external-link\" href=\"https://mail.yahoo.com/d/folders/1/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n                    </panel-footer>\n                    <panel-footer>\n                        <div>{{t('ResendVerificationCodeFirstPart')}} <a class=\"link\" (click)=\"resendVerificationToken()\">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>\n                    </panel-footer>\n                </spiderly-panel>\n            }\n            @else {\n                <!-- TODO FT: Add skeleton -->\n            }\n        </div>\n    </div>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: PanelFooterComponent, selector: "panel-footer" }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "toggler", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: VerificationWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'verification-wrapper', imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        SpiderlyControlsModule,
-                        SpiderlyPanelsModule,
-                        ButtonModule,
-                        TranslocoDirective,
-                    ], template: "<ng-container *transloco=\"let t\">\n    <div class=\"min-h-screen\" style=\"display: flex; justify-content: center; align-items: center;\">\n        <div class=\"dialog\" style=\"padding: 0px;\">\n            @if (verificationTokenRequestFormGroup != null) {\n                <spiderly-panel>\n                    <panel-header [title]=\"t('AccountVerificationHeader')\" [showBigTitle]=\"true\" icon=\"pi pi-envelope\"></panel-header>\n                    \n                    <panel-body>\n                        <form class=\"grid\">\n                            <div class=\"col-12\">\n                                <div style=\"font-size: 17.5px\">{{t('AccountVerificationTitle')}}</div>\n                            </div>\n                            <div class=\"col-12\">\n                                {{t('AccountVerificationDescription', {email: email})}}\n                            </div>\n                            <div class=\"col-12\">\n                                <spiderly-textbox [control]=\"verificationTokenRequestFormGroup.getControl('verificationCode')\"></spiderly-textbox>\n                            </div>\n                            <div class=\"col-12\">\n                                <spiderly-button (onClick)=\"codeSubmit()\" [label]=\"t('Submit')\" icon=\"pi pi-verified\" type=\"submit\"></spiderly-button>\n                            </div>\n                        </form>\n                    </panel-body>\n                    \n                    <panel-footer>\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToGmail')\" icon=\"pi pi-external-link\" href=\"https://mail.google.com/mail/u/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToYahoo')\" icon=\"pi pi-external-link\" href=\"https://mail.yahoo.com/d/folders/1/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n                    </panel-footer>\n                    <panel-footer>\n                        <div>{{t('ResendVerificationCodeFirstPart')}} <a class=\"link\" (click)=\"resendVerificationToken()\">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>\n                    </panel-footer>\n                </spiderly-panel>\n            }\n            @else {\n                <!-- TODO FT: Add skeleton -->\n            }\n        </div>\n    </div>\n</ng-container>" }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$4.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }], propDecorators: { email: [{
-                type: Input
-            }], onResendVerificationToken: [{
-                type: Output
-            }], onCodeSubmit: [{
-                type: Output
-            }] } });
-
 class LoginVerificationComponent {
     constructor(authService, messageService, translocoService) {
         this.authService = authService;
@@ -2720,7 +2389,7 @@ class LoginVerificationComponent {
             this.authService.navigateToDashboard();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginVerificationComponent, deps: [{ token: AuthBaseService }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginVerificationComponent, deps: [{ token: AuthServiceBase }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: LoginVerificationComponent, isStandalone: true, selector: "login-verification", inputs: { email: "email", userId: "userId" }, ngImport: i0, template: "<verification-wrapper [email]=\"email\" (onResendVerificationToken)=\"resendVerificationToken()\" (onCodeSubmit)=\"onCodeSubmit($event)\"></verification-wrapper>\n\n", dependencies: [{ kind: "component", type: VerificationWrapperComponent, selector: "verification-wrapper", inputs: ["email"], outputs: ["onResendVerificationToken", "onCodeSubmit"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginVerificationComponent, decorators: [{
@@ -2728,7 +2397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             args: [{ selector: 'login-verification', imports: [
                         VerificationWrapperComponent
                     ], template: "<verification-wrapper [email]=\"email\" (onResendVerificationToken)=\"resendVerificationToken()\" (onCodeSubmit)=\"onCodeSubmit($event)\"></verification-wrapper>\n\n" }]
-        }], ctorParameters: () => [{ type: AuthBaseService }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }], propDecorators: { email: [{
+        }], ctorParameters: () => [{ type: AuthServiceBase }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }], propDecorators: { email: [{
                 type: Input
             }], userId: [{
                 type: Input
@@ -2762,8 +2431,7 @@ class AuthComponent {
         this.authService = authService;
         this.initCompanyAuthDialogDetailsSubscription = null;
         this.onCompanyNameChange = new EventEmitter();
-        this.showGoogleAuth = true;
-        this.hasGoogleAuth = this.config.googleAuth;
+        this.showGoogleAuth = false;
     }
     ngOnInit() {
         this.initCompanyDetails();
@@ -2785,8 +2453,8 @@ class AuthComponent {
             this.initCompanyAuthDialogDetailsSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthComponent, deps: [{ token: ConfigBaseService }, { token: AuthBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AuthComponent, isStandalone: true, selector: "auth", inputs: { showGoogleAuth: "showGoogleAuth" }, outputs: { onCompanyNameChange: "onCompanyNameChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\n        <div class=\"flex flex-column w-full\">\n            <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\n                <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\n                    <div class=\"text-center\" style=\"margin-bottom: 38px;\">\n                        <img *ngIf=\"image != null\" [src]=\"image\" alt=\"{{companyName}} Logo\" title=\"{{companyName}} Logo\" height=\"60\">\n                        <i *ngIf=\"image == null\" class=\"pi pi-spin pi-spinner primary-color\" style=\"font-size: 2rem\"></i>\n                    </div>\n\n                    <ng-content></ng-content>\n    \n                    <div *ngIf=\"hasGoogleAuth && showGoogleAuth\">\n                        <div style=\"display: flex; align-items: center; gap: 7px; justify-content: center; margin-bottom: 16px;\">\n                            <div class=\"separator\"></div>\n                            <div>{{t('or')}}</div>\n                            <div class=\"separator\"></div>\n                        </div>\n                        <div>\n                            <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n                            <google-button (loginWithGoogle)=\"onGoogleSignIn($event)\" [label]=\"t('ContinueWithGoogle')\"></google-button> \n                        </div>\n                    </div>\n    \n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GoogleButtonComponent, selector: "google-button", inputs: ["label"], outputs: ["loginWithGoogle"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthComponent, deps: [{ token: ConfigServiceBase }, { token: AuthServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AuthComponent, isStandalone: true, selector: "auth", inputs: { showGoogleAuth: "showGoogleAuth" }, outputs: { onCompanyNameChange: "onCompanyNameChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\n        <div class=\"flex flex-column w-full\">\n            <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\n                <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\n                    <div class=\"text-center\" style=\"margin-bottom: 38px;\">\n                        <img *ngIf=\"image != null\" [src]=\"image\" alt=\"{{companyName}} Logo\" title=\"{{companyName}} Logo\" height=\"60\">\n                        <i *ngIf=\"image == null\" class=\"pi pi-spin pi-spinner primary-color\" style=\"font-size: 2rem\"></i>\n                    </div>\n\n                    <ng-content></ng-content>\n    \n                    <div *ngIf=\"showGoogleAuth\">\n                        <div style=\"display: flex; align-items: center; gap: 7px; justify-content: center; margin-bottom: 16px;\">\n                            <div class=\"separator\"></div>\n                            <div>{{t('or')}}</div>\n                            <div class=\"separator\"></div>\n                        </div>\n                        <div>\n                            <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n                            <google-button (loginWithGoogle)=\"onGoogleSignIn($event)\" [label]=\"t('ContinueWithGoogle')\"></google-button> \n                        </div>\n                    </div>\n    \n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GoogleButtonComponent, selector: "google-button", inputs: ["label"], outputs: ["loginWithGoogle"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthComponent, decorators: [{
             type: Component,
@@ -2794,8 +2462,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         GoogleButtonComponent,
                         TranslocoDirective,
-                    ], template: "<ng-container *transloco=\"let t\">\n    <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\n        <div class=\"flex flex-column w-full\">\n            <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\n                <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\n                    <div class=\"text-center\" style=\"margin-bottom: 38px;\">\n                        <img *ngIf=\"image != null\" [src]=\"image\" alt=\"{{companyName}} Logo\" title=\"{{companyName}} Logo\" height=\"60\">\n                        <i *ngIf=\"image == null\" class=\"pi pi-spin pi-spinner primary-color\" style=\"font-size: 2rem\"></i>\n                    </div>\n\n                    <ng-content></ng-content>\n    \n                    <div *ngIf=\"hasGoogleAuth && showGoogleAuth\">\n                        <div style=\"display: flex; align-items: center; gap: 7px; justify-content: center; margin-bottom: 16px;\">\n                            <div class=\"separator\"></div>\n                            <div>{{t('or')}}</div>\n                            <div class=\"separator\"></div>\n                        </div>\n                        <div>\n                            <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n                            <google-button (loginWithGoogle)=\"onGoogleSignIn($event)\" [label]=\"t('ContinueWithGoogle')\"></google-button> \n                        </div>\n                    </div>\n    \n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>" }]
-        }], ctorParameters: () => [{ type: ConfigBaseService }, { type: AuthBaseService }], propDecorators: { onCompanyNameChange: [{
+                    ], template: "<ng-container *transloco=\"let t\">\n    <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\n        <div class=\"flex flex-column w-full\">\n            <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\n                <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\n                    <div class=\"text-center\" style=\"margin-bottom: 38px;\">\n                        <img *ngIf=\"image != null\" [src]=\"image\" alt=\"{{companyName}} Logo\" title=\"{{companyName}} Logo\" height=\"60\">\n                        <i *ngIf=\"image == null\" class=\"pi pi-spin pi-spinner primary-color\" style=\"font-size: 2rem\"></i>\n                    </div>\n\n                    <ng-content></ng-content>\n    \n                    <div *ngIf=\"showGoogleAuth\">\n                        <div style=\"display: flex; align-items: center; gap: 7px; justify-content: center; margin-bottom: 16px;\">\n                            <div class=\"separator\"></div>\n                            <div>{{t('or')}}</div>\n                            <div class=\"separator\"></div>\n                        </div>\n                        <div>\n                            <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n                            <google-button (loginWithGoogle)=\"onGoogleSignIn($event)\" [label]=\"t('ContinueWithGoogle')\"></google-button> \n                        </div>\n                    </div>\n    \n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: ConfigServiceBase }, { type: AuthServiceBase }], propDecorators: { onCompanyNameChange: [{
                 type: Output
             }], showGoogleAuth: [{
                 type: Input
@@ -2828,14 +2496,19 @@ class LoginComponent extends BaseFormCopy {
     }
     sendLoginVerificationEmail() {
         let isFormGroupValid = this.baseFormService.isControlValid(this.loginFormGroup);
-        if (isFormGroupValid == false)
+        if (isFormGroupValid == false) {
+            this.baseFormService.showInvalidFieldsMessage();
             return;
-        this.authService.sendLoginVerificationEmail(this.loginFormGroup.getRawValue()).subscribe(() => {
+        }
+        this.authService.sendLoginVerificationEmail(this.loginFormGroup.getRawValue()).subscribe((result) => {
+            if (result.message) {
+                this.messageService.successMessage(result.message);
+            }
             this.showEmailSentDialog = true;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$4.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }, { token: AuthBaseService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: LoginComponent, isStandalone: true, selector: "app-login", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (loginFormGroup != null) {\n        @if (showEmailSentDialog == false) {\n            <auth (onCompanyNameChange)=\"companyNameChange($event)\">\n                <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px;\"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->\n                    <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0;\">\n                        <spiderly-textbox [control]=\"loginFormGroup.getControl('email')\"></spiderly-textbox>\n                    </div>\n                    \n                    <div class=\"mb-4 gap-5\">\n                        <div class=\"text-center\" style=\"font-size: smaller;\">\n                            {{t('AgreementsOnRegister')}} <b routerLink=\"/user-agreement\" class=\"primary-color cursor-pointer\">{{t('UserAgreement')}}</b> {{t('and')}} <b routerLink=\"/privacy-policy\" class=\"primary-color cursor-pointer\">{{t('PrivacyPolicy')}}</b>.\n                        </div>\n                    </div>\n\n                    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n                        <spiderly-button [label]=\"t('Login')\" (onClick)=\"sendLoginVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\" type=\"submit\"></spiderly-button>\n                    </div>\n                </form>\n            </auth>\n        }\n        @else {\n            <login-verification [email]=\"loginFormGroup.controls.email.getRawValue()\"></login-verification>\n        }\n    }\n    @else {\n        <!-- TODO FT: Add skeleton -->\n    }\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthComponent, selector: "auth", inputs: ["showGoogleAuth"], outputs: ["onCompanyNameChange"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: LoginVerificationComponent, selector: "login-verification", inputs: ["email", "userId"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$3.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }, { token: AuthServiceBase }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: LoginComponent, isStandalone: true, selector: "app-login", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (loginFormGroup != null) {\n        @if (showEmailSentDialog == false) {\n            <auth (onCompanyNameChange)=\"companyNameChange($event)\">\n                <!-- We are not loading anything from the server here so we don't need defer block -->\n                <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px;\">\n                    <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0;\">\n                        <spiderly-textbox [control]=\"loginFormGroup.getControl('email')\"></spiderly-textbox>\n                    </div>\n                    \n                    <div class=\"mb-4 gap-5\">\n                        <div class=\"text-center\" style=\"font-size: smaller;\">\n                            {{t('AgreementsOnRegister')}} <b routerLink=\"/user-agreement\" class=\"primary-color cursor-pointer\">{{t('UserAgreement')}}</b> {{t('and')}} <b routerLink=\"/privacy-policy\" class=\"primary-color cursor-pointer\">{{t('PrivacyPolicy')}}</b>.\n                        </div>\n                    </div>\n\n                    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n                        <spiderly-button [label]=\"t('Login')\" (onClick)=\"sendLoginVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\" type=\"submit\"></spiderly-button>\n                    </div>\n                </form>\n            </auth>\n        }\n        @else {\n            <login-verification [email]=\"loginFormGroup.controls.email.getRawValue()\"></login-verification>\n        }\n    }\n    @else {\n        <!-- TODO: Add skeleton -->\n    }\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthComponent, selector: "auth", inputs: ["showGoogleAuth"], outputs: ["onCompanyNameChange"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: LoginVerificationComponent, selector: "login-verification", inputs: ["email", "userId"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -2846,21 +2519,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         SpiderlyControlsModule,
                         LoginVerificationComponent,
                         TranslocoDirective,
-                    ], template: "<ng-container *transloco=\"let t\">\n    @if (loginFormGroup != null) {\n        @if (showEmailSentDialog == false) {\n            <auth (onCompanyNameChange)=\"companyNameChange($event)\">\n                <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px;\"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->\n                    <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0;\">\n                        <spiderly-textbox [control]=\"loginFormGroup.getControl('email')\"></spiderly-textbox>\n                    </div>\n                    \n                    <div class=\"mb-4 gap-5\">\n                        <div class=\"text-center\" style=\"font-size: smaller;\">\n                            {{t('AgreementsOnRegister')}} <b routerLink=\"/user-agreement\" class=\"primary-color cursor-pointer\">{{t('UserAgreement')}}</b> {{t('and')}} <b routerLink=\"/privacy-policy\" class=\"primary-color cursor-pointer\">{{t('PrivacyPolicy')}}</b>.\n                        </div>\n                    </div>\n\n                    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n                        <spiderly-button [label]=\"t('Login')\" (onClick)=\"sendLoginVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\" type=\"submit\"></spiderly-button>\n                    </div>\n                </form>\n            </auth>\n        }\n        @else {\n            <login-verification [email]=\"loginFormGroup.controls.email.getRawValue()\"></login-verification>\n        }\n    }\n    @else {\n        <!-- TODO FT: Add skeleton -->\n    }\n</ng-container>" }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$4.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }, { type: AuthBaseService }, { type: ConfigBaseService }] });
+                    ], template: "<ng-container *transloco=\"let t\">\n    @if (loginFormGroup != null) {\n        @if (showEmailSentDialog == false) {\n            <auth (onCompanyNameChange)=\"companyNameChange($event)\">\n                <!-- We are not loading anything from the server here so we don't need defer block -->\n                <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px;\">\n                    <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0;\">\n                        <spiderly-textbox [control]=\"loginFormGroup.getControl('email')\"></spiderly-textbox>\n                    </div>\n                    \n                    <div class=\"mb-4 gap-5\">\n                        <div class=\"text-center\" style=\"font-size: smaller;\">\n                            {{t('AgreementsOnRegister')}} <b routerLink=\"/user-agreement\" class=\"primary-color cursor-pointer\">{{t('UserAgreement')}}</b> {{t('and')}} <b routerLink=\"/privacy-policy\" class=\"primary-color cursor-pointer\">{{t('PrivacyPolicy')}}</b>.\n                        </div>\n                    </div>\n\n                    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n                        <spiderly-button [label]=\"t('Login')\" (onClick)=\"sendLoginVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\" type=\"submit\"></spiderly-button>\n                    </div>\n                </form>\n            </auth>\n        }\n        @else {\n            <login-verification [email]=\"loginFormGroup.controls.email.getRawValue()\"></login-verification>\n        }\n    }\n    @else {\n        <!-- TODO: Add skeleton -->\n    }\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$3.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }, { type: AuthServiceBase }, { type: ConfigServiceBase }] });
 
 class FooterComponent {
     constructor(config) {
         this.config = config;
         this.companyName = this.config.companyName;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: FooterComponent, isStandalone: true, selector: "footer", ngImport: i0, template: "<div class=\"layout-footer\">\n    <span class=\"font-medium ml-2\">{{companyName}}</span>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'footer', standalone: true, template: "<div class=\"layout-footer\">\n    <span class=\"font-medium ml-2\">{{companyName}}</span>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: ConfigBaseService }] });
+        }], ctorParameters: () => [{ type: ConfigServiceBase }] });
 
 class IndexCardComponent {
     constructor(formBuilder) {
@@ -2942,7 +2615,7 @@ class NotFoundComponent {
         this.companyName = this.config.companyName;
         this.logoPath = this.config.logoPath;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotFoundComponent, deps: [{ token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotFoundComponent, deps: [{ token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NotFoundComponent, isStandalone: true, selector: "not-found", ngImport: i0, template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\n    <div class=\"flex flex-column w-full\">\n        <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\n            <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\n                <div class=\"text-center\">\n                    <img \n                    [src]=\"logoPath\" \n                    alt=\"{{companyName}} Logo\" \n                    title=\"{{companyName}} Logo\" \n                    height=\"60\"\n                    class=\"mb-4\"\n                    >\n                </div>\n                <h1 class=\"mb-4\">\n                    <div class=\"font-bold text-5xl lg:text-6xl spiderly-gradient-title\">404</div>\n                    <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\n                </h1>\n                <div class=\"text-600 text-lg mb-5\">\n                    The page you're looking for doesn't exist or has been moved. Let's get you back on track.\n                </div>\n                <div>\n                    <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotFoundComponent, decorators: [{
@@ -2951,7 +2624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         RouterModule,
                         ButtonModule,
                     ], template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\n    <div class=\"flex flex-column w-full\">\n        <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\n            <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\n                <div class=\"text-center\">\n                    <img \n                    [src]=\"logoPath\" \n                    alt=\"{{companyName}} Logo\" \n                    title=\"{{companyName}} Logo\" \n                    height=\"60\"\n                    class=\"mb-4\"\n                    >\n                </div>\n                <h1 class=\"mb-4\">\n                    <div class=\"font-bold text-5xl lg:text-6xl spiderly-gradient-title\">404</div>\n                    <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\n                </h1>\n                <div class=\"text-600 text-lg mb-5\">\n                    The page you're looking for doesn't exist or has been moved. Let's get you back on track.\n                </div>\n                <div>\n                    <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
-        }], ctorParameters: () => [{ type: ConfigBaseService }] });
+        }], ctorParameters: () => [{ type: ConfigServiceBase }] });
 
 class SpiderlySplitButtonComponent extends SpiderlyButtonBaseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlySplitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -3732,7 +3405,7 @@ class InitTopBarData extends BaseEntity {
     static { this.typeName = 'InitTopBarData'; }
 }
 
-class LayoutBaseService {
+class LayoutServiceBase {
     constructor(apiService, config, authService) {
         this.apiService = apiService;
         this.config = config;
@@ -3847,15 +3520,15 @@ class LayoutBaseService {
             this.userSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutBaseService, deps: [{ token: ApiSecurityService }, { token: ConfigBaseService }, { token: AuthBaseService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutBaseService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutServiceBase, deps: [{ token: ApiSecurityService }, { token: ConfigServiceBase }, { token: AuthServiceBase }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutServiceBase, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutBaseService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutServiceBase, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: ApiSecurityService }, { type: ConfigBaseService }, { type: AuthBaseService }] });
+        }], ctorParameters: () => [{ type: ApiSecurityService }, { type: ConfigServiceBase }, { type: AuthServiceBase }] });
 
 class SidebarMenuService {
     constructor() {
@@ -3976,7 +3649,7 @@ class MenuitemComponent {
             this.permissionSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: MenuitemComponent, deps: [{ token: LayoutBaseService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: SidebarMenuService }, { token: AuthBaseService }, { token: ApiSecurityService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: MenuitemComponent, deps: [{ token: LayoutServiceBase }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: SidebarMenuService }, { token: AuthServiceBase }, { token: ApiSecurityService }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: MenuitemComponent, isStandalone: true, selector: "[menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "this.root", "class.active-menuitem": "this.activeClass" } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div *ngIf=\"root && item.visible === true\" class=\"layout-menuitem-root-text\">{{item.label}}</div>\n    <a *ngIf=\"(!item.routerLink || item.items) && item.visible === true\" [attr.href]=\"item.url\" (click)=\"itemClick($event)\"\n       [ngClass]=\"item.styleClass\" [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\n        <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{item.label}}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n    </a>\n    <a *ngIf=\"(item.routerLink && !item.items) && item.visible === true\" (click)=\"itemClick($event)\" [ngClass]=\"item.styleClass\"\n    [routerLink]=\"item.routerLink\" routerLinkActive=\"active-route\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }\"\n    [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\"\n    [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\" [queryParams]=\"item.queryParams\"\n    [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\n        <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{item.label}}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n    </a>\n\n    <ul *ngIf=\"item.items && item.visible === true\" [@children]=\"submenuAnimation\">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeStyleClass\"></li>\n        </ng-template>\n    </ul>\n\n    <!-- Delete this in the future iterations, make link to partner in /partners page -->\n    <spiderly-autocomplete\n    *ngIf=\"item.showPartnerDialog\"\n    [control]=\"selectedPartner\"\n    [options]=\"partnerOptions\"\n    (onTextInput)=\"searchPartners($event)\"\n    label=\"\"\n    [placeholder]=\"t('SelectThePartner')\"\n    [showAddon]=\"true\"\n    (onButtonClick)=\"partnersAutocompleteButtonClick()\"\n    addonIcon=\"pi pi-check\"\n    [emptyMessage]=\"t('LeftCornerPartnersEmptyMessage')\"\n    class=\"mobile-stay-open\"\n    ></spiderly-autocomplete>\n     \n</ng-container>", dependencies: [{ kind: "component", type: MenuitemComponent, selector: "[menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyAutocompleteComponent, selector: "spiderly-autocomplete", inputs: ["appendTo", "showClear", "emptyMessage", "displayName"] }], animations: [
             trigger('children', [
                 state('collapsed', style({
@@ -4007,7 +3680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         TranslocoDirective,
                         SpiderlyControlsModule,
                     ], template: "<ng-container *transloco=\"let t\">\n    <div *ngIf=\"root && item.visible === true\" class=\"layout-menuitem-root-text\">{{item.label}}</div>\n    <a *ngIf=\"(!item.routerLink || item.items) && item.visible === true\" [attr.href]=\"item.url\" (click)=\"itemClick($event)\"\n       [ngClass]=\"item.styleClass\" [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\n        <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{item.label}}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n    </a>\n    <a *ngIf=\"(item.routerLink && !item.items) && item.visible === true\" (click)=\"itemClick($event)\" [ngClass]=\"item.styleClass\"\n    [routerLink]=\"item.routerLink\" routerLinkActive=\"active-route\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }\"\n    [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\"\n    [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\" [queryParams]=\"item.queryParams\"\n    [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\n        <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{item.label}}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n    </a>\n\n    <ul *ngIf=\"item.items && item.visible === true\" [@children]=\"submenuAnimation\">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeStyleClass\"></li>\n        </ng-template>\n    </ul>\n\n    <!-- Delete this in the future iterations, make link to partner in /partners page -->\n    <spiderly-autocomplete\n    *ngIf=\"item.showPartnerDialog\"\n    [control]=\"selectedPartner\"\n    [options]=\"partnerOptions\"\n    (onTextInput)=\"searchPartners($event)\"\n    label=\"\"\n    [placeholder]=\"t('SelectThePartner')\"\n    [showAddon]=\"true\"\n    (onButtonClick)=\"partnersAutocompleteButtonClick()\"\n    addonIcon=\"pi pi-check\"\n    [emptyMessage]=\"t('LeftCornerPartnersEmptyMessage')\"\n    class=\"mobile-stay-open\"\n    ></spiderly-autocomplete>\n     \n</ng-container>" }]
-        }], ctorParameters: () => [{ type: LayoutBaseService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: SidebarMenuService }, { type: AuthBaseService }, { type: ApiSecurityService }, { type: ConfigBaseService }], propDecorators: { item: [{
+        }], ctorParameters: () => [{ type: LayoutServiceBase }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: SidebarMenuService }, { type: AuthServiceBase }, { type: ApiSecurityService }, { type: ConfigServiceBase }], propDecorators: { item: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -4034,7 +3707,7 @@ class SidebarMenuComponent {
     }
     ngOnDestroy() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SidebarMenuComponent, deps: [{ token: LayoutBaseService }, { token: AuthBaseService }, { token: i1.TranslocoService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SidebarMenuComponent, deps: [{ token: LayoutServiceBase }, { token: AuthServiceBase }, { token: i1.TranslocoService }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SidebarMenuComponent, isStandalone: true, selector: "sidebar-menu", inputs: { menu: "menu" }, ngImport: i0, template: "<ul class=\"layout-menu\">\n    <ng-container *ngFor=\"let item of menu; let i = index;\">\n        <li menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n        <li *ngIf=\"item.separator\" class=\"gray-separator\" style=\"margin-top: 11px;\"></li>\n    </ng-container>\n</ul>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuitemComponent, selector: "[menuitem]", inputs: ["item", "index", "root", "parentKey"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SidebarMenuComponent, decorators: [{
@@ -4043,7 +3716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         MenuitemComponent
                     ], template: "<ul class=\"layout-menu\">\n    <ng-container *ngFor=\"let item of menu; let i = index;\">\n        <li menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n        <li *ngIf=\"item.separator\" class=\"gray-separator\" style=\"margin-top: 11px;\"></li>\n    </ng-container>\n</ul>\n" }]
-        }], ctorParameters: () => [{ type: LayoutBaseService }, { type: AuthBaseService }, { type: i1.TranslocoService }, { type: ConfigBaseService }], propDecorators: { menu: [{
+        }], ctorParameters: () => [{ type: LayoutServiceBase }, { type: AuthServiceBase }, { type: i1.TranslocoService }, { type: ConfigServiceBase }], propDecorators: { menu: [{
                 type: Input
             }] } });
 
@@ -4153,7 +3826,7 @@ class ProfileAvatarComponent {
             this.initTopBarSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ProfileAvatarComponent, deps: [{ token: LayoutBaseService }, { token: AuthBaseService }, { token: i3$2.Router }, { token: i1.TranslocoService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ProfileAvatarComponent, deps: [{ token: LayoutServiceBase }, { token: AuthServiceBase }, { token: i3$2.Router }, { token: i1.TranslocoService }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ProfileAvatarComponent, isStandalone: true, selector: "spiderly-profile-avatar", inputs: { isSideMenuLayout: "isSideMenuLayout", routeOnLargeProfileAvatarClick: "routeOnLargeProfileAvatarClick", showLoginButton: "showLoginButton", routeToLoginPage: "routeToLoginPage", loginButtonOutlined: "loginButtonOutlined", loginButtonSeverity: "loginButtonSeverity", loginButtonSize: "loginButtonSize", menuItems: "menuItems" }, outputs: { onLoginButtonClick: "onLoginButtonClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["topbarmenu"], descendants: true }, { propertyName: "topbarProfileDropdownMenuButton", first: true, predicate: ["topbarprofiledropdownmenubutton"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n  *ngIf=\"this.currentUser != null\"\n  #topbarmenu\n  >\n    <div\n      #topbarprofiledropdownmenubutton\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\n    >\n    <p-avatar\n        *ngIf=\"showProfileIcon\"\n        [label]=\"avatarLabel\"\n        [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }\"\n        pBadge \n        [badgeStyleClass]=\"'p-badge-danger'\"\n        [badgeDisabled]=\"unreadNotificationsCount == 0 || unreadNotificationsCount == null\"\n        [value]=\"unreadNotificationsCount\"\n        />\n    </div>\n    <div\n      #topbarprofiledropdownmenu\n      (document:click)=\"onDocumentClick($event)\"\n    >\n    <div \n    *ngIf=\"layoutService.state.profileDropdownSidebarVisible\" \n    style=\"width: 280px; position: absolute; padding: 15px; background: var(--p-content-background);\" \n    class=\"card\"\n    [ngClass]=\"{\n      'side-menu-profile-dialog': isSideMenuLayout,\n      'top-menu-profile-dialog': !isSideMenuLayout,\n    }\n    \"\n    >\n      <div style=\"display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;\">\n        <p-avatar\n          [label]=\"avatarLabel\"\n          size=\"xlarge\"\n          [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'margin': 'auto', 'cursor': routeOnLargeProfileAvatarClick ? 'pointer' : '' }\"\n          (click)=\"routeToUserPage()\"\n          />\n        <div style=\"font-size: 15px;\">{{currentUser?.email}}</div>\n      </div>\n      <div style=\"margin-top: 15px;\">\n        <div *ngFor=\"let item of menuItems\" [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\">\n          <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\n          <div (click)=\"item.onClick()\" class=\"hover-card\" style=\"display: flex; align-items: center; gap: 8px; margin-top: 5px;\">\n            <i \n              class=\"pi pi-fw {{item.icon}}\" \n              style=\"font-size: 16px; position: relative;\"\n              >\n              <span *ngIf=\"item.showNotificationBadge && unreadNotificationsCount != 0\" class=\"badge\"></span>\n            </i>\n            <div style=\"font-size: 15px;\"> {{item.label}} </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    </div>\n  </div>\n\n\n  <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\n    <spiderly-button \n    [label]=\"t('Login')\" \n    (onClick)=\"loginButtonClick()\" \n    icon=\"pi pi-sign-in\" \n    [outlined]=\"loginButtonOutlined\" \n    [severity]=\"loginButtonSeverity\"\n    [size]=\"loginButtonSize\"\n    ></spiderly-button>\n  </div>\n</ng-container>", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i7.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "directive", type: i8.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ProfileAvatarComponent, decorators: [{
@@ -4166,7 +3839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         SpiderlyButtonComponent,
                         TranslocoDirective,
                     ], template: "<ng-container *transloco=\"let t\">\n  <div\n  *ngIf=\"this.currentUser != null\"\n  #topbarmenu\n  >\n    <div\n      #topbarprofiledropdownmenubutton\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\n    >\n    <p-avatar\n        *ngIf=\"showProfileIcon\"\n        [label]=\"avatarLabel\"\n        [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }\"\n        pBadge \n        [badgeStyleClass]=\"'p-badge-danger'\"\n        [badgeDisabled]=\"unreadNotificationsCount == 0 || unreadNotificationsCount == null\"\n        [value]=\"unreadNotificationsCount\"\n        />\n    </div>\n    <div\n      #topbarprofiledropdownmenu\n      (document:click)=\"onDocumentClick($event)\"\n    >\n    <div \n    *ngIf=\"layoutService.state.profileDropdownSidebarVisible\" \n    style=\"width: 280px; position: absolute; padding: 15px; background: var(--p-content-background);\" \n    class=\"card\"\n    [ngClass]=\"{\n      'side-menu-profile-dialog': isSideMenuLayout,\n      'top-menu-profile-dialog': !isSideMenuLayout,\n    }\n    \"\n    >\n      <div style=\"display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;\">\n        <p-avatar\n          [label]=\"avatarLabel\"\n          size=\"xlarge\"\n          [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'margin': 'auto', 'cursor': routeOnLargeProfileAvatarClick ? 'pointer' : '' }\"\n          (click)=\"routeToUserPage()\"\n          />\n        <div style=\"font-size: 15px;\">{{currentUser?.email}}</div>\n      </div>\n      <div style=\"margin-top: 15px;\">\n        <div *ngFor=\"let item of menuItems\" [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\">\n          <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\n          <div (click)=\"item.onClick()\" class=\"hover-card\" style=\"display: flex; align-items: center; gap: 8px; margin-top: 5px;\">\n            <i \n              class=\"pi pi-fw {{item.icon}}\" \n              style=\"font-size: 16px; position: relative;\"\n              >\n              <span *ngIf=\"item.showNotificationBadge && unreadNotificationsCount != 0\" class=\"badge\"></span>\n            </i>\n            <div style=\"font-size: 15px;\"> {{item.label}} </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    </div>\n  </div>\n\n\n  <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\n    <spiderly-button \n    [label]=\"t('Login')\" \n    (onClick)=\"loginButtonClick()\" \n    icon=\"pi pi-sign-in\" \n    [outlined]=\"loginButtonOutlined\" \n    [severity]=\"loginButtonSeverity\"\n    [size]=\"loginButtonSize\"\n    ></spiderly-button>\n  </div>\n</ng-container>", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"] }]
-        }], ctorParameters: () => [{ type: LayoutBaseService }, { type: AuthBaseService }, { type: i3$2.Router }, { type: i1.TranslocoService }, { type: ConfigBaseService }], propDecorators: { isSideMenuLayout: [{
+        }], ctorParameters: () => [{ type: LayoutServiceBase }, { type: AuthServiceBase }, { type: i3$2.Router }, { type: i1.TranslocoService }, { type: ConfigServiceBase }], propDecorators: { isSideMenuLayout: [{
                 type: Input
             }], routeOnLargeProfileAvatarClick: [{
                 type: Input
@@ -4207,7 +3880,7 @@ class SideMenuTopBarComponent {
             this.layoutService.state.profileDropdownSidebarVisible = false;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SideMenuTopBarComponent, deps: [{ token: LayoutBaseService }, { token: i3$2.Router }, { token: ConfigBaseService }, { token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SideMenuTopBarComponent, deps: [{ token: LayoutServiceBase }, { token: i3$2.Router }, { token: ConfigServiceBase }, { token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SideMenuTopBarComponent, isStandalone: true, selector: "spiderly-sidemenu-topbar", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\n  <a class=\"layout-topbar-logo\" routerLink=\"/\">\n    <span>{{companyName?.toLocaleUpperCase()}}</span>\n  </a>\n\n  <button\n    #menubutton\n    class=\"p-link layout-menu-button layout-topbar-button\"\n    (click)=\"layoutService.onMenuToggle()\"\n  >\n    <i class=\"pi pi-bars\"></i>\n  </button>\n\n  <div class=\"profile-button\">\n    <spiderly-profile-avatar\n    ></spiderly-profile-avatar>\n  </div>\n\n</div>\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout", "routeOnLargeProfileAvatarClick", "showLoginButton", "routeToLoginPage", "loginButtonOutlined", "loginButtonSeverity", "loginButtonSize", "menuItems"], outputs: ["onLoginButtonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SideMenuTopBarComponent, decorators: [{
@@ -4219,7 +3892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         BadgeModule,
                         ProfileAvatarComponent,
                     ], template: "<div class=\"layout-topbar\">\n  <a class=\"layout-topbar-logo\" routerLink=\"/\">\n    <span>{{companyName?.toLocaleUpperCase()}}</span>\n  </a>\n\n  <button\n    #menubutton\n    class=\"p-link layout-menu-button layout-topbar-button\"\n    (click)=\"layoutService.onMenuToggle()\"\n  >\n    <i class=\"pi pi-bars\"></i>\n  </button>\n\n  <div class=\"profile-button\">\n    <spiderly-profile-avatar\n    ></spiderly-profile-avatar>\n  </div>\n\n</div>\n  " }]
-        }], ctorParameters: () => [{ type: LayoutBaseService }, { type: i3$2.Router }, { type: ConfigBaseService }, { type: i1.TranslocoService }], propDecorators: { menuButton: [{
+        }], ctorParameters: () => [{ type: LayoutServiceBase }, { type: i3$2.Router }, { type: ConfigServiceBase }, { type: i1.TranslocoService }], propDecorators: { menuButton: [{
                 type: ViewChild,
                 args: ['menubutton']
             }] } });
@@ -4258,7 +3931,7 @@ class TopBarComponent {
             this.permissionSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, deps: [{ token: AuthBaseService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, deps: [{ token: AuthServiceBase }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: TopBarComponent, isStandalone: true, selector: "spiderly-topbar", inputs: { menu: "menu", showHoverBgOnRootItems: "showHoverBgOnRootItems" }, ngImport: i0, template: "<div class=\"topbar-wrapper\">\n  <nav class=\"topbar {{showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'}}\">\n    <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\n      <ng-template #start>\n        <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\n      </ng-template>\n      <ng-template #end>\n        <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\n          <div>\n            <ng-content select=\"[ACTIONS]\"></ng-content>\n          </div>\n          <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\n        </div>\n      </ng-template>\n    </p-menubar>\n  </nav>\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: i4$a.Menubar, selector: "p-menubar", inputs: ["model", "style", "styleClass", "autoZIndex", "baseZIndex", "autoDisplay", "autoHide", "breakpoint", "autoHideDelay", "id", "ariaLabel", "ariaLabelledBy"], outputs: ["onFocus", "onBlur"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout", "routeOnLargeProfileAvatarClick", "showLoginButton", "routeToLoginPage", "loginButtonOutlined", "loginButtonSeverity", "loginButtonSize", "menuItems"], outputs: ["onLoginButtonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, decorators: [{
@@ -4270,7 +3943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         AvatarModule,
                         ProfileAvatarComponent,
                     ], template: "<div class=\"topbar-wrapper\">\n  <nav class=\"topbar {{showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'}}\">\n    <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\n      <ng-template #start>\n        <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\n      </ng-template>\n      <ng-template #end>\n        <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\n          <div>\n            <ng-content select=\"[ACTIONS]\"></ng-content>\n          </div>\n          <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\n        </div>\n      </ng-template>\n    </p-menubar>\n  </nav>\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"] }]
-        }], ctorParameters: () => [{ type: AuthBaseService }, { type: ConfigBaseService }], propDecorators: { menu: [{
+        }], ctorParameters: () => [{ type: AuthServiceBase }, { type: ConfigServiceBase }], propDecorators: { menu: [{
                 type: Input
             }], showHoverBgOnRootItems: [{
                 type: Input
@@ -4392,7 +4065,7 @@ class SpiderlyLayoutComponent {
         }
         this.onAfterNgDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, deps: [{ token: LayoutBaseService }, { token: i0.Renderer2 }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, deps: [{ token: LayoutServiceBase }, { token: i0.Renderer2 }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyLayoutComponent, isStandalone: true, selector: "spiderly-layout", inputs: { menu: "menu", isSideMenuLayout: "isSideMenuLayout", showHoverBgOnRootTopMenuItems: "showHoverBgOnRootTopMenuItems", maxWidth: "maxWidth" }, viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "sidemenuTopbar", first: true, predicate: SideMenuTopBarComponent, descendants: true }, { propertyName: "topbarmenu", first: true, predicate: ["topbarmenu"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\n    <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\n    <div class=\"layout-sidebar\">\n        <sidebar [menu]=\"sideMenu\"></sidebar>\n    </div>\n    <div class=\"layout-main-container\">\n        <div class=\"layout-main\">\n            <router-outlet></router-outlet>\n        </div>\n        <footer></footer>\n    </div>\n    <div class=\"layout-mask\"></div>\n</div>\n\n<div *ngIf=\"isSideMenuLayout === false\">\n    <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\n        <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\n    </spiderly-topbar>\n    <main [style.max-width]=\"maxWidth\" style=\"margin: auto; padding: 18px;\">\n        <router-outlet></router-outlet>\n    </main>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppSidebarComponent, selector: "sidebar", inputs: ["menu"] }, { kind: "component", type: FooterComponent, selector: "footer" }, { kind: "component", type: SideMenuTopBarComponent, selector: "spiderly-sidemenu-topbar" }, { kind: "component", type: TopBarComponent, selector: "spiderly-topbar", inputs: ["menu", "showHoverBgOnRootItems"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, decorators: [{
@@ -4405,7 +4078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         SideMenuTopBarComponent,
                         TopBarComponent,
                     ], template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\n    <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\n    <div class=\"layout-sidebar\">\n        <sidebar [menu]=\"sideMenu\"></sidebar>\n    </div>\n    <div class=\"layout-main-container\">\n        <div class=\"layout-main\">\n            <router-outlet></router-outlet>\n        </div>\n        <footer></footer>\n    </div>\n    <div class=\"layout-mask\"></div>\n</div>\n\n<div *ngIf=\"isSideMenuLayout === false\">\n    <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\n        <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\n    </spiderly-topbar>\n    <main [style.max-width]=\"maxWidth\" style=\"margin: auto; padding: 18px;\">\n        <router-outlet></router-outlet>\n    </main>\n</div>" }]
-        }], ctorParameters: () => [{ type: LayoutBaseService }, { type: i0.Renderer2 }, { type: i3$2.Router }], propDecorators: { menu: [{
+        }], ctorParameters: () => [{ type: LayoutServiceBase }, { type: i0.Renderer2 }, { type: i3$2.Router }], propDecorators: { menu: [{
                 type: Input
             }], isSideMenuLayout: [{
                 type: Input
@@ -4471,6 +4144,23 @@ class MimeTypes {
     }
 }
 
+class Namebook extends BaseEntity {
+    constructor({ id, displayName, } = {}) {
+        super();
+        this.id = id;
+        this.displayName = displayName;
+    }
+    static { this.schema = {
+        id: {
+            type: 'any',
+        },
+        displayName: {
+            type: 'string',
+        },
+    }; }
+    static { this.typeName = 'Namebook'; }
+}
+
 class PrimengOption extends BaseEntity {
     constructor({ label, code, } = {}) {
         super();
@@ -4570,6 +4260,14 @@ class FilterRule {
 class PaginatedResult {
 }
 
+class IsAuthorizedForSaveEvent extends BaseEntity {
+    constructor({ isAuthorizedForSave, } = {}) {
+        super();
+        this.isAuthorizedForSave = isAuthorizedForSave;
+    }
+    static { this.typeName = 'IsAuthorizedForSaveEvent'; }
+}
+
 var SecurityPermissionCodes;
 (function (SecurityPermissionCodes) {
     SecurityPermissionCodes["ReadUser"] = "ReadUser";
@@ -4616,7 +4314,7 @@ class AuthGuard {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthGuard, deps: [{ token: AuthBaseService }, { token: i3$2.Router }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthGuard, deps: [{ token: AuthServiceBase }, { token: i3$2.Router }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthGuard, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthGuard, decorators: [{
@@ -4624,7 +4322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: AuthBaseService }, { type: i3$2.Router }, { type: ConfigBaseService }] });
+        }], ctorParameters: () => [{ type: AuthServiceBase }, { type: i3$2.Router }, { type: ConfigServiceBase }] });
 
 class NotAuthGuard {
     constructor(authService) {
@@ -4644,7 +4342,7 @@ class NotAuthGuard {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotAuthGuard, deps: [{ token: AuthBaseService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotAuthGuard, deps: [{ token: AuthServiceBase }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotAuthGuard, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotAuthGuard, decorators: [{
@@ -4652,7 +4350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: AuthBaseService }] });
+        }], ctorParameters: () => [{ type: AuthServiceBase }] });
 
 class SpiderlyErrorHandler {
     constructor(messageService, translocoService, config) {
@@ -4668,7 +4366,7 @@ class SpiderlyErrorHandler {
             this.messageService.errorMessage(this.translocoService.translate('UnexpectedErrorDetails'), this.translocoService.translate('UnexpectedErrorTitle'));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyErrorHandler, deps: [{ token: SpiderlyMessageService }, { token: i1.TranslocoService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyErrorHandler, deps: [{ token: SpiderlyMessageService }, { token: i1.TranslocoService }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyErrorHandler, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyErrorHandler, decorators: [{
@@ -4676,7 +4374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: SpiderlyMessageService }, { type: i1.TranslocoService }, { type: ConfigBaseService }] });
+        }], ctorParameters: () => [{ type: SpiderlyMessageService }, { type: i1.TranslocoService }, { type: ConfigServiceBase }] });
 
 const httpLoadingInterceptor = (req, next) => {
     const spinner = inject(NgxSpinnerService);
@@ -4751,7 +4449,7 @@ const convertToDate = (object, parent, key) => {
 };
 
 const jwtInterceptor = (req, next) => {
-    const config = inject(ConfigBaseService);
+    const config = inject(ConfigServiceBase);
     const platformId = inject(PLATFORM_ID);
     let accessToken = null;
     if (isPlatformBrowser(platformId)) {
@@ -4769,7 +4467,8 @@ const jwtInterceptor = (req, next) => {
 const unauthorizedInterceptor = (req, next) => {
     const messageService = inject(SpiderlyMessageService);
     const translocoService = inject(TranslocoService);
-    const config = inject(ConfigBaseService);
+    const config = inject(ConfigServiceBase);
+    const authService = inject(AuthServiceBase);
     const handleAuthError = (err, request) => {
         if (!config.production) {
             console.error(err);
@@ -4800,13 +4499,13 @@ const unauthorizedInterceptor = (req, next) => {
             return of(err.message);
         }
         else if (err.status == 419) { // Access token expired
+            authService.clearLocalStorage();
             return of(err.message);
         }
         else {
             messageService.errorMessage(translocoService.translate('UnexpectedErrorDetails'), translocoService.translate('UnexpectedErrorTitle'));
             return of(err.message);
         }
-        return throwError(err);
     };
     return next(req).pipe(catchError((err) => {
         return handleAuthError(err, req);
@@ -4832,7 +4531,7 @@ class SpiderlyTranslocoLoader {
     getTranslation(lang) {
         return this.http.get(`${this.config.frontendUrl}/assets/i18n/${lang}.json`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTranslocoLoader, deps: [{ token: i1$4.HttpClient }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTranslocoLoader, deps: [{ token: i1$3.HttpClient }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTranslocoLoader, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTranslocoLoader, decorators: [{
@@ -4840,7 +4539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: ConfigBaseService }] });
+        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: ConfigServiceBase }] });
 
 class SpiderlyTemplateTypeDirective {
     static ngTemplateContextGuard(dir, ctx) {
@@ -4866,5 +4565,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Action, AllClickEvent, ApiSecurityService, AppSidebarComponent, AuthBaseService, AuthGuard, AuthResult, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormCopy, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigBaseService, ExternalProvider, Filter, FilterRule, FilterSortMeta, FooterComponent, GoogleButtonComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutBaseService, LazyLoadSelectedIdsResult, Login, LoginComponent, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, MimeTypes, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, Permission, PermissionSaveBody, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, Role, RoleBaseDetailsComponent, RoleMainUIForm, RolePermission, RolePermissionSaveBody, RoleSaveBody, RowClickEvent, SecurityPermissionCodes, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, TranslateLabelsAbstractService, UserBase, UserRole, UserRoleSaveBody, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, createFakeGoogleWrapper, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, httpLoadingInterceptor, isExcelFileType, isImageFileType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, primitiveArrayTypes, pushAction, selectedTab, singleOrDefault, splitPascalCase, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
+export { Action, AllClickEvent, ApiSecurityService, AppSidebarComponent, AuthGuard, AuthResult, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormCopy, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, ExternalProvider, Filter, FilterRule, FilterSortMeta, FooterComponent, GoogleButtonComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutServiceBase, LazyLoadSelectedIdsResult, Login, LoginComponent, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, MimeTypes, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, RowClickEvent, SecurityPermissionCodes, SendLoginVerificationEmailResult, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, TranslateLabelsAbstractService, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, createFakeGoogleWrapper, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, httpLoadingInterceptor, isExcelFileType, isImageFileType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, primitiveArrayTypes, pushAction, selectedTab, singleOrDefault, splitPascalCase, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
 //# sourceMappingURL=spiderly.mjs.map