turbogui-angular 17.0.1 → 19.0.0

package/fesm2022/turbogui-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, Directive, HostListener, NgModule, inject, Injectable, Component, Inject, HostBinding, Input } from '@angular/core';
-import { Subject } from 'rxjs';
+import { Subject, BehaviorSubject } from 'rxjs';
 import { ArrayUtils, NumericUtils, HTTPManager, StringUtils, HTTPManagerGetRequest, HTTPManagerPostRequest, BrowserManager, ConversionUtils } from 'turbocommons-ts';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@@ -14,6 +14,10 @@ import * as i2$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 import * as i1$1 from '@angular/material/snack-bar';
+import * as i1$2 from '@angular/router';
+import { NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import * as i2$2 from '@angular/platform-browser';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -379,487 +383,595 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
  */
 /**
- * Manages application text translations and languages
+ * This is the base class for all the dialog components that can be loaded by the dialog service class
  */
-class LocalesService extends SingletoneStrictClass {
-    /**
-     * Fully featured translation manager to be used with any application that requires text internationalization.
-     */
-    constructor() {
-        super(LocalesService);
-        /**
-         * if the class has been correctly initialized and translations have been correctly loaded
-         */
-        this._isInitialized = false;
-        /**
-         * @see getLocales()
-         */
-        this._locales = [];
-        /**
-         * @see getLanguages()
-         */
-        this._languages = [];
-        /**
-         * Stores all the loaded localization data by library name, bundle name, key and locales
-         */
-        this._loadedTranslations = {};
-        /**
-         * Stores a memory cache to improve performance when outputing translations
-         */
-        this._keyValuesCache = {};
-        /**
-         * @see setWildCardsFormat()
-         */
-        this._wildCardsFormat = '{N}';
-        /**
-         * @see setMissingKeyFormat()
-         */
-        this._missingKeyFormat = '$exception';
-        /**
-         * Stores a hash value that is used to improve the performance for translation t() methods.
-         * This is computed based on _wildCardsFormat plus _missingKeyFormat plus the current primary locale
-         * Methods that change these values will recalculate the hash string, so when calling translation methods, the
-         * performance will be as fast as possible.
-         */
-        this._cacheHashBaseString = '';
-    }
-    /**
-     * Wildcards are string fragments that are placed inside the translated texts. Their main purpose is to be replaced at
-     * runtime by custom values like for example a user name, a date, a numeric value, etc..
-     *
-     * This class helps with this process by including a parameter called 'toReplace' on all ->t methods which allows us
-     * to specify a string or list of strings that will replace the respective wildcards on the translated text. Each wildcard
-     * must follow the format specified here, and contain a numeric digit that will be used to find the replacement text at the
-     * 'toReplace' list. For example, if we define $N as the wildcard format, and we have a translation that contains $0, $1, $2,
-     * $0 will be replaced with the first element on toReplace, $1 with the second and so.
-     *
-     * We usually set this before initializing the class translation data
-     *
-     * Notice that N is mandayory on the wildcards format and the first index value is 0.
+class DialogBaseComponent {
+    /*
+     * The name of the superclass must be set into this constant as it is required by the dialog service to identify dialogs as different.
      *
-     * @param value The wildcards format we want to set
+     * When you extend the dialog base class, simply declare this static constant with the exact same name as your class and you're done.
+     * If this value is not set on the extended dialog component, a runtime exception will happen when trying to show the dialog.
      *
-     * @returns The value that's been set
+     * The root cause of this requirement is that when apps are compiled for production, class names are minified and this causes problems
+     * when creating a dialog hash to uniquely identify a dialog instance. Therefore, a hardcoded class name is necesary.
      */
-    setWildCardsFormat(value) {
-        if (!value.includes('N')) {
-            throw new Error("N is mandatory to replace wildcards");
+    static { this.DIALOG_CLASS_NAME = ''; }
+    constructor(elementRef, dialogRef) {
+        this.elementRef = elementRef;
+        this.dialogRef = dialogRef;
+    }
+    ngAfterViewInit() {
+        // Assign the component HTML identifier if it is specifically assigned to the dialogref instance
+        if (this.dialogRef.id !== undefined && this.dialogRef.id !== '') {
+            this.elementRef.nativeElement.id = this.dialogRef.id;
         }
-        this._cacheHashBaseString = value + this._missingKeyFormat + ((this._locales.length > 0) ? this._locales[0] : '');
-        this._wildCardsFormat = value;
-        return value;
     }
     /**
-     * Defines the behaviour for get(), getStartCase(), etc... methods when a key is not found on
-     * a bundle or the bundle does not exist
-     *
-     * If missingKeyFormat is an empty string, all missing keys will return an empty value (not recommended)
-     *
-     * If missingKeyFormat contains a string, that string will be always returned for missing keys
-     *
-     * If missingKeyFormat contains a string with one of the following predefined wildcards:<br>
-     *    - $key will be replaced with key name. Example: get("NAME") will output [NAME] if key is not found and missingKeyFormat = '[$key]'<br>
-     *    - $exception (default value) will throw an exception with the problem cause description.
+     * Method to be called by the dialogs that extend this base component when they want to close themselves.
+     * It will perform the close of that dialog and also send an object to the addDialog() callback with the index and value
+     * that the user may have selected.
      *
-     * @param value The missing key format we want to set
+     * @param index The numeric index of the user option selection. It will be specific for each dialog and it's different available options
+     * @param value Any value that may be provided to the callback regarding the user selected option.
      *
-     * @returns The value that's been set
-     */
-    setMissingKeyFormat(value) {
-        this._cacheHashBaseString = this._wildCardsFormat + value + ((this._locales.length > 0) ? this._locales[0] : '');
-        this._missingKeyFormat = value;
-        return value;
-    }
-    /**
-     * @see setMissingKeyFormat()
+     * @return void
      */
-    getMissingKeyFormat() {
-        return this._missingKeyFormat;
+    closeDialog(index, value = null) {
+        this.dialogRef.close({ index: index, value: value });
     }
-    /**
-     * Initializes the translation system by loading and parsing bundle files from the specified translations path.
-     * After the promise finishes, the class will contain all the translation data and will be ready to translate any
-     * provided key.
-     *
-     * @param translationsPath - Url where the translations Json structure of libraries/bundles/locales/keys is available.
-     * @param locales An array of locale codes (e.g., ['en_US', 'es_ES', 'fr_FR']) to load. These will be added to the translation
-     *        path using the following format: translationsPath/en_US-es_ES-fr_FR. The order of this array will determine the
-     *        translation priority
-     * @param parameters Any extra parameters to be attached to the translationsPath after the locales like /param1/param2/ etc
-     *
-     * @return A promise that will resolve if the translations get correctly loaded, or reject with an error if load fails
-     */
-    initialize(translationsPath, locales, parameters) {
-        this._isInitialized = false;
-        this._loadedTranslations = {};
-        // Validate received locales are correct
-        for (const locale of locales) {
-            this._validateLocaleString(locale);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogBaseComponent, deps: [{ token: i0.ElementRef }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogBaseComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatDialogRef }] });
+
+/**
+ * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
+ *
+ * Website : -> http://www.turbogui.org
+ * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
+ * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
+ * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
+ */
+/**
+ * A dialog component with a single option button, to be used for error notifications
+ */
+class DialogErrorComponent extends DialogBaseComponent {
+    static { this.DIALOG_CLASS_NAME = 'DialogErrorComponent'; }
+    constructor(elementRef, dialogRef, data) {
+        super(elementRef, dialogRef);
+        this.elementRef = elementRef;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        if (data.texts.length < 1) {
+            throw new Error('DialogErrorComponent expects 2 texts: The title and optionally a description');
         }
-        let translationsFullPath = translationsPath + '/' + locales.join('-') + '/' + parameters.join('/');
-        return new Promise((resolve, reject) => {
-            fetch(translationsFullPath).then(response => {
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                return response.json();
-            }).then(data => {
-                this._loadedTranslations = data;
-                this._isInitialized = true;
-                this._locales = locales;
-                this._languages = locales.map((l) => l.substring(0, 2));
-                this._cacheHashBaseString = this._wildCardsFormat + this._missingKeyFormat + this._locales[0];
-                resolve(undefined);
-            }).catch(error => {
-                reject(new Error(`ERROR LOADING LOCALES FROM: ${translationsFullPath}\n` + error));
-            });
-        });
-    }
-    /**
-     * Check if the class has been correctly initialized and translations have been correctly loaded
-     */
-    isInitialized() {
-        return this._isInitialized;
-    }
-    /**
-     * Aux method to verify that this class is correctly initialized with translation data
-     */
-    _validateInitialized() {
-        if (!this._isInitialized) {
-            throw new Error('LocalesManager not initialized');
+        if (data.options.length !== 1) {
+            throw new Error('DialogErrorComponent expects only one option');
+        }
+        if (data.texts.length > 1) {
+            data.texts[1] = data.texts[1].replace(/\n/g, "<br/>");
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogErrorComponent, deps: [{ token: i0.ElementRef }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogErrorComponent, isStandalone: true, selector: "tg-dialog-error", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"titleAndIconContainer\">\r\n    <h3>\r\n        {{data.texts[0]}}\r\n    </h3>\r\n    \r\n    <!-- error icon -->\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\r\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" fill=\"#ff0000\" />\r\n    </svg>\r\n    \r\n</div>\r\n\r\n<div class=\"textContainer\">\r\n    <p *ngIf=\"data.texts.length > 1\" [innerHTML]=\"data.texts[1]\">\r\n    </p>\r\n</div>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"closeDialog(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{position:relative;min-height:300px}.titleAndIconContainer{display:flex;flex-direction:row;align-items:center;justify-content:space-between}svg{height:10vh;width:auto}.textContainer{margin-top:5px;max-height:70vh;overflow:auto}p{-webkit-user-select:text;user-select:text}h3{margin-top:0;margin-bottom:25px;width:82%}button{width:100%;margin-top:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-dialog-error', imports: [CommonModule, MatButtonModule], providers: [], template: "<div class=\"titleAndIconContainer\">\r\n    <h3>\r\n        {{data.texts[0]}}\r\n    </h3>\r\n    \r\n    <!-- error icon -->\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\r\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" fill=\"#ff0000\" />\r\n    </svg>\r\n    \r\n</div>\r\n\r\n<div class=\"textContainer\">\r\n    <p *ngIf=\"data.texts.length > 1\" [innerHTML]=\"data.texts[1]\">\r\n    </p>\r\n</div>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"closeDialog(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{position:relative;min-height:300px}.titleAndIconContainer{display:flex;flex-direction:row;align-items:center;justify-content:space-between}svg{height:10vh;width:auto}.textContainer{margin-top:5px;max-height:70vh;overflow:auto}p{-webkit-user-select:text;user-select:text}h3{margin-top:0;margin-bottom:25px;width:82%}button{width:100%;margin-top:5px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+/**
+ * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
+ *
+ * Website : -> http://www.turbogui.org
+ * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
+ * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
+ * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
+ */
+/**
+ * Fade animations
+ */
+class FadeAnimationClass {
     /**
-     * Checks if the specified locale is currently loaded for the currently defined bundles and paths.
-     *
-     * @param locale A locale to check. For example 'en_US'
+     * Get a custom trigger to create fade animations when components are added or removed from the application
      *
-     * @return True if the locale is currently loaded on the class, false if not.
+     * @param triggerName The name for the trigger we want to create
+     * @param enter The time and easing that we want to use for the enter state
+     * @param leave The time and easing that we want to use for the leave state
      */
-    isLocaleLoaded(locale) {
-        this._validateLocaleString(locale);
-        return this._locales.includes(locale);
+    static getTrigger(triggerName, enter = '1s ease', leave = '300ms ease') {
+        return trigger(triggerName, [
+            transition('void => *', [style({ opacity: 0 }), animate(enter, style({ opacity: 1 }))]),
+            transition('* => void', [animate(leave, style({ opacity: 0 }))])
+        ]);
     }
-    /**
-     * Aux method to validate that a locale string is correctly formatted
-     *
-     * @param string $locale A locale string
-     */
-    _validateLocaleString(locale) {
-        if (!/^[a-z]{2}_[A-Z]{2}$/.test(locale)) {
-            throw new Error('locale must be a valid xx_XX value');
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FadeAnimationClass, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FadeAnimationClass }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FadeAnimationClass, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
+ *
+ * Website : -> http://www.turbogui.org
+ * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
+ * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
+ * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
+ */
+/**
+ * This component is used by turboGUI angular library to show the busy state to the user.
+ * It is used to block all the user input and progressively shows a busy cursor to notify that the application
+ * is waiting for something.
+ *
+ * We can (should) override this component with our own one to adapt its visual appearance to our application.
+ * We can then set dialogService.busyStateComponentClass to our component class at the application start to to
+ * override the default one.
+ */
+class BusyStateBaseComponent {
+    constructor() {
+        /**
+         * This is used to attach the fade animation directly to this component so it fades in and out when created and removed from the app
+         */
+        this.busyStateBaseFade = true;
     }
-    /**
-     * Checks if the specified 2 digit language is currently loaded for the currently defined bundles and paths.
-     *
-     * @param language A language to check. For example 'en'
-     *
-     * @return True if the language is currently loaded on the class, false if not.
-     */
-    isLanguageLoaded(language) {
-        this._validateLanguageString(language);
-        return this._languages.includes(language);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BusyStateBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: BusyStateBaseComponent, isStandalone: true, selector: "tg-busy-state-base", host: { properties: { "@busyStateBaseFade": "this.busyStateBaseFade" } }, providers: [], ngImport: i0, template: "<div class=\"darkBg\">\r\n\r\n</div>\r\n\r\n<svg width=\"38\" height=\"38\" viewBox=\"0 0 38 38\" xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#fff\">\r\n    <g fill=\"none\" fill-rule=\"evenodd\">\r\n        <g transform=\"translate(1 1)\" stroke-width=\"1\">\r\n            <circle stroke-opacity=\".2\" cx=\"18\" cy=\"18\" r=\"18\"/>\r\n            <path d=\"M36 18c0-9.94-8.06-18-18-18\">\r\n                <animateTransform\r\n                    attributeName=\"transform\"\r\n                    type=\"rotate\"\r\n                    from=\"0 18 18\"\r\n                    to=\"360 18 18\"\r\n                    dur=\"1s\"\r\n                    repeatCount=\"indefinite\"/>\r\n            </path>\r\n        </g>\r\n    </g>\r\n</svg>\r\n", styles: [":host{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999999999}.darkBg{position:absolute;cursor:progress;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#00000096;animation-name:bgfadein;animation-duration:30s;animation-timing-function:ease}svg{z-index:5000;width:40%;height:40%;max-width:130px;max-height:130px;animation-name:loadingfadein;animation-duration:3s;animation-timing-function:ease-in}@keyframes loadingfadein{0%{opacity:0}25%{opacity:0}to{opacity:1}}@keyframes bgfadein{0%{opacity:0}4%{opacity:0}14%{opacity:.2}35%{opacity:.5}to{opacity:1}}\n"], animations: [FadeAnimationClass.getTrigger('busyStateBaseFade', '1s ease', '400ms ease')] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BusyStateBaseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-busy-state-base', imports: [], providers: [], animations: [FadeAnimationClass.getTrigger('busyStateBaseFade', '1s ease', '400ms ease')], template: "<div class=\"darkBg\">\r\n\r\n</div>\r\n\r\n<svg width=\"38\" height=\"38\" viewBox=\"0 0 38 38\" xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#fff\">\r\n    <g fill=\"none\" fill-rule=\"evenodd\">\r\n        <g transform=\"translate(1 1)\" stroke-width=\"1\">\r\n            <circle stroke-opacity=\".2\" cx=\"18\" cy=\"18\" r=\"18\"/>\r\n            <path d=\"M36 18c0-9.94-8.06-18-18-18\">\r\n                <animateTransform\r\n                    attributeName=\"transform\"\r\n                    type=\"rotate\"\r\n                    from=\"0 18 18\"\r\n                    to=\"360 18 18\"\r\n                    dur=\"1s\"\r\n                    repeatCount=\"indefinite\"/>\r\n            </path>\r\n        </g>\r\n    </g>\r\n</svg>\r\n", styles: [":host{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999999999}.darkBg{position:absolute;cursor:progress;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#00000096;animation-name:bgfadein;animation-duration:30s;animation-timing-function:ease}svg{z-index:5000;width:40%;height:40%;max-width:130px;max-height:130px;animation-name:loadingfadein;animation-duration:3s;animation-timing-function:ease-in}@keyframes loadingfadein{0%{opacity:0}25%{opacity:0}to{opacity:1}}@keyframes bgfadein{0%{opacity:0}4%{opacity:0}14%{opacity:.2}35%{opacity:.5}to{opacity:1}}\n"] }]
+        }], propDecorators: { busyStateBaseFade: [{
+                type: HostBinding,
+                args: ['@busyStateBaseFade']
+            }] } });
+
+/**
+ * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
+ *
+ * Website : -> http://www.turbogui.org
+ * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
+ * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
+ * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
+ */
+/**
+ * A dialog component with a calendar that allows us to select a single date value
+ */
+class DialogDateSelectionComponent extends DialogBaseComponent {
+    static { this.DIALOG_CLASS_NAME = 'DialogDateSelectionComponent'; }
+    constructor(elementRef, dialogRef, data) {
+        super(elementRef, dialogRef);
+        this.elementRef = elementRef;
+        this.dialogRef = dialogRef;
+        this.data = data;
     }
-    /**
-     * Aux method to validate that a language string is correctly formatted
-     *
-     * @param language A 2 digit language string
-     */
-    _validateLanguageString(language) {
-        if (!/^[a-z]{2}$/.test(language)) {
-            throw new Error('language must be a valid 2 digit value');
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogDateSelectionComponent, deps: [{ token: i0.ElementRef }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogDateSelectionComponent, isStandalone: true, selector: "tg-dialog-date-selection", providers: [], usesInheritance: true, ngImport: i0, template: "<h2>{{data.texts[0]}}</h2>\r\n\r\n<mat-calendar #calendar\r\n    (selectedChange)=\"closeDialog(0, $event)\">\r\n</mat-calendar>", styles: [":host{position:relative;min-height:300px}h1{margin-top:0;margin-bottom:25px;width:82%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogDateSelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-dialog-date-selection', imports: [CommonModule, MatDatepickerModule, MatNativeDateModule], providers: [], template: "<h2>{{data.texts[0]}}</h2>\r\n\r\n<mat-calendar #calendar\r\n    (selectedChange)=\"closeDialog(0, $event)\">\r\n</mat-calendar>", styles: [":host{position:relative;min-height:300px}h1{margin-top:0;margin-bottom:25px;width:82%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+/**
+ * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
+ *
+ * Website : -> http://www.turbogui.org
+ * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
+ * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
+ * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
+ */
+/**
+ * Manages the application modal and non modal floating elements
+ */
+class DialogService extends SingletoneStrictClass {
+    constructor(rendererFactory, matSnackBar, matDialog, injector, applicationRef, componentFactoryResolver) {
+        super(DialogService);
+        this.matSnackBar = matSnackBar;
+        this.matDialog = matDialog;
+        this.injector = injector;
+        this.applicationRef = applicationRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        /**
+         * Used to modify the busy state component that is shown by default by the addModalBusyState() method.
+         *
+         * @see this.addModalBusyState()
+         */
+        this.customBusyStateComponentClass = BusyStateBaseComponent;
+        /**
+         * Check public getter for docs
+         */
+        this._isEnabled = true;
+        /**
+         * Tells if the main application is currently showing a busy state that blocks all user interaction
+         */
+        this._isShowingBusyState = false;
+        /**
+         * A reference to the modal busy state component that is initialized only the first time it is called.
+         *
+         * (To append the busy state dynamically, we use the Portal concept from the angular material library)
+         */
+        this._componentPortal = null;
+        /**
+         * A reference to the modal busy state container where the component will be added
+         */
+        this._modalBusyStateHost = null;
+        /**
+         * Tells if the manager is currently showing a snackbar element or not
+         */
+        this._isShowingSnackBar = false;
+        /**
+         * Contains a list of the dialogs that are currently visible to the user.
+         * Each item in this list is a hash that is computed when dialog is created to uniquely identify it.
+         *
+         * Empty list means no dialogs are currently visible
+         */
+        this._activeDialogs = [];
+        /**
+         * Contains a list with all the MatDialog instances that are currently visible to the user.
+         * The list uses the same order as the list of _activeDialogs hash values
+         */
+        this._activeDialogInstances = [];
+        /**
+         * Method that is used to delete the window beforeunload event listener once not used anymore
+         */
+        this._windowBeforeUnloadUnListen = null;
+        /**
+         * Method that is used to delete the document keydown event listener once not used anymore
+         */
+        this._documentKeydownUnlisten = null;
+        /**
+         * Method that is used to delete the document mousedown event listener once not used anymore
+         */
+        this._documentMousedownUnlisten = null;
+        /**
+         * Method that is used to delete the document pointerdown event listener once not used anymore
+         */
+        this._documentPointerdownUnlisten = null;
+        this._renderer = rendererFactory.createRenderer(null, null);
     }
     /**
-     * Get the translation to the current primary locale for the given key, library and bundle
-     *
-     * @param string key The key we want to read from the specified resource bundle
-     * @param string bundlePath A string with the format 'library_name/bundle_name' that is used to locate the bundle were the key to translate is found
-     * @param array replaceWildcards A list of values that will replace wildcards that may be found on the translated text. Each wildcard
-     *        will be replaced with the element whose index on replaceWildcards matches it. Check the documentation for this.wildCardsFormat
-     *        property to know more about how to setup wildcards on your translations.
-     *
-     * @see setWildCardsFormat()
+     * Tells if this dialog service is enabled or not. If dialog service is disabled, none of it's features will work
+     * This is used to block all dialog features normally when shutting down the application
      *
-     * @return The translated text
+     * Use with caution. When this is set to false, dialog service stops working.
      */
-    t(key, bundlePath, replaceWildcards = []) {
-        this._validateInitialized();
-        // Create a cache key to improve performance when requesting the same key translation several times
-        const cacheKey = `${this._cacheHashBaseString}${key}${bundlePath}${replaceWildcards.join('')}`;
-        if (!this._keyValuesCache[cacheKey]) {
-            this._forceNonEmptyString(key, '', 'key must be non empty string');
-            this._forceNonEmptyString(bundlePath, '', 'bundlePath must be non empty string');
-            const [library, bundle] = bundlePath.split('/');
-            this._forceNonEmptyString(library, '', 'no library specified on bundlePath');
-            this._forceNonEmptyString(bundle, '', 'no bundle specified on bundlePath');
-            const replacementsCount = replaceWildcards.length;
-            // Loop all the locales to find the first one with a value for the specified key
-            for (const locale of this._locales) {
-                if (this._loadedTranslations[library]?.[bundle]?.[locale]?.[key]) {
-                    let result = this._loadedTranslations[library][bundle][locale][key];
-                    // Replace all wildcards on the text with the specified replacements if any
-                    for (let i = 0; i < replacementsCount; i++) {
-                        result = this._replace(result, this._replace(this._wildCardsFormat, 'N', i.toString()), replaceWildcards[i]);
-                    }
-                    this._keyValuesCache[cacheKey] = result;
-                    return result;
-                }
-            }
-            // Check if an exception needs to be thrown if the specified key is not found on this bundle
-            if (this._missingKeyFormat.includes('$exception')) {
-                throw new Error(`key <${key}> not found on ${bundlePath}`);
-            }
-            this._keyValuesCache[cacheKey] = this._replace(this._missingKeyFormat, '$key', key);
+    set isEnabled(v) {
+        if (v === this._isEnabled) {
+            return;
         }
-        return this._keyValuesCache[cacheKey];
-    }
-    /**
-     * Get the translation for the given key and bundle as a string with all words first character capitalized
-     * and all the rest of the word with lower case
-     *
-     * @see t()
-     *
-     * @returns The localized and case formatted text
-     */
-    tStartCase(key, bundlePath, replaceWildcards = []) {
-        return this.t(key, bundlePath, replaceWildcards).split(' ')
-            .map((word) => word ? word[0].toUpperCase() + word.slice(1).toLowerCase() : '').join(' ');
-    }
-    /**
-     * Get the translation for the given key and bundle as an all upper case string
-     *
-     * @see t()
-     *
-     * @returns The localized and case formatted text
-     */
-    tAllUpperCase(key, bundlePath, replaceWildcards = []) {
-        return this.t(key, bundlePath, replaceWildcards).toUpperCase();
+        this._isEnabled = v;
     }
     /**
-     * Get the translation for the given key and bundle as an all lower case string
-     *
-     * @see t()
+     * Enables a warning that will be shown to the user when he/she tries to close the application.
+     * This warning will prompt the user to continue with the exit process or cancel it.
+     * The specific texts of this message are a generic ones and cannot be changed.
      *
-     * @returns The localized and case formatted text
+     * IMPORTANT: This method must be called after the main application has been initialized in order to work,
+     * otherwise it will do nothing.
      */
-    tAllLowerCase(key, bundlePath, replaceWildcards = []) {
-        return this.t(key, bundlePath, replaceWildcards).toLowerCase();
+    addCloseApplicationWarning() {
+        if (this._windowBeforeUnloadUnListen === null) {
+            this._windowBeforeUnloadUnListen = this._renderer.listen('window', 'beforeunload', (event) => event.returnValue = true);
+        }
     }
     /**
-     * Get the translation for the given key and bundle as a string with the first character as Upper case
-     * and all the rest as lower case
-     *
-     * @see t()
-     *
-     * @returns The localized and case formatted text
+     * Remove the close application warning message if previously assigned
      */
-    tFirstUpperRestLower(key, bundlePath, replaceWildcards = []) {
-        const string = this.t(key, bundlePath, replaceWildcards);
-        return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
+    removeCloseApplicationWarning() {
+        if (this._windowBeforeUnloadUnListen !== null) {
+            this._windowBeforeUnloadUnListen();
+            this._windowBeforeUnloadUnListen = null;
+        }
     }
     /**
-     * A list of strings containing the locales that are used by this class to translate the given keys, sorted by preference.
-     * Each string is formatted as a standard locale code with language and country joined by an underscore, like: en_US, fr_FR
+     * Change the application visual appearance so the user perceives that the application is
+     * currently busy. While modal busy state is enabled, no user input is possible neither via
+     * keyboard, mouse or touch. Use this state when performing server requests or operations that
+     * must block the user interaction with the application. To allow user interaction again, you must
+     * call removeModalBusyState()
      *
-     * When a key and bundle are requested for translation, the class will check on the first language of this
-     * list for a translated text. If missing, the next one will be used, and so. This list is constructed after initialize
-     * methods is called.
+     * Notice: We can modify the busy state visual component that is shown by this method. To do it, we must
+     * set this.customBusyStateComponentClass property with our own custom busy state component class. (We can do it at
+     * our main application component constructor for example). Our custom component must extend the
+     * BusyStateBaseComponent one to add its own visual appearance.
      *
-     * @example: After loading the following list of locales ['en_US', 'es_ES', 'fr_FR'] if we call LocalesManager.t('HELLO', 'lib1/greetings')
-     * the localization manager will try to locate the en_US value for the HELLO tag on the greetings bundle for the library lib1.
-     * If the tag is not found for the specified locale and bundle, the same search will be performed for the es_ES locale, and so, till a
-     * value is found or no more locales are defined.
+     * @see this.customBusyStateComponentClass
      */
-    getLocales() {
-        return this._locales;
+    addModalBusyState() {
+        if (!this._isEnabled || this._isShowingBusyState) {
+            return;
+        }
+        this._disableUserInteraction();
+        // Dynamically create the busy state component reference if this is the first time
+        if (this._componentPortal === null) {
+            this._componentPortal = new ComponentPortal(this.customBusyStateComponentClass);
+            // Create a PortalHost with document.body as its anchor element
+            this._modalBusyStateHost = new DomPortalOutlet(document.body, this.componentFactoryResolver, this.applicationRef, this.injector);
+        }
+        this._modalBusyStateHost.attach(this._componentPortal);
+        this._isShowingBusyState = true;
     }
     /**
-     * A list of strings containing the languages that are used by this class to translate the given keys, sorted by preference.
-     * Each string is formatted as a 2 digit language code, like: en, fr
-     *
-     * This list is the same as the locales() one, but containing only the language part of each locale (the first two digits)
-     *
-     * @see getLocales()
+     * Tells if the application is currently locked in a modal busy state (caused by an addModalBusyState() call)
      */
-    getLanguages() {
-        return this._languages;
+    get isShowingBusyState() {
+        return this._isShowingBusyState;
     }
     /**
-     * Get the first locale from the list of loaded locales, which is the currently used to search for translated texts.
-     *
-     * @returns The locale that is defined as the primary one. For example: en_US, es_ES, ..
+     * Cancel the application busy state and restore it back to normal so user interaction is allowed again
      */
-    getPrimaryLocale() {
-        this._validateInitialized();
-        return this._locales[0];
+    removeModalBusyState() {
+        if (!this._isEnabled || !this._isShowingBusyState) {
+            return;
+        }
+        if (this._componentPortal !== null) {
+            this._modalBusyStateHost.detach();
+        }
+        this._enableUserInteraction();
+        this._isShowingBusyState = false;
     }
     /**
-     * Get the first language from the list of loaded locales, which is the currently used to search for translated texts.
-     *
-     * @returns The 2 digit language code that is defined as the primary one. For example: en, es, ..
+     * TODO - adapt from TS version
      */
-    getPrimaryLanguage() {
-        this._validateInitialized();
-        return this._languages[0];
+    addToolTip() {
+        // TODO - adapt from TS version
     }
     /**
-     * Define the locale that will be placed at the front of the currently loaded locales list (moving all the others one position to the right).
+     * Show a non modal snackbar notification to the user (Only one snack-bar can ever be opened at the same time).
      *
-     * This will be the first locale to use when trying to get a translation.
+     * Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom or top of the screen.
+     * They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
      *
-     * @param locale A currently loaded locale that will be moved to the first position of the loaded locales list. If the specified locale
-     *        is not currently loaded, an exception will happen.
+     * @param config A MatSnackBarConfig instance with the customizations we want for this snackbar
+     * @param message The message to show on the snackbar
+     * @param action If not empty, the text to place on the snackbar confirmation button
+     * @param actionCallback A method to execute once the user clicks into the action button.
      *
-     * @returns void
+     * @return A promise that will be resolved once the snackbar is closed.
      */
-    setPrimaryLocale(locale) {
-        this._validateInitialized();
-        if (!this.isLocaleLoaded(locale)) {
-            throw new Error(locale + ' not loaded');
+    addSnackBar(config, message, action = '') {
+        if (!this._isEnabled) {
+            return Promise.reject(new Error('Dialog service is disabled'));
         }
-        let result = [locale];
-        for (let l of this._locales) {
-            if (l !== locale) {
-                result.push(l);
-            }
+        if (this._isShowingSnackBar) {
+            throw new Error('Trying to show a snackbar while another one is still visible');
         }
-        this._locales = result;
-        this._languages = this._locales.map((l) => l.substring(0, 2));
-        this._cacheHashBaseString = this._wildCardsFormat + this._missingKeyFormat + this._locales[0];
+        this._isShowingSnackBar = true;
+        return new Promise((resolve) => {
+            const snackBarRef = this.matSnackBar.open(message, action === '' ? undefined : action, config);
+            // Handle action button click
+            snackBarRef.onAction().subscribe(() => {
+                this._isShowingSnackBar = false;
+                resolve(true);
+            });
+            // Handle dismiss
+            snackBarRef.afterDismissed().subscribe(() => {
+                this._isShowingSnackBar = false;
+                resolve(false);
+            });
+        });
     }
     /**
-     * Moves the specified locales to the beginning of the locales list. This also alters the translation priority by setting the first
-     * provided locale as the most prioritary, the second as the next one and so.
-     *
-     * This method basically works exactly the same way as setPrimaryLocale but letting us add many locales at once.
-     *
-     * @see setPrimaryLocale()
-     *
-     * @param locales A list of locales to be moved to the beginning of the translation priority. First locales item will be the prefered
-     *        locale for translation, second will be the next one in case some key is not translated for the first one and so. If any of the
-     *        specified locales is not currently loaded, an exception will happen.
+     * Tells if the application is currently showing a snackbar or not
+     */
+    get isShowingSnackBar() {
+        return this._isShowingSnackBar;
+    }
+    /**
+     * Force the removal of the snack bar dialog if it exists.
      *
-     * @returns void
+     * If no snackbar is currently visible, this method will do nothing
      */
-    setPrimaryLocales(locales) {
-        if (!Array.isArray(locales) ||
-            (new Set(locales).size !== locales.length) ||
-            locales.length === 0) {
-            throw new Error('locales must be non empty string array with no duplicate elements');
-        }
-        for (let i = locales.length - 1; i >= 0; i--) {
-            this.setPrimaryLocale(locales[i]);
+    removeSnackBar() {
+        if (!this._isEnabled || !this._isShowingSnackBar) {
+            return;
         }
+        this.matSnackBar.dismiss();
+        this._isShowingSnackBar = false;
     }
     /**
-     * Define the 2 digit language that will be placed at the front of the currently loaded locales list (moving all the others one position to the right).
-     *
-     * This will be the first language to use when trying to get a translation.
+     * Show a dialog with one or more options that can be used to close it. We can use any of the predefined dialog types that are bundled with
+     * this library or extend DialogBaseComponent to create our own custom ones.
      *
-     * @param language A 2 digit language code that matches with any of the currently loaded locales, which will
-     *        be moved to the first position of the loaded locales list. If the specified language does not match with
-     *        a locale that is currently loaded, an exception will happen.
+     * @param dialogComponentClass A class for a component that extends DialogBaseComponent, which will be the dialog that is shown to the user.
+     * @param properties An object containing the different visual and textual options that this dialog allows:
+     *            - id: The html unique identifier that the dialog will have once created. If not specified, no id will be explicitly set
+     *            - width: 50% by default. Specify the css value for the default dialog width. As the dialog is responsive, the value will be automatically
+     *              reduced if the available screen is not enough, and will reach the desired value otherwise. We can set any css unit like pixels,
+     *              %, vh, vw, or any other. For example: '400px', '50%', etc.
+     *            - maxWidth: Defines the maximum width that the dialog will have regarding the viewport. We can specify it in % or vw, just like is done in
+     *              css. By default it is defined as 96vw, which will fit 96% of the viewport on small devices
+     *            - height: TODO docs
+     *            - maxHeight: TODO docs
+     *            - modal: True (default) if selecting an option is mandatory to close the dialog, false if the dialog can be closed
+     *              by the user clicking outside it
+     *            - texts: A list with strings containing the dialog texts, sorted by importance. When dialog has a title, this should
+     *              be placed first, subtitle second and so (Each dialog may accept a different custom number of texts).
+     *            - options: A list of strings that will be used as button captions for each one of the accepted dialog options
+     *            - data: An object that we can use to pass any extra data that we want to the dialog
+     *            - viewContainerRef: This is important if we want to propagate providers from a parent component to this dialog. We must specify
+     *              this reference to make sure the same services injected on the parent are available too at the child dialog
      *
-     * @returns void
+     * @return A promise that will be resolved once the dialog is closed.
+     *         The promise will receive a selection object with two properties which will correspond to the index and value from the options
+     *         array that's selected by the user. If no option selected, index will be -1 and value null
      */
-    setPrimaryLanguage(language) {
-        for (let locale of this._locales) {
-            if (locale.substring(0, 2) === language) {
-                this.setPrimaryLocale(locale);
-                return;
+    addDialog(dialogComponentClass, properties) {
+        if (!this._isEnabled) {
+            return Promise.reject(new Error('Dialog service is disabled'));
+        }
+        return new Promise((resolve) => {
+            // Set the default values for non specified properties
+            properties.modal = properties.modal ?? true;
+            properties.texts = properties.texts ?? [];
+            properties.options = properties.options ?? [];
+            properties.data = properties.data ?? {};
+            // Generate a string to uniquely identify this dialog on the list of active dialogs
+            // A dialog is considered as unique if the dialog id and texts are exactly the same. We do not take options into consideration
+            // as there may be dialogs with a big amount of options available.
+            let className = dialogComponentClass.DIALOG_CLASS_NAME;
+            if (className === '') {
+                throw new Error(`The static property DIALOG_CLASS_NAME is not defined or is empty for this dialog component (${dialogComponentClass})`);
             }
-        }
-        throw new Error(language + ' not loaded');
+            const dialogHash = className + properties.texts.join('');
+            // identical dialogs won't be allowed at the same time
+            if (this._activeDialogs.includes(dialogHash)) {
+                return resolve({ index: -1 });
+            }
+            const dialogRef = this.matDialog.open(dialogComponentClass, {
+                width: properties.width ?? "50%",
+                maxWidth: properties.maxWidth ?? "96vw",
+                disableClose: properties.modal,
+                autoFocus: false,
+                closeOnNavigation: !properties.modal,
+                viewContainerRef: properties.viewContainerRef,
+                data: { texts: properties.texts, options: properties.options, data: properties.data }
+            });
+            // Assign the dialog ID only if specifically set on properties
+            if (properties.id && properties.id !== undefined) {
+                dialogRef.id = properties.id;
+            }
+            this._activeDialogs.push(dialogHash);
+            this._activeDialogInstances.push(dialogRef);
+            dialogRef.beforeClosed().subscribe((selection) => {
+                this._activeDialogs = ArrayUtils.removeElement(this._activeDialogs, dialogHash);
+                this._activeDialogInstances = ArrayUtils.removeElement(this._activeDialogInstances, dialogRef);
+                if (!properties.modal && selection === undefined) {
+                    selection = { index: -1 };
+                }
+                else if (!NumericUtils.isInteger(selection.index)) {
+                    throw new Error(`closeDialog() expects index to be an integer`);
+                }
+                if (selection.index >= 0 && selection.value === null) {
+                    selection.value = properties.options[selection.index];
+                }
+                resolve(selection);
+            });
+        });
     }
     /**
-     * Moves the locales that match the specified languages to the beginning of the locales list.
-     * Works the same as setPrimaryLocales() but with a list of the 2 digit language codes that match the respective locales.
-     *
-     * @see setPrimaryLocale()
-     * @see setPrimaryLanguage()
+     * Show a dialog with a calendar to let the user pick a date.
      *
-     * @param languages A list of 2 digit language codes to be moved to the beginning of the translation priority. If any of the
-     *        specified languages does not match with a locale that is currently loaded, an exception will happen.
+     * @param properties An object containing the different visual and textual options that this dialog allows:
+     *            - id: The html unique identifier that the dialog will have once created. If not specified, no id will be explicitly set
+     *            - width: Specify the css value for the default dialog width. As the dialog is responsive, the value will be automatically
+     *              reduced if the available screen is not enough, and will reach the desired value otherwise. We can set any css unit like pixels,
+     *              %, vh, vw, or any other. For example: '400px', '50%', etc.
+     *            - maxWidth: Defines the maximum width that the dialog will have regarding the viewport. We can specify it in % or vw, just like is done in
+     *              css. By default it is defined as 96vw, which will fit 96% of the viewport on small devices
+     *            - height: TODO docs
+     *            - maxHeight: TODO docs
+     *            - modal: True (default) if selecting an option is mandatory to close the dialog, false if the dialog can be closed
+     *              by the user clicking outside it
+     *            - title: An optional dialog title
+     *            - viewContainerRef: This is important to propagate providers from a parent component to this dialog. We must specify
+     *              this reference to make sure the same services injected on the parent are available too at the child dialog
      *
-     * @returns void
+     * @returns A Promise that resolves to a Date() object selected by the user or null if no selection was made
      */
-    setPrimaryLanguages(languages) {
-        if (!Array.isArray(languages) ||
-            (new Set(languages).size !== languages.length) ||
-            languages.length === 0) {
-            throw new Error('languages must be non empty string array with no duplicate elements');
-        }
-        for (let i = languages.length - 1; i >= 0; i--) {
-            this.setPrimaryLanguage(languages[i]);
+    async addDateSelectionDialog(properties) {
+        if (!this._isEnabled) {
+            return null;
         }
+        const selection = await this.addDialog(DialogDateSelectionComponent, {
+            id: properties.id ?? undefined,
+            width: properties.width ?? "50%",
+            maxWidth: properties.maxWidth ?? "96vw",
+            height: properties.height ?? "50%",
+            maxHeight: properties.maxHeight ?? "92vw",
+            modal: properties.modal ?? false,
+            texts: [properties.title ?? ''],
+            viewContainerRef: properties.viewContainerRef
+        });
+        return selection.index === -1 ? null : selection.value;
     }
     /**
-     * Change the loaded locales translation preference order. The same locales that are currently loaded must be passed
-     * but with a different order to change the translation priority.
-     *
-     * @param locales A list with the new locales translation priority
+     * Force the removal of all the dialogs that are currently visible.
      *
-     * @returns void
+     * If no dialogs are currently visible, this method will do nothing
      */
-    setLocalesOrder(locales) {
-        if (locales.length !== this._locales.length) {
-            throw new Error('locales must contain all the currently loaded locales');
+    removeAllDialogs() {
+        if (!this._isEnabled) {
+            return;
         }
-        this._validateInitialized();
-        for (let locale of locales) {
-            if (!this.isLocaleLoaded(locale)) {
-                throw new Error(locale + ' not loaded');
-            }
+        for (const dialogRef of this._activeDialogInstances) {
+            dialogRef.close({ index: -1 });
         }
-        this._locales = locales;
-        this._languages = this._locales.map((l) => l.substring(0, 2));
-        this._cacheHashBaseString = this._wildCardsFormat + this._missingKeyFormat + this._locales[0];
+        this._activeDialogs = [];
+        this._activeDialogInstances = [];
     }
     /**
-     * This is an aux method to implement the TurboCommons StringUtils replace method.
-     * It is exactly the same as the one on the library, but we implement it here to avoid having a dependency with TurboCommons
+     * TODO - translate from TS version
      */
-    _replace(string, search, replacement) {
-        const escapedSearch = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        return string.replace(new RegExp(escapedSearch, 'g'), replacement);
-    }
+    //    addSideNav(){
+    //
+    //    }
     /**
-     * This is an aux method to implement the TurboCommons StringUtils isEmpty method.
-     * It is exactly the same as the one on the library, but we implement it here to avoid having a dependency with TurboCommons
+     * TODO - translate from TS version
      */
-    _isEmpty(string) {
-        let isString = (typeof string === 'string' || string instanceof String);
-        // Throw exception if non string value was received
-        if (!isString) {
-            // Empty or null value is considered empty
-            if (string == null || string == '') {
-                return true;
-            }
-            throw new Error("value is not a string");
+    //    get isShowingSideNav(){
+    //
+    //    }
+    /**
+     * TODO - translate from TS version
+     */
+    //    removeSideNav(){
+    //
+    //    }
+    /**
+     * Block all the user interactions with the application (keyboard, touch, mouse, ...)
+     */
+    _disableUserInteraction() {
+        if (this._documentKeydownUnlisten === null) {
+            this._documentKeydownUnlisten = this._renderer.listen('document', 'keydown', (event) => event.preventDefault());
+        }
+        if (this._documentMousedownUnlisten === null) {
+            this._documentMousedownUnlisten = this._renderer.listen('document', 'mousedown', (event) => event.preventDefault());
+        }
+        if (this._documentPointerdownUnlisten === null) {
+            this._documentPointerdownUnlisten = this._renderer.listen('document', 'pointerdown', (event) => event.preventDefault());
         }
-        return string.replace(/[ \n\r\t]/g, '') === '';
     }
     /**
-     * This is an aux method to implement the TurboCommons StringUtils forceNonEmptyString method.
-     * It is exactly the same as the one on the library, but we implement it here to avoid having a dependency with TurboCommons
+     * Restore the user interactions that were previously disabled with _disableUserInteraction method
      */
-    _forceNonEmptyString(value, valueName = '', errorMessage = 'must be a non empty string') {
-        let isString = (typeof value === 'string' || value instanceof String);
-        if (!isString || this._isEmpty(value)) {
-            throw new Error(valueName + ' ' + errorMessage);
+    _enableUserInteraction() {
+        if (this._documentKeydownUnlisten !== null) {
+            this._documentKeydownUnlisten();
+            this._documentKeydownUnlisten = null;
+        }
+        if (this._documentMousedownUnlisten !== null) {
+            this._documentMousedownUnlisten();
+            this._documentMousedownUnlisten = null;
+        }
+        if (this._documentPointerdownUnlisten !== null) {
+            this._documentPointerdownUnlisten();
+            this._documentMousedownUnlisten = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: LocalesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: LocalesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogService, deps: [{ token: i0.RendererFactory2 }, { token: i1$1.MatSnackBar }, { token: i1.MatDialog }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: LocalesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: i1$1.MatSnackBar }, { type: i1.MatDialog }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }] });
 
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
@@ -870,91 +982,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
  */
 /**
- * This is the base class for all the dialog components that can be loaded by the dialog service class
+ * Manages application http communications
  */
-class DialogBaseComponent {
-    /*
-     * The name of the superclass must be set into this constant as it is required by the dialog service to identify dialogs as different.
-     *
-     * When you extend the dialog base class, simply declare this static constant with the exact same name as your class and you're done.
-     * If this value is not set on the extended dialog component, a runtime exception will happen when trying to show the dialog.
-     *
-     * The root cause of this requirement is that when apps are compiled for production, class names are minified and this causes problems
-     * when creating a dialog hash to uniquely identify a dialog instance. Therefore, a hardcoded class name is necesary.
-     */
-    static { this.DIALOG_CLASS_NAME = ''; }
-    constructor(elementRef, dialogRef) {
-        this.elementRef = elementRef;
-        this.dialogRef = dialogRef;
-    }
-    ngAfterViewInit() {
-        // Assign the component HTML identifier if it is specifically assigned to the dialogref instance
-        if (this.dialogRef.id !== undefined && this.dialogRef.id !== '') {
-            this.elementRef.nativeElement.id = this.dialogRef.id;
-        }
+class HTTPService extends HTTPManager {
+    constructor(dialogService) {
+        super(true);
+        this.dialogService = dialogService;
     }
     /**
-     * Method to be called by the dialogs that extend this base component when they want to close themselves.
-     * It will perform the close of that dialog and also send an object to the addDialog() callback with the index and value
-     * that the user may have selected.
+     * The same method as HTTPManager.execute but with the ability to enable several options which are specific to this service:
      *
-     * @param index The numeric index of the user option selection. It will be specific for each dialog and it's different available options
-     * @param value Any value that may be provided to the callback regarding the user selected option.
+     * - options:
+     *     busyState: Set it to false to prevent the default behaviour of locking the UI while the request is running
+     *     handleErrors: Set it to false to prevent the default behaviour of showing a detailed error dialog when a request fails
      *
-     * @return void
+     * @see HTTPManager.execute()
      */
-    closeDialog(index, value = null) {
-        this.dialogRef.close({ index: index, value: value });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogBaseComponent, deps: [{ token: i0.ElementRef }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogBaseComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogBaseComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatDialogRef }] });
-
-/**
- * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
- *
- * Website : -> http://www.turbogui.org
- * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
- * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
- * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
- */
-/**
- * A dialog component with a single option button, to be used for error notifications
- */
-class DialogErrorComponent extends DialogBaseComponent {
-    static { this.DIALOG_CLASS_NAME = 'DialogErrorComponent'; }
-    constructor(elementRef, dialogRef, data) {
-        super(elementRef, dialogRef);
-        this.elementRef = elementRef;
-        this.dialogRef = dialogRef;
-        this.data = data;
-        if (data.texts.length < 1) {
-            throw new Error('DialogErrorComponent expects 2 texts: The title and optionally a description');
-        }
-        if (data.options.length !== 1) {
-            throw new Error('DialogErrorComponent expects only one option');
-        }
-        if (data.texts.length > 1) {
-            data.texts[1] = data.texts[1].replace(/\n/g, "<br/>");
+    execute(requests, finishedCallback = null, progressCallback = null, options = {}) {
+        // Set the default values for non specified properties
+        options.busyState = options.busyState ?? true;
+        options.handleErrors = options.handleErrors ?? true;
+        if (options.busyState) {
+            this.dialogService.addModalBusyState();
         }
+        super.execute(requests, (results, anyError) => {
+            if (options.busyState) {
+                this.dialogService.removeModalBusyState();
+            }
+            if (options.handleErrors && anyError) {
+                for (let result of results) {
+                    if (result.isError) {
+                        let errorMsg = result.errorMsg + '\n\n' + result.response;
+                        if (StringUtils.isEmpty(errorMsg)) {
+                            errorMsg = 'Unknown error. Make sure Internet connection is available';
+                        }
+                        this.dialogService.addDialog(DialogErrorComponent, {
+                            width: '50vw',
+                            texts: ['Error: ' + result.code, errorMsg],
+                            options: ['Ok']
+                        });
+                    }
+                }
+            }
+            if (finishedCallback !== null) {
+                finishedCallback(results, anyError);
+            }
+        }, progressCallback);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogErrorComponent, deps: [{ token: i0.ElementRef }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogErrorComponent, isStandalone: true, selector: "tg-dialog-error", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"titleAndIconContainer\">\r\n    <h3>\r\n        {{data.texts[0]}}\r\n    </h3>\r\n    \r\n    <!-- error icon -->\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\r\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" fill=\"#ff0000\" />\r\n    </svg>\r\n    \r\n</div>\r\n\r\n<div class=\"textContainer\">\r\n    <p *ngIf=\"data.texts.length > 1\" [innerHTML]=\"data.texts[1]\">\r\n    </p>\r\n</div>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"closeDialog(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{position:relative;min-height:300px}.titleAndIconContainer{display:flex;flex-direction:row;align-items:center;justify-content:space-between}svg{height:10vh;width:auto}.textContainer{margin-top:5px;max-height:70vh;overflow:auto}p{-webkit-user-select:text;user-select:text}h3{margin-top:0;margin-bottom:25px;width:82%}button{width:100%;margin-top:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: HTTPService, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: HTTPService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogErrorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-dialog-error', imports: [CommonModule, MatButtonModule], providers: [], template: "<div class=\"titleAndIconContainer\">\r\n    <h3>\r\n        {{data.texts[0]}}\r\n    </h3>\r\n    \r\n    <!-- error icon -->\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\r\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" fill=\"#ff0000\" />\r\n    </svg>\r\n    \r\n</div>\r\n\r\n<div class=\"textContainer\">\r\n    <p *ngIf=\"data.texts.length > 1\" [innerHTML]=\"data.texts[1]\">\r\n    </p>\r\n</div>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"closeDialog(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{position:relative;min-height:300px}.titleAndIconContainer{display:flex;flex-direction:row;align-items:center;justify-content:space-between}svg{height:10vh;width:auto}.textContainer{margin-top:5px;max-height:70vh;overflow:auto}p{-webkit-user-select:text;user-select:text}h3{margin-top:0;margin-bottom:25px;width:82%}button{width:100%;margin-top:5px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: HTTPService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: DialogService }] });
 
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
@@ -965,28 +1048,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
  */
 /**
- * Fade animations
+ * Class that defines a GET http request, to be used by HttpService
  */
-class FadeAnimationClass {
-    /**
-     * Get a custom trigger to create fade animations when components are added or removed from the application
-     *
-     * @param triggerName The name for the trigger we want to create
-     * @param enter The time and easing that we want to use for the enter state
-     * @param leave The time and easing that we want to use for the leave state
-     */
-    static getTrigger(triggerName, enter = '1s ease', leave = '300ms ease') {
-        return trigger(triggerName, [
-            transition('void => *', [style({ opacity: 0 }), animate(enter, style({ opacity: 1 }))]),
-            transition('* => void', [animate(leave, style({ opacity: 0 }))])
-        ]);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FadeAnimationClass, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FadeAnimationClass }); }
+class HTTPServiceGetRequest extends HTTPManagerGetRequest {
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FadeAnimationClass, decorators: [{
-            type: Injectable
-        }] });
 
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
@@ -997,31 +1062,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
  */
 /**
- * This component is used by turboGUI angular library to show the busy state to the user.
- * It is used to block all the user input and progressively shows a busy cursor to notify that the application
- * is waiting for something.
- *
- * We can (should) override this component with our own one to adapt its visual appearance to our application.
- * We can then set dialogService.busyStateComponentClass to our component class at the application start to to
- * override the default one.
+ * Class that defines a POST http request, to be used by HttpService
  */
-class BusyStateBaseComponent {
-    constructor() {
-        /**
-         * This is used to attach the fade animation directly to this component so it fades in and out when created and removed from the app
-         */
-        this.busyStateBaseFade = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BusyStateBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: BusyStateBaseComponent, isStandalone: true, selector: "tg-busy-state-base", host: { properties: { "@busyStateBaseFade": "this.busyStateBaseFade" } }, providers: [], ngImport: i0, template: "<div class=\"darkBg\">\r\n\r\n</div>\r\n\r\n<svg width=\"38\" height=\"38\" viewBox=\"0 0 38 38\" xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#fff\">\r\n    <g fill=\"none\" fill-rule=\"evenodd\">\r\n        <g transform=\"translate(1 1)\" stroke-width=\"1\">\r\n            <circle stroke-opacity=\".2\" cx=\"18\" cy=\"18\" r=\"18\"/>\r\n            <path d=\"M36 18c0-9.94-8.06-18-18-18\">\r\n                <animateTransform\r\n                    attributeName=\"transform\"\r\n                    type=\"rotate\"\r\n                    from=\"0 18 18\"\r\n                    to=\"360 18 18\"\r\n                    dur=\"1s\"\r\n                    repeatCount=\"indefinite\"/>\r\n            </path>\r\n        </g>\r\n    </g>\r\n</svg>\r\n", styles: [":host{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999999999}.darkBg{position:absolute;cursor:progress;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#00000096;animation-name:bgfadein;animation-duration:30s;animation-timing-function:ease}svg{z-index:5000;width:40%;height:40%;max-width:130px;max-height:130px;animation-name:loadingfadein;animation-duration:3s;animation-timing-function:ease-in}@keyframes loadingfadein{0%{opacity:0}25%{opacity:0}to{opacity:1}}@keyframes bgfadein{0%{opacity:0}4%{opacity:0}14%{opacity:.2}35%{opacity:.5}to{opacity:1}}\n"], animations: [FadeAnimationClass.getTrigger('busyStateBaseFade', '1s ease', '400ms ease')] }); }
+class HTTPServicePostRequest extends HTTPManagerPostRequest {
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BusyStateBaseComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-busy-state-base', imports: [], providers: [], animations: [FadeAnimationClass.getTrigger('busyStateBaseFade', '1s ease', '400ms ease')], template: "<div class=\"darkBg\">\r\n\r\n</div>\r\n\r\n<svg width=\"38\" height=\"38\" viewBox=\"0 0 38 38\" xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#fff\">\r\n    <g fill=\"none\" fill-rule=\"evenodd\">\r\n        <g transform=\"translate(1 1)\" stroke-width=\"1\">\r\n            <circle stroke-opacity=\".2\" cx=\"18\" cy=\"18\" r=\"18\"/>\r\n            <path d=\"M36 18c0-9.94-8.06-18-18-18\">\r\n                <animateTransform\r\n                    attributeName=\"transform\"\r\n                    type=\"rotate\"\r\n                    from=\"0 18 18\"\r\n                    to=\"360 18 18\"\r\n                    dur=\"1s\"\r\n                    repeatCount=\"indefinite\"/>\r\n            </path>\r\n        </g>\r\n    </g>\r\n</svg>\r\n", styles: [":host{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999999999}.darkBg{position:absolute;cursor:progress;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#00000096;animation-name:bgfadein;animation-duration:30s;animation-timing-function:ease}svg{z-index:5000;width:40%;height:40%;max-width:130px;max-height:130px;animation-name:loadingfadein;animation-duration:3s;animation-timing-function:ease-in}@keyframes loadingfadein{0%{opacity:0}25%{opacity:0}to{opacity:1}}@keyframes bgfadein{0%{opacity:0}4%{opacity:0}14%{opacity:.2}35%{opacity:.5}to{opacity:1}}\n"] }]
-        }], propDecorators: { busyStateBaseFade: [{
-                type: HostBinding,
-                args: ['@busyStateBaseFade']
-            }] } });
 
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
@@ -1032,26 +1076,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
  */
 /**
- * A dialog component with a calendar that allows us to select a single date value
+ * An abstraction of the browser entity an all its related operations and properties
  */
-class DialogDateSelectionComponent extends DialogBaseComponent {
-    static { this.DIALOG_CLASS_NAME = 'DialogDateSelectionComponent'; }
-    constructor(elementRef, dialogRef, data) {
-        super(elementRef, dialogRef);
-        this.elementRef = elementRef;
-        this.dialogRef = dialogRef;
-        this.data = data;
+class BrowserService extends BrowserManager {
+    constructor(location) {
+        super();
+        this.location = location;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogDateSelectionComponent, deps: [{ token: i0.ElementRef }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogDateSelectionComponent, isStandalone: true, selector: "tg-dialog-date-selection", providers: [], usesInheritance: true, ngImport: i0, template: "<h2>{{data.texts[0]}}</h2>\r\n\r\n<mat-calendar #calendar\r\n    (selectedChange)=\"closeDialog(0, $event)\">\r\n</mat-calendar>", styles: [":host{position:relative;min-height:300px}h1{margin-top:0;margin-bottom:25px;width:82%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
+    /**
+     * Modify the current browser URI without reloading the current page document
+     *
+     * @param path The uri value we want to set
+     * @param query The query url parameters part we want to specify if any
+     *
+     * @returns void
+     */
+    setCurrentUrlURI(path, query) {
+        this.location.go(path, query);
+    }
+    /**
+     * Obtain a subscription to get notified on any changes at the browser url
+     *
+     * @param onNext A method to be executed every time the url changes on the browser. The url will be available inside the value parameter
+     *
+     * @returns Subscribed events. Make sure to unsubscribe when not needed
+     */
+    subscribeToUrlChange(onNext) {
+        return this.location.subscribe(onNext);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrowserService, deps: [{ token: i2.Location }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrowserService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogDateSelectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-dialog-date-selection', imports: [CommonModule, MatDatepickerModule, MatNativeDateModule], providers: [], template: "<h2>{{data.texts[0]}}</h2>\r\n\r\n<mat-calendar #calendar\r\n    (selectedChange)=\"closeDialog(0, $event)\">\r\n</mat-calendar>", styles: [":host{position:relative;min-height:300px}h1{margin-top:0;margin-bottom:25px;width:82%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrowserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i2.Location }] });
 
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
@@ -1062,489 +1123,428 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
  */
 /**
- * Manages the application modal and non modal floating elements
+ * Allows us to easily perform requests to a remote API that is developed with Turbo framework.
  */
-class DialogService extends SingletoneStrictClass {
-    constructor(rendererFactory, matSnackBar, matDialog, injector, applicationRef, componentFactoryResolver) {
-        super(DialogService);
-        this.matSnackBar = matSnackBar;
-        this.matDialog = matDialog;
-        this.injector = injector;
-        this.applicationRef = applicationRef;
-        this.componentFactoryResolver = componentFactoryResolver;
-        /**
-         * Used to modify the busy state component that is shown by default by the addModalBusyState() method.
-         *
-         * @see this.addModalBusyState()
-         */
-        this.customBusyStateComponentClass = BusyStateBaseComponent;
-        /**
-         * Check public getter for docs
-         */
-        this._isEnabled = true;
+class TurboApiCallerService extends SingletoneStrictClass {
+    constructor(dialogService, browserService) {
+        super(TurboApiCallerService);
+        this.dialogService = dialogService;
+        this.browserService = browserService;
         /**
-         * Tells if the main application is currently showing a busy state that blocks all user interaction
+         * URI Path to the web service that performs the user login
          */
-        this._isShowingBusyState = false;
+        this.loginServiceURI = 'users/login';
         /**
-         * A reference to the modal busy state component that is initialized only the first time it is called.
-         *
-         * (To append the busy state dynamically, we use the Portal concept from the angular material library)
+         * URI Path to the web service that allows us to create extra user tokens
          */
-        this._componentPortal = null;
+        this.tokenCreationServiceURI = 'users/user-token-create';
         /**
-         * A reference to the modal busy state container where the component will be added
+         * URI Path to the web service that performs the user log out
          */
-        this._modalBusyStateHost = null;
+        this.logOutServiceURI = 'users/logout';
         /**
-         * Tells if the manager is currently showing a snackbar element or not
+         * URI Path to the web service that performs the verification for a user email
          */
-        this._isShowingSnackBar = false;
+        this.mailVerifyServiceURI = 'users/user-mail-verify';
         /**
-         * Contains a list of the dialogs that are currently visible to the user.
-         * Each item in this list is a hash that is computed when dialog is created to uniquely identify it.
-         *
-         * Empty list means no dialogs are currently visible
+         * The username that is currently defined and will be used by the login methods
          */
-        this._activeDialogs = [];
+        this._userName = '';
         /**
-         * Contains a list with all the MatDialog instances that are currently visible to the user.
-         * The list uses the same order as the list of _activeDialogs hash values
+         * The password for the user that is currently defined and will be used by the login methods
          */
-        this._activeDialogInstances = [];
+        this._password = '';
         /**
-         * Method that is used to delete the window beforeunload event listener once not used anymore
+         * Contains the last email account that has been verified (or tried to verify) by this service, if any
          */
-        this._windowBeforeUnloadUnListen = null;
+        this._lastVerifiedMail = '';
         /**
-         * Method that is used to delete the document keydown event listener once not used anymore
+         * Check public getter for docs
          */
-        this._documentKeydownUnlisten = null;
+        this._isLogged = false;
         /**
-         * Method that is used to delete the document mousedown event listener once not used anymore
+         * @see token() getter for more info
          */
-        this._documentMousedownUnlisten = null;
+        this._token = '';
         /**
-         * Method that is used to delete the document pointerdown event listener once not used anymore
-         */
-        this._documentPointerdownUnlisten = null;
-        this._renderer = rendererFactory.createRenderer(null, null);
-    }
-    /**
-     * Tells if this dialog service is enabled or not. If dialog service is disabled, none of it's features will work
-     * This is used to block all dialog features normally when shutting down the application
-     *
-     * Use with caution. When this is set to false, dialog service stops working.
-     */
-    set isEnabled(v) {
-        if (v === this._isEnabled) {
-            return;
-        }
-        this._isEnabled = v;
-    }
-    /**
-     * Enables a warning that will be shown to the user when he/she tries to close the application.
-     * This warning will prompt the user to continue with the exit process or cancel it.
-     * The specific texts of this message are a generic ones and cannot be changed.
-     *
-     * IMPORTANT: This method must be called after the main application has been initialized in order to work,
-     * otherwise it will do nothing.
-     */
-    addCloseApplicationWarning() {
-        if (this._windowBeforeUnloadUnListen === null) {
-            this._windowBeforeUnloadUnListen = this._renderer.listen('window', 'beforeunload', (event) => event.returnValue = true);
-        }
-    }
-    /**
-     * Remove the close application warning message if previously assigned
-     */
-    removeCloseApplicationWarning() {
-        if (this._windowBeforeUnloadUnListen !== null) {
-            this._windowBeforeUnloadUnListen();
-            this._windowBeforeUnloadUnListen = null;
-        }
-    }
-    /**
-     * Change the application visual appearance so the user perceives that the application is
-     * currently busy. While modal busy state is enabled, no user input is possible neither via
-     * keyboard, mouse or touch. Use this state when performing server requests or operations that
-     * must block the user interaction with the application. To allow user interaction again, you must
-     * call removeModalBusyState()
-     *
-     * Notice: We can modify the busy state visual component that is shown by this method. To do it, we must
-     * set this.customBusyStateComponentClass property with our own custom busy state component class. (We can do it at
-     * our main application component constructor for example). Our custom component must extend the
-     * BusyStateBaseComponent one to add its own visual appearance.
-     *
-     * @see this.customBusyStateComponentClass
-     */
-    addModalBusyState() {
-        if (!this._isEnabled || this._isShowingBusyState) {
-            return;
-        }
-        this._disableUserInteraction();
-        // Dynamically create the busy state component reference if this is the first time
-        if (this._componentPortal === null) {
-            this._componentPortal = new ComponentPortal(this.customBusyStateComponentClass);
-            // Create a PortalHost with document.body as its anchor element
-            this._modalBusyStateHost = new DomPortalOutlet(document.body, this.componentFactoryResolver, this.applicationRef, this.injector);
-        }
-        this._modalBusyStateHost.attach(this._componentPortal);
-        this._isShowingBusyState = true;
+         * List of operations that are allowed to the currently loged user. It gets filled just after login is performed
+         */
+        this._operations = [];
+        // Create a fresh instance of the http service so we can use it independently
+        this.httpManager = new HTTPManager();
+        this._clearUserAndToken();
     }
     /**
-     * Tells if the application is currently locked in a modal busy state (caused by an addModalBusyState() call)
+     * The username that is currently defined and will be used by the login methods
      */
-    get isShowingBusyState() {
-        return this._isShowingBusyState;
+    set userName(v) {
+        this._isLogged = false;
+        this._token = '';
+        this._userName = v;
     }
     /**
-     * Cancel the application busy state and restore it back to normal so user interaction is allowed again
+     * The username that is currently defined and will be used by the login methods
      */
-    removeModalBusyState() {
-        if (!this._isEnabled || !this._isShowingBusyState) {
-            return;
-        }
-        if (this._componentPortal !== null) {
-            this._modalBusyStateHost.detach();
-        }
-        this._enableUserInteraction();
-        this._isShowingBusyState = false;
+    get userName() {
+        return this._userName;
     }
     /**
-     * TODO - adapt from TS version
+     * The password for the user that is currently defined and will be used by the login methods
      */
-    addToolTip() {
-        // TODO - adapt from TS version
+    set password(v) {
+        this._isLogged = false;
+        this._token = '';
+        this._password = v;
     }
     /**
-     * Show a non modal snackbar notification to the user (Only one snack-bar can ever be opened at the same time).
-     *
-     * Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom or top of the screen.
-     * They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
-     *
-     * @param config A MatSnackBarConfig instance with the customizations we want for this snackbar
-     * @param message The message to show on the snackbar
-     * @param action If not empty, the text to place on the snackbar confirmation button
-     * @param actionCallback A method to execute once the user clicks into the action button.
-     *
-     * @return void
+     * The password for the user that is currently defined and will be used by the login methods
      */
-    addSnackBar(config, message, action = '', actionCallback = null) {
-        if (!this._isEnabled) {
-            return;
-        }
-        if (this._isShowingSnackBar) {
-            throw new Error('Trying to show a snackbar while another one is still visible');
-        }
-        this._isShowingSnackBar = true;
-        const snackBarRef = this.matSnackBar.open(message, action === '' ? undefined : action, config);
-        if (actionCallback !== null) {
-            snackBarRef.onAction().subscribe(() => {
-                actionCallback();
-            });
-        }
+    get password() {
+        return this._password;
     }
     /**
-     * Tells if the application is currently showing a snackbar or not
+     * Define the root url that will be used for all the API calls
      */
-    get isShowingSnackBar() {
-        return this._isShowingSnackBar;
+    set baseUrl(url) {
+        this.httpManager.baseUrl = url;
     }
     /**
-     * Force the removal of the snack bar dialog if it exists.
-     *
-     * If no snackbar is currently visible, this method will do nothing
+     * Define the root url that will be used for all the API calls
      */
-    removeSnackBar() {
-        if (!this._isEnabled || !this._isShowingSnackBar) {
-            return;
-        }
-        this.matSnackBar.dismiss();
-        this._isShowingSnackBar = false;
+    get baseUrl() {
+        return this.httpManager.baseUrl;
     }
     /**
-     * Show a dialog with one or more options that can be used to close it. We can use any of the predefined dialog types that are bundled with
-     * this library or extend DialogBaseComponent to create our own custom ones.
+     * If the current browser URL contains a hash fragment (The part after the # character) that contains encoded user or password
+     * values, this method will parse and automatically set them as the credentials to use.
      *
-     * @param dialogComponentClass A class for a component that extends DialogBaseComponent, which will be the dialog that is shown to the user.
-     * @param properties An object containing the different visual and textual options that this dialog allows:
-     *            - id: The html unique identifier that the dialog will have once created. If not specified, no id will be explicitly set
-     *            - width: 50% by default. Specify the css value for the default dialog width. As the dialog is responsive, the value will be automatically
-     *              reduced if the available screen is not enough, and will reach the desired value otherwise. We can set any css unit like pixels,
-     *              %, vh, vw, or any other. For example: '400px', '50%', etc.
-     *            - maxWidth: Defines the maximum width that the dialog will have regarding the viewport. We can specify it in % or vw, just like is done in
-     *              css. By default it is defined as 96vw, which will fit 96% of the viewport on small devices
-     *            - height: TODO docs
-     *            - maxHeight: TODO docs
-     *            - modal: True (default) if selecting an option is mandatory to close the dialog, false if the dialog can be closed
-     *              by the user clicking outside it
-     *            - texts: A list with strings containing the dialog texts, sorted by importance. When dialog has a title, this should
-     *              be placed first, subtitle second and so (Each dialog may accept a different custom number of texts).
-     *            - options: A list of strings that will be used as button captions for each one of the accepted dialog options
-     *            - data: An object that we can use to pass any extra data that we want to the dialog
-     *            - viewContainerRef: This is important if we want to propagate providers from a parent component to this dialog. We must specify
-     *              this reference to make sure the same services injected on the parent are available too at the child dialog
+     * The URL hash is not altered in any way by this method.
      *
-     * @param callback A function that will be called after the dialog is closed. It will receive a selection object with two properties: index and value. Those
-     *        will contain the index and value from the options array that's selected by the user. if no option selected, index will be -1 and value null
+     * @returns True if any credentials were found and loaded, false if nothing happened
      */
-    addDialog(dialogComponentClass, properties, callback = null) {
-        if (!this._isEnabled) {
-            return;
+    loadCredentialsFromURLHashFragment() {
+        // If the hash fragment is empty, nothing to do
+        if (!this.browserService.isCurrentUrlWithHashFragment()) {
+            return false;
         }
-        // Set the default values for non specified properties
-        properties.modal = properties.modal ?? true;
-        properties.texts = properties.texts ?? [];
-        properties.options = properties.options ?? [];
-        properties.data = properties.data ?? {};
-        // Generate a string to uniquely identify this dialog on the list of active dialogs
-        // A dialog is considered as unique if the dialog id and texts are exactly the same. We do not take options into consideration
-        // as there may be dialogs with a big amount of options available.
-        let className = dialogComponentClass.DIALOG_CLASS_NAME;
-        if (className === '') {
-            throw new Error(`The static property DIALOG_CLASS_NAME is not defined or is empty for this dialog component (${dialogComponentClass})`);
-        }
-        const dialogHash = className + properties.texts.join('');
-        // identical dialogs won't be allowed at the same time
-        if (this._activeDialogs.includes(dialogHash)) {
-            return;
+        let valuesFound = false;
+        // Split the hash fragment to obtain the different values that contains
+        let hashData = this.browserService.getCurrentUrlHashFragment().split('/');
+        // User name is the first element of the hash fragment. If we found a value, 
+        // we will fill it automatically
+        if (hashData.length > 0) {
+            valuesFound = true;
+            this.userName = ConversionUtils.base64ToString(hashData[0]);
         }
-        const dialogRef = this.matDialog.open(dialogComponentClass, {
-            width: properties.width ?? "50%",
-            maxWidth: properties.maxWidth ?? "96vw",
-            disableClose: properties.modal,
-            autoFocus: false,
-            closeOnNavigation: !properties.modal,
-            viewContainerRef: properties.viewContainerRef,
-            data: { texts: properties.texts, options: properties.options, data: properties.data }
-        });
-        // Assign the dialog ID only if specifically set on properties
-        if (properties.id && properties.id !== undefined) {
-            dialogRef.id = properties.id;
-        }
-        this._activeDialogs.push(dialogHash);
-        this._activeDialogInstances.push(dialogRef);
-        dialogRef.beforeClosed().subscribe((selection) => {
-            this._activeDialogs = ArrayUtils.removeElement(this._activeDialogs, dialogHash);
-            this._activeDialogInstances = ArrayUtils.removeElement(this._activeDialogInstances, dialogRef);
-            if (!properties.modal && selection === undefined) {
-                selection = { index: -1 };
-            }
-            else if (!NumericUtils.isInteger(selection.index)) {
-                throw new Error(`closeDialog() expects index to be an integer`);
-            }
-            if (callback !== null) {
-                if (selection.index >= 0 && selection.value === null) {
-                    selection.value = properties.options[selection.index];
+        // Auto fill the password if it is received
+        if (hashData.length > 3) {
+            valuesFound = true;
+            this.password = ConversionUtils.base64ToString(hashData[3]);
+        }
+        return valuesFound;
+    }
+    /**
+     * If the current browser URL contains a hash fragment (The part after the # character) that contains encoded user, mail and
+     * has verification code values, this method will perform the request to server to verify that email account for the user.
+     *
+     * The URI path to the mail verification service must be correctly defined at this.mailVerifyServiceURI property.
+     *
+     * @returns A promise that resolves with the server response if the verification is successful,
+     *          or rejects with an error if the verification fails. Response will have 4 possible values:
+     *               undefined - meaning that the URL hash fragment didn't contain valid verification values
+     *              -1 - meaning verification failed
+     *               0 - meaning verification succeeded
+     *               1 - meaning the email was already previouly verified
+     */
+    verifyUserMailFromURLHashFragment() {
+        // If the hash fragment is empty, nothing to do
+        if (this.browserService.isCurrentUrlWithHashFragment()) {
+            let hashData = this.browserService.getCurrentUrlHashFragment().split('/');
+            if (hashData.length >= 3) {
+                // Call for the user mail verification if user, mail and hash are received
+                let user = ConversionUtils.base64ToString(hashData[0]);
+                let mail = ConversionUtils.base64ToString(hashData[1]);
+                let hash = ConversionUtils.base64ToString(hashData[2]);
+                if (!StringUtils.isEmpty(user) && !StringUtils.isEmpty(mail) && !StringUtils.isEmpty(hash)) {
+                    this._lastVerifiedMail = mail;
+                    return this.call(this.mailVerifyServiceURI, { userName: user, mail: mail, hash: hash });
                 }
-                callback(selection);
             }
-        });
+        }
+        return Promise.resolve(undefined);
     }
     /**
-     * Show a dialog with a calendar to let the user pick a date.
+     * Obtain the lat user mail account that has been verified (or attempted to verify) by this service.
+     */
+    getLastVerifiedMail() {
+        return this._lastVerifiedMail;
+    }
+    /**
+     * Authenticates the userName and password that are currently defined at the respective properties of this service.
+     * Returns a promise that resolves with the server's response or rejects with an error if the login fails.
+     * Path to the login service must be correctly defined at this.loginWebService
      *
-     * @param properties An object containing the different visual and textual options that this dialog allows:
-     *            - id: The html unique identifier that the dialog will have once created. If not specified, no id will be explicitly set
-     *            - width: Specify the css value for the default dialog width. As the dialog is responsive, the value will be automatically
-     *              reduced if the available screen is not enough, and will reach the desired value otherwise. We can set any css unit like pixels,
-     *              %, vh, vw, or any other. For example: '400px', '50%', etc.
-     *            - maxWidth: Defines the maximum width that the dialog will have regarding the viewport. We can specify it in % or vw, just like is done in
-     *              css. By default it is defined as 96vw, which will fit 96% of the viewport on small devices
-     *            - height: TODO docs
-     *            - maxHeight: TODO docs
-     *            - modal: True (default) if selecting an option is mandatory to close the dialog, false if the dialog can be closed
-     *              by the user clicking outside it
-     *            - title: An optional dialog title
-     *            - viewContainerRef: This is important to propagate providers from a parent component to this dialog. We must specify
-     *              this reference to make sure the same services injected on the parent are available too at the child dialog
-     * @param callback A function to be called after the dialog is closed. It will receive a Date() object selected by the user or null if no selection happened
+     * The authentication process is performed by sending an encoded credentials request to the login web service using the
+     * currently defined user name and psw.
+     *
+     * Here's an example of a call:
+     *
+     *  login().then(response => {
+     *     console.log('Login successful:', response);
+     *  }).catch(() => {
+     *     console.error('Login failed:');
+     *  });
+     *
+     * @returns A promise that resolves with the server response if the login is successful,
+     *          or rejects with an error if the login fails.
      */
-    addDateSelectionDialog(properties, callback) {
-        if (!this._isEnabled) {
-            return;
-        }
-        this.addDialog(DialogDateSelectionComponent, {
-            id: properties.id ?? undefined,
-            width: properties.width ?? "50%",
-            maxWidth: properties.maxWidth ?? "96vw",
-            height: properties.height ?? "50%",
-            maxHeight: properties.maxHeight ?? "92vw",
-            modal: properties.modal ?? false,
-            texts: [properties.title ?? ''],
-            viewContainerRef: properties.viewContainerRef
-        }, (selection) => {
-            callback(selection.index === -1 ? null : selection.value);
+    login() {
+        this.dialogService.addModalBusyState();
+        return new Promise((resolve, reject) => {
+            const request = new HTTPManagerPostRequest(this.loginServiceURI);
+            request.ignoreGlobalPostParams = true;
+            const encodedCredentials = ConversionUtils.stringToBase64(ConversionUtils.stringToBase64(this._userName) + ',' + ConversionUtils.stringToBase64(this._password));
+            request.parameters = { data: encodedCredentials };
+            request.successCallback = (response) => {
+                if (response !== '') {
+                    response = JSON.parse(response);
+                    this._isLogged = true;
+                    this._token = response.token;
+                    this._operations = response.operations;
+                    this.httpManager.setGlobalPostParam('token', response.token);
+                    resolve(response);
+                }
+                else {
+                    this._clearUserAndToken();
+                    reject(new Error());
+                }
+            };
+            request.errorCallback = () => {
+                this._clearUserAndToken();
+                reject(new Error());
+            };
+            request.finallyCallback = () => {
+                this.dialogService.removeModalBusyState();
+            };
+            this.httpManager.execute(request);
         });
     }
     /**
-     * Force the removal of all the dialogs that are currently visible.
+     * Perform a request to the API service to create a new token for the user that is currently logged in.
      *
-     * If no dialogs are currently visible, this method will do nothing
+     * @param options The parameters that will affect the token behaviour. To learn more about each option, please
+     *        refer to the turbodepot UsersManager class createToken method documentation
+     *
+     * @returns A promise that resolves with the created token string if the request is successful, or rejects
+     *          with an error (containing all the error response details) if the request fails.
      */
-    removeAllDialogs() {
-        if (!this._isEnabled) {
-            return;
-        }
-        for (const dialogRef of this._activeDialogInstances) {
-            dialogRef.close({ index: -1 });
-        }
-        this._activeDialogs = [];
-        this._activeDialogInstances = [];
+    createUserToken(options) {
+        return this.call(this.tokenCreationServiceURI, { options: options }, { resultFormat: 'STRING' });
     }
     /**
-     * TODO - translate from TS version
+     * Checks if the user and password credentials are filled and not empty.
+     * If any of the two values is empty, false will be returned
      */
-    //    addSideNav(){
-    //
-    //    }
+    get isUserAndPswDefined() {
+        return !StringUtils.isEmpty(this._userName) && !StringUtils.isEmpty(this._password);
+    }
     /**
-     * TODO - translate from TS version
+     * Tells if the user name and psw that are specified on this service are currently logged or not. This means
+     * also a token is active.
      */
-    //    get isShowingSideNav(){
-    //
-    //    }
+    get isLogged() {
+        return this._isLogged;
+    }
     /**
-     * TODO - translate from TS version
+     * Gives the value for the currently active user authentication token or an empty string if no user logged
      */
-    //    removeSideNav(){
-    //
-    //    }
+    get token() {
+        return this._token;
+    }
     /**
-     * Block all the user interactions with the application (keyboard, touch, mouse, ...)
+     * Checks if the currently logged user is allowed to perform the specified operation.
+     * This will check the user permisions as defined on server side and return true if the operation is allowed
+     * or false if not. We can then decide what to do (hide an app section, block a button, etc)
+     *
+     * @param operation The name of the operation to check
+     *
+     * @returns True if the operation is allowed, false otherwise
      */
-    _disableUserInteraction() {
-        if (this._documentKeydownUnlisten === null) {
-            this._documentKeydownUnlisten = this._renderer.listen('document', 'keydown', (event) => event.preventDefault());
-        }
-        if (this._documentMousedownUnlisten === null) {
-            this._documentMousedownUnlisten = this._renderer.listen('document', 'mousedown', (event) => event.preventDefault());
-        }
-        if (this._documentPointerdownUnlisten === null) {
-            this._documentPointerdownUnlisten = this._renderer.listen('document', 'pointerdown', (event) => event.preventDefault());
-        }
+    isUserAllowedTo(operation) {
+        return this._operations.includes(operation);
     }
     /**
-     * Restore the user interactions that were previously disabled with _disableUserInteraction method
+     * Performs a standard request to an API service and returns a promise that resolves with the response data.
+     *
+     * Following is an example of a call:
+     *
+     *     this.apiService.call('users/user-create', this.userData, {handleErrors: false}).then(response => {
+     *
+     *          console.log('Success:', response);
+     *
+     *      }).catch(error => {
+     *
+     *          console.error('Error:', error.message);
+     *      });
+     *
+     * @param apiPath - A relative URL (based on the defined base root url) that defines the path to the service to call.
+     *        For example: 'users/login'
+     * @param parameters - An object containing key-value pairs that are sent as the request body.
+     *        token parameter is not necessary, it is automatically appended
+     * @param options An object defining several options for the request:
+     *        resultFormat: 'JSON' by default. The expected format of the response.
+     *        busyState: Enabled by default. Enables or disables the busy state to lock user interaction while performing the http calls.
+     *        handleErrors: Enabled by default. If set to true, an error dialog will be automatically shown when the call fails.
+     *        If set to false, the promise will generate a reject error that must be handled by our code.
+     *
+     * @returns A promise that resolves with the response data correctly parsed if the request is successful, or rejects
+     *          with an error (containing all the error response details) if the request fails.
      */
-    _enableUserInteraction() {
-        if (this._documentKeydownUnlisten !== null) {
-            this._documentKeydownUnlisten();
-            this._documentKeydownUnlisten = null;
-        }
-        if (this._documentMousedownUnlisten !== null) {
-            this._documentMousedownUnlisten();
-            this._documentMousedownUnlisten = null;
-        }
-        if (this._documentPointerdownUnlisten !== null) {
-            this._documentPointerdownUnlisten();
-            this._documentMousedownUnlisten = null;
+    call(apiPath, parameters = {}, options = {}) {
+        // Set the default values for non specified properties
+        options.resultFormat = options.resultFormat ?? 'JSON';
+        options.busyState = options.busyState ?? true;
+        options.handleErrors = options.handleErrors ?? true;
+        if (options.busyState) {
+            this.dialogService.addModalBusyState();
         }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogService, deps: [{ token: i0.RendererFactory2 }, { token: i1$1.MatSnackBar }, { token: i1.MatDialog }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: i1$1.MatSnackBar }, { type: i1.MatDialog }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }] });
-
-/**
- * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
- *
- * Website : -> http://www.turbogui.org
- * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
- * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
- * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
- */
-/**
- * Manages application http communications
- */
-class HTTPService extends HTTPManager {
-    constructor(dialogService) {
-        super(true);
-        this.dialogService = dialogService;
+        return new Promise((resolve, reject) => {
+            // Create the request object
+            const request = new HTTPManagerPostRequest(apiPath, options.resultFormat === 'STRING' ? HTTPManagerPostRequest.STRING : HTTPManagerPostRequest.JSON);
+            request.parameters = parameters;
+            request.successCallback = (response) => {
+                resolve(response);
+            };
+            request.errorCallback = (errorMsg, errorCode, response) => {
+                if (options.handleErrors) {
+                    this.showErrorDialog(errorMsg, errorCode, response);
+                }
+                else {
+                    reject(new Error(errorMsg + ' ' + errorCode + ' ' + response));
+                }
+            };
+            request.finallyCallback = () => {
+                if (options.busyState) {
+                    this.dialogService.removeModalBusyState();
+                }
+            };
+            this.httpManager.execute(request);
+        });
     }
     /**
-     * The same method as HTTPManager.execute but with the ability to enable several options which are specific to this service:
+     * Performs a request to chain several api calls into a single http request, via the chain services mechanism of the turboframework API.
+     * Returns a promise that resolves with an array of response objects. One for each of the request calls.
      *
-     * - options:
-     *     busyState: Set it to false to prevent the default behaviour of locking the UI while the request is running
-     *     handleErrors: Set it to false to prevent the default behaviour of showing a detailed error dialog when a request fails
+     * @param apiPath - A relative URL (based on the defined base root url) that defines the path to the root of the chain services call.
+     *        For example: 'turbosite/chain/chain-services'
+     * @param services - An array of objects, were each object contains a valid structure for the chain services call.
+     *        Token parameter is not necessary, it is automatically appended
+     * @param options An object defining several options for the request:
+     *        busyState: Enables or disables the busy state to lock user interaction while performing the http calls. Enabled by default
+     *        handleErrors: Enabled by default. If set to true, an error dialog will be automatically shown when the call fails.
+     *        If set to false, the promise will generate a reject error that must be handled by our code.
      *
-     * @see HTTPManager.execute()
+     * @returns A promise that resolves with the response data correctly parsed if the request is successful, or rejects
+     *          with an error (containing all the error response details) if the request fails.
      */
-    execute(requests, finishedCallback = null, progressCallback = null, options = {}) {
+    callChain(apiPath, services, options = {}) {
         // Set the default values for non specified properties
         options.busyState = options.busyState ?? true;
         options.handleErrors = options.handleErrors ?? true;
         if (options.busyState) {
             this.dialogService.addModalBusyState();
         }
-        super.execute(requests, (results, anyError) => {
-            if (options.busyState) {
-                this.dialogService.removeModalBusyState();
-            }
-            if (options.handleErrors && anyError) {
-                for (let result of results) {
-                    if (result.isError) {
-                        let errorMsg = result.errorMsg + '\n\n' + result.response;
-                        if (StringUtils.isEmpty(errorMsg)) {
-                            errorMsg = 'Unknown error. Make sure Internet connection is available';
-                        }
-                        this.dialogService.addDialog(DialogErrorComponent, {
-                            width: '50vw',
-                            texts: ['Error: ' + result.code, errorMsg],
-                            options: ['Ok']
-                        });
-                    }
+        return new Promise((resolve, reject) => {
+            const request = new HTTPManagerPostRequest(apiPath, HTTPManagerPostRequest.JSON);
+            request.ignoreGlobalPostParams = true;
+            request.parameters = { services: services };
+            request.successCallback = (response) => {
+                resolve(response);
+            };
+            request.errorCallback = (errorMsg, errorCode, response) => {
+                if (options.handleErrors) {
+                    this.showErrorDialog(errorMsg, errorCode, response);
                 }
-            }
-            if (finishedCallback !== null) {
-                finishedCallback(results, anyError);
-            }
-        }, progressCallback);
+                else {
+                    reject(new Error(errorMsg + ' ' + errorCode + ' ' + response));
+                }
+            };
+            request.finallyCallback = () => {
+                if (options.busyState) {
+                    this.dialogService.removeModalBusyState();
+                }
+            };
+            this.httpManager.execute(request);
+        });
+    }
+    /**
+     * Aux method to show an error dialog when a request fails and error handling is enabled
+     */
+    showErrorDialog(errorMsg, errorCode, response) {
+        errorMsg = errorMsg + '\n\n' + response;
+        if (StringUtils.isEmpty(errorMsg)) {
+            errorMsg = 'Unknown error. Make sure Internet connection is available';
+        }
+        this.dialogService.addDialog(DialogErrorComponent, {
+            width: '50vw',
+            texts: ['Error: ' + errorCode, errorMsg],
+            options: ['Ok']
+        });
+    }
+    /**
+     * Perform the logout for the currently logged user
+     *
+     * @param options An object defining several options for the request:
+     *        handleErrors: Enabled by default. If set to true, an error dialog will be automatically shown when the call fails.
+     *        If set to false, the promise will generate a reject error that must be handled by our code.
+     *
+     * @returns A promise that resolves correctly if the logout is correct, or rejects with an error (containing all the error
+     *          response details) if the request fails.
+     */
+    logout(options = {}) {
+        // Set the default values for non specified properties
+        options.handleErrors = options.handleErrors ?? true;
+        this.dialogService.addModalBusyState();
+        return new Promise((resolve, reject) => {
+            const request = new HTTPManagerPostRequest(this.logOutServiceURI);
+            request.parameters = { token: this._token };
+            request.successCallback = () => {
+                this._clearUserAndToken();
+                resolve(undefined);
+            };
+            request.errorCallback = (errorMsg, errorCode, response) => {
+                if (options.handleErrors) {
+                    this.showErrorDialog(errorMsg, errorCode, response);
+                }
+                else {
+                    reject(new Error(errorMsg + ' ' + errorCode + ' ' + response));
+                }
+            };
+            request.finallyCallback = () => {
+                this.dialogService.removeModalBusyState();
+            };
+            this.httpManager.execute(request);
+        });
+    }
+    /**
+     * Aux methot to clear all the currently logged user data
+     */
+    _clearUserAndToken() {
+        this._userName = '';
+        this._password = '';
+        this._isLogged = false;
+        this._token = '';
+        this.httpManager.setGlobalPostParam('token', '-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: HTTPService, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: HTTPService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiCallerService, deps: [{ token: DialogService }, { token: BrowserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiCallerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: HTTPService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiCallerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: DialogService }] });
-
-/**
- * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
- *
- * Website : -> http://www.turbogui.org
- * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
- * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
- * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
- */
-/**
- * Class that defines a GET http request, to be used by HttpService
- */
-class HTTPServiceGetRequest extends HTTPManagerGetRequest {
-}
-
-/**
- * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
- *
- * Website : -> http://www.turbogui.org
- * License : -> Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License.
- * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
- * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
- */
-/**
- * Class that defines a POST http request, to be used by HttpService
- */
-class HTTPServicePostRequest extends HTTPManagerPostRequest {
-}
+        }], ctorParameters: () => [{ type: DialogService }, { type: BrowserService }] });
 
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
@@ -1555,43 +1555,122 @@ class HTTPServicePostRequest extends HTTPManagerPostRequest {
  * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
  */
 /**
- * An abstraction of the browser entity an all its related operations and properties
+ * Global service that helps with application routing and related functionalities.
+ * It is defined as an abstract class so it must be extended in our application to be used.
+ * We must declare a static array of routes that will be used to define the routes of the application.
  */
-class BrowserService extends BrowserManager {
-    constructor(location) {
-        super();
-        this.location = location;
+class RouterBaseService {
+    constructor(router, titleService) {
+        this.router = router;
+        this.titleService = titleService;
+        /**
+         * Indicates whether the title manager has been initialized.
+         * This should only be done once, typically at application startup.
+         */
+        this._isTitleManagerInitialized = false;
+        /**
+         * BehaviorSubject that holds the current route URL.
+         * This allows components to reactively subscribe to route changes.
+         */
+        this._currentRoute = new BehaviorSubject(this.router.url);
+        // Initial update in case the service loads after the first NavigationEnd
+        this._updateCurrentRoute();
     }
     /**
-     * Modify the current browser URI without reloading the current page document
+     * Updates the current route URL in the BehaviorSubject.
+     * This is called internally after each navigation event.
+     */
+    _updateCurrentRoute() {
+        this._currentRoute.next(this.router.url);
+    }
+    /**
+     * Checks if the current route matches the specified route.
      *
-     * @param path The uri value we want to set
-     * @param query The query url parameters part we want to specify if any
+     * @param route The route to check against the current route.
      *
-     * @returns void
+     * @returns True if we are actually at the specified route, false otherwise.
      */
-    setCurrentUrlURI(path, query) {
-        this.location.go(path, query);
+    isRouteCurrent(route) {
+        return this.getCurrentRoute() === '/' + route;
     }
     /**
-     * Obtain a subscription to get notified on any changes at the browser url
+     * Gets the current value of the route URL synchronously.
+     */
+    getCurrentRoute() {
+        return this._currentRoute.getValue();
+    }
+    /**
+     * Initializes the title management feature to automatically refresh the browser title based on the current
+     * URL route. It Must be called once, typically at application startup
      *
-     * @param onNext A method to be executed every time the url changes on the browser. The url will be available inside the value parameter
+     * To correctly translate the route title, We expect the route definitions to have the following properties:
      *
-     * @returns Subscribed events. Make sure to unsubscribe when not needed
+     * - titleKey: The key to be used to get the title from the translation bundle.
+     * - titleBundle: The bundle to be used to get the title from the translation bundle.
+     *
+     * (Translations will be done using the LocalesService from this same library).
+     *
+     * Example of a Route using this feature:
+     *   // Home route
+     *   { path: '', component: HomePageComponent,
+     *     data: { titleKey: 'HOME',  titleBundle: 'turbodepot/user-interface'} },
+     *
+     * @param prefix A text to be added before the computed title.
+     * @param sufix A text to be added after the computed title.
      */
-    subscribeToUrlChange(onNext) {
-        return this.location.subscribe(onNext);
+    initializeAutoTranslateTitleByRoute(localesService, prefix = '', sufix = '') {
+        this._localesService = localesService;
+        if (this._isTitleManagerInitialized) {
+            throw new Error('Title refresh from routes has already been initialized. Can only be done once.');
+        }
+        // Set initial title based on current route data immediately
+        this.updateTitleFromCurrentRoute(prefix, sufix);
+        // Subscribe to future navigation events
+        this._routerSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+            this._updateCurrentRoute();
+            this.updateTitleFromCurrentRoute(prefix, sufix);
+        });
+        this._isTitleManagerInitialized = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrowserService, deps: [{ token: i2.Location }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrowserService, providedIn: 'root' }); }
+    /**
+     * Aux method: Updates the browser title based on the current route's data properties.
+     * This is called after each navigation event to ensure the title is always up-to-date.
+     *
+     * @param prefix A text to be added before the computed title.
+     * @param sufix A text to be added after the computed title.
+     */
+    updateTitleFromCurrentRoute(prefix, sufix) {
+        let currentRoute = this.router.routerState.snapshot.root;
+        while (currentRoute.firstChild) {
+            currentRoute = currentRoute.firstChild;
+        }
+        const data = currentRoute.data;
+        if (data['titleKey'] && data['titleBundle']) {
+            this.titleService.setTitle(prefix + this._localesService.t(data['titleKey'], data['titleBundle']) + sufix);
+        }
+    }
+    /**
+     * Navigates to the specified route.
+     *
+     * @param route The route to navigate to.
+     */
+    navigateTo(route) {
+        this.router.navigate(['/' + route]);
+    }
+    ngOnDestroy() {
+        this._routerSubscription?.unsubscribe();
+        // Clean up BehaviorSubject
+        this._currentRoute.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: RouterBaseService, deps: [{ token: i1$2.Router }, { token: i2$2.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: RouterBaseService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrowserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: RouterBaseService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i2.Location }] });
+        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i2$2.Title }] });
 
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
@@ -1602,428 +1681,513 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
  */
 /**
- * Allows us to easily perform requests to a remote API that is developed with Turbo framework.
+ * Fully featured translation manager to be used with any application that requires text internationalization.
+ * It is defined as an abstract class so it must be extended in our application. This way we can
+ * write custom methods to extend the functionality of this class if needed.
  */
-class TurboApiCallerService extends SingletoneStrictClass {
-    constructor(dialogService, browserService) {
-        super(TurboApiCallerService);
-        this.dialogService = dialogService;
-        this.browserService = browserService;
-        /**
-         * URI Path to the web service that performs the user login
-         */
-        this.loginServiceURI = 'users/login';
-        /**
-         * URI Path to the web service that allows us to create extra user tokens
-         */
-        this.tokenCreationServiceURI = 'users/user-token-create';
+class LocalesBaseService {
+    constructor() {
         /**
-         * URI Path to the web service that performs the user log out
+         * if the class has been correctly initialized and translations have been correctly loaded
          */
-        this.logOutServiceURI = 'users/logout';
+        this._isInitialized = false;
         /**
-         * URI Path to the web service that performs the verification for a user email
+         * @see getLocales()
          */
-        this.mailVerifyServiceURI = 'users/user-mail-verify';
+        this._locales = [];
         /**
-         * The username that is currently defined and will be used by the login methods
+         * @see getLanguages()
          */
-        this._userName = '';
+        this._languages = [];
         /**
-         * The password for the user that is currently defined and will be used by the login methods
+         * Stores all the loaded localization data by library name, bundle name, key and locales
          */
-        this._password = '';
+        this._loadedTranslations = {};
         /**
-         * Contains the last email account that has been verified (or tried to verify) by this service, if any
+         * Stores a memory cache to improve performance when outputing translations
          */
-        this._lastVerifiedMail = '';
+        this._keyValuesCache = {};
         /**
-         * Check public getter for docs
+         * @see setWildCardsFormat()
          */
-        this._isLogged = false;
+        this._wildCardsFormat = '{N}';
         /**
-         * @see token() getter for more info
+         * @see setMissingKeyFormat()
          */
-        this._token = '';
+        this._missingKeyFormat = '$exception';
         /**
-         * List of operations that are allowed to the currently loged user. It gets filled just after login is performed
+         * Stores a hash value that is used to improve the performance for translation t() methods.
+         * This is computed based on _wildCardsFormat plus _missingKeyFormat plus the current primary locale
+         * Methods that change these values will recalculate the hash string, so when calling translation methods, the
+         * performance will be as fast as possible.
          */
-        this._operations = [];
-        // Create a fresh instance of the http service so we can use it independently
-        this.httpManager = new HTTPManager();
-        this._clearUserAndToken();
+        this._cacheHashBaseString = '';
     }
     /**
-     * The username that is currently defined and will be used by the login methods
+     * Wildcards are string fragments that are placed inside the translated texts. Their main purpose is to be replaced at
+     * runtime by custom values like for example a user name, a date, a numeric value, etc..
+     *
+     * This class helps with this process by including a parameter called 'toReplace' on all ->t methods which allows us
+     * to specify a string or list of strings that will replace the respective wildcards on the translated text. Each wildcard
+     * must follow the format specified here, and contain a numeric digit that will be used to find the replacement text at the
+     * 'toReplace' list. For example, if we define $N as the wildcard format, and we have a translation that contains $0, $1, $2,
+     * $0 will be replaced with the first element on toReplace, $1 with the second and so.
+     *
+     * We usually set this before initializing the class translation data
+     *
+     * Notice that N is mandayory on the wildcards format and the first index value is 0.
+     *
+     * @param value The wildcards format we want to set
+     *
+     * @returns The value that's been set
      */
-    set userName(v) {
-        this._isLogged = false;
-        this._token = '';
-        this._userName = v;
+    setWildCardsFormat(value) {
+        if (!value.includes('N')) {
+            throw new Error("N is mandatory to replace wildcards");
+        }
+        this._cacheHashBaseString = value + this._missingKeyFormat + ((this._locales.length > 0) ? this._locales[0] : '');
+        this._wildCardsFormat = value;
+        return value;
     }
     /**
-     * The username that is currently defined and will be used by the login methods
+     * Defines the behaviour for t(), tStartCase(), etc... methods when a key is not found on
+     * a bundle or the bundle does not exist
+     *
+     * If missingKeyFormat is an empty string, all missing keys will return an empty value (not recommended)
+     *
+     * If missingKeyFormat contains a string, that string will be always returned for missing keys
+     *
+     * If missingKeyFormat contains a string with one of the following predefined wildcards:<br>
+     *    - $key will be replaced with key name. Example: get("NAME") will output [NAME] if key is not found and missingKeyFormat = '[$key]'<br>
+     *    - $exception (default value) will throw an exception with the problem cause description.
+     *
+     * @param value The missing key format we want to set
+     *
+     * @returns The value that's been set
      */
-    get userName() {
-        return this._userName;
+    setMissingKeyFormat(value) {
+        this._cacheHashBaseString = this._wildCardsFormat + value + ((this._locales.length > 0) ? this._locales[0] : '');
+        this._missingKeyFormat = value;
+        return value;
     }
     /**
-     * The password for the user that is currently defined and will be used by the login methods
+     * @see setMissingKeyFormat()
      */
-    set password(v) {
-        this._isLogged = false;
-        this._token = '';
-        this._password = v;
+    getMissingKeyFormat() {
+        return this._missingKeyFormat;
     }
     /**
-     * The password for the user that is currently defined and will be used by the login methods
+     * Initializes the translation system by loading and parsing bundle files from the specified JSON object.
+     * After the method finishes, the class will contain all the translation data and will be ready to translate any provided key.
+     *
+     * @param translations A JSON object containing the translation data. The structure must be as follows:
+     *       { library_name: { bundle_name: { locale_code: { key1: "translation1", key2: "translation2" } } } ... }
+     *
+     * @param locales An array of locale codes (e.g., ['en_US', 'es_ES', 'fr_FR']) to load into this class. The order of this array
+     *        will determine the translation priority
+     *
+     * @return True if the translations get correctly loaded. Any unsuccessful initialization will throw an exception
+     */
+    initializeFromJson(translations, locales) {
+        this._isInitialized = false;
+        // Validate received locales are correct
+        for (const locale of locales) {
+            this._validateLocaleString(locale);
+        }
+        // Validate the translations object follows the right structure
+        let isTranslationsValid = false;
+        for (const library in translations) {
+            for (const bundle in translations[library]) {
+                for (const locale in translations[library][bundle]) {
+                    this._validateLocaleString(locale);
+                    isTranslationsValid = true;
+                }
+            }
+        }
+        if (!isTranslationsValid) {
+            throw new Error('translations must be a non empty object with the structure: { library: { bundle: { xx_XX: { key: translation } } } }');
+        }
+        this._loadedTranslations = translations;
+        this._locales = locales;
+        this._languages = locales.map((l) => l.substring(0, 2));
+        this._cacheHashBaseString = this._wildCardsFormat + this._missingKeyFormat + this._locales[0];
+        return this._isInitialized = true;
+    }
+    /**
+     * Initializes the translation system by loading and parsing bundle files from the specified translations path.
+     * After the promise finishes, the class will contain all the translation data and will be ready to translate any
+     * provided key.
+     *
+     * @param translationsPath - Url where the translations Json structure of libraries/bundles/locales/keys is available.
+     * @param locales An array of locale codes (e.g., ['en_US', 'es_ES', 'fr_FR']) to load. These will be added to the translation
+     *        path using the following format: translationsPath/en_US-es_ES-fr_FR. The order of this array will determine the
+     *        translation priority
+     * @param parameters Any extra parameters to be attached to the translationsPath after the locales like /param1/param2/ etc
+     *
+     * @return A promise that will resolve if the translations get correctly loaded, or reject with an error if load fails
+     */
+    initializeFromUrl(translationsPath, locales, parameters) {
+        this._isInitialized = false;
+        const translationsFullPath = translationsPath + '/' + locales.join('-') + '/' + parameters.join('/');
+        return new Promise((resolve, reject) => {
+            fetch(translationsFullPath).then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return response.json();
+            }).then(data => {
+                this.initializeFromJson(data, locales);
+                resolve(undefined);
+            }).catch(error => {
+                reject(new Error(`ERROR LOADING LOCALES FROM: ${translationsFullPath}\n` + error));
+            });
+        });
+    }
+    /**
+     * Check if the class has been correctly initialized and translations have been correctly loaded
+     */
+    isInitialized() {
+        return this._isInitialized;
+    }
+    /**
+     * Aux method to verify that this class is correctly initialized with translation data
+     */
+    _validateInitialized() {
+        if (!this._isInitialized) {
+            throw new Error('Translation service not initialized');
+        }
+    }
+    /**
+     * Checks if the specified locale is currently loaded for the currently defined bundles and paths.
+     *
+     * @param locale A locale to check. For example 'en_US'
+     *
+     * @return True if the locale is currently loaded on the class, false if not.
      */
-    get password() {
-        return this._password;
+    isLocaleLoaded(locale) {
+        this._validateLocaleString(locale);
+        return this._locales.includes(locale);
     }
     /**
-     * Define the root url that will be used for all the API calls
+     * Aux method to validate that a locale string is correctly formatted
+     *
+     * @param string $locale A locale string
      */
-    set baseUrl(url) {
-        this.httpManager.baseUrl = url;
+    _validateLocaleString(locale) {
+        if (!/^[a-z]{2}_[A-Z]{2}$/.test(locale)) {
+            throw new Error('locale must be a valid xx_XX value');
+        }
     }
     /**
-     * Define the root url that will be used for all the API calls
+     * Checks if the specified 2 digit language is currently loaded for the currently defined bundles and paths.
+     *
+     * @param language A language to check. For example 'en'
+     *
+     * @return True if the language is currently loaded on the class, false if not.
      */
-    get baseUrl() {
-        return this.httpManager.baseUrl;
+    isLanguageLoaded(language) {
+        this._validateLanguageString(language);
+        return this._languages.includes(language);
     }
     /**
-     * If the current browser URL contains a hash fragment (The part after the # character) that contains encoded user or password
-     * values, this method will parse and automatically set them as the credentials to use.
-     *
-     * The URL hash is not altered in any way by this method.
+     * Aux method to validate that a language string is correctly formatted
      *
-     * @returns True if any credentials were found and loaded, false if nothing happened
+     * @param language A 2 digit language string
      */
-    loadCredentialsFromURLHashFragment() {
-        // If the hash fragment is empty, nothing to do
-        if (!this.browserService.isCurrentUrlWithHashFragment()) {
-            return false;
-        }
-        let valuesFound = false;
-        // Split the hash fragment to obtain the different values that contains
-        let hashData = this.browserService.getCurrentUrlHashFragment().split('/');
-        // User name is the first element of the hash fragment. If we found a value, 
-        // we will fill it automatically
-        if (hashData.length > 0) {
-            valuesFound = true;
-            this.userName = ConversionUtils.base64ToString(hashData[0]);
-        }
-        // Auto fill the password if it is received
-        if (hashData.length > 3) {
-            valuesFound = true;
-            this.password = ConversionUtils.base64ToString(hashData[3]);
+    _validateLanguageString(language) {
+        if (!/^[a-z]{2}$/.test(language)) {
+            throw new Error('language must be a valid 2 digit value');
         }
-        return valuesFound;
     }
     /**
-     * If the current browser URL contains a hash fragment (The part after the # character) that contains encoded user, mail and
-     * has verification code values, this method will perform the request to server to verify that email account for the user.
+     * Get the translation to the current primary locale for the given key, library and bundle
      *
-     * The URI path to the mail verification service must be correctly defined at this.mailVerifyServiceURI property.
+     * @param string key The key we want to read from the specified resource bundle
+     * @param string bundlePath A string with the format 'library_name/bundle_name' that is used to locate the bundle were the key to translate is found
+     * @param array replaceWildcards A list of values that will replace wildcards that may be found on the translated text. Each wildcard
+     *        will be replaced with the element whose index on replaceWildcards matches it. Check the documentation for this.wildCardsFormat
+     *        property to know more about how to setup wildcards on your translations.
      *
-     * @returns A promise that resolves with the server response if the verification is successful,
-     *          or rejects with an error if the verification fails. Response will have 4 possible values:
-     *               undefined - meaning that the URL hash fragment didn't contain valid verification values
-     *              -1 - meaning verification failed
-     *               0 - meaning verification succeeded
-     *               1 - meaning the email was already previouly verified
+     * @see setWildCardsFormat()
+     *
+     * @return The translated text
      */
-    verifyUserMailFromURLHashFragment() {
-        // If the hash fragment is empty, nothing to do
-        if (this.browserService.isCurrentUrlWithHashFragment()) {
-            let hashData = this.browserService.getCurrentUrlHashFragment().split('/');
-            if (hashData.length >= 3) {
-                // Call for the user mail verification if user, mail and hash are received
-                let user = ConversionUtils.base64ToString(hashData[0]);
-                let mail = ConversionUtils.base64ToString(hashData[1]);
-                let hash = ConversionUtils.base64ToString(hashData[2]);
-                if (!StringUtils.isEmpty(user) && !StringUtils.isEmpty(mail) && !StringUtils.isEmpty(hash)) {
-                    this._lastVerifiedMail = mail;
-                    return this.call(this.mailVerifyServiceURI, { userName: user, mail: mail, hash: hash });
+    t(key, bundlePath, replaceWildcards = []) {
+        this._validateInitialized();
+        // Create a cache key to improve performance when requesting the same key translation several times
+        const cacheKey = `${this._cacheHashBaseString}${key}${bundlePath}${replaceWildcards.join('')}`;
+        if (!this._keyValuesCache[cacheKey]) {
+            this._forceNonEmptyString(key, '', 'key must be non empty string');
+            this._forceNonEmptyString(bundlePath, '', 'bundlePath must be non empty string');
+            const [library, bundle] = bundlePath.split('/');
+            this._forceNonEmptyString(library, '', 'no library specified on bundlePath');
+            this._forceNonEmptyString(bundle, '', 'no bundle specified on bundlePath');
+            const replacementsCount = replaceWildcards.length;
+            // Loop all the locales to find the first one with a value for the specified key
+            for (const locale of this._locales) {
+                if (this._loadedTranslations[library]?.[bundle]?.[locale]?.[key]) {
+                    let result = this._loadedTranslations[library][bundle][locale][key];
+                    // Replace all wildcards on the text with the specified replacements if any
+                    for (let i = 0; i < replacementsCount; i++) {
+                        result = this._replace(result, this._replace(this._wildCardsFormat, 'N', i.toString()), replaceWildcards[i]);
+                    }
+                    this._keyValuesCache[cacheKey] = result;
+                    return result;
                 }
             }
+            // Check if an exception needs to be thrown if the specified key is not found on this bundle
+            if (this._missingKeyFormat.includes('$exception')) {
+                throw new Error(`Translation key <${key}> not found on <${bundlePath}>`);
+            }
+            this._keyValuesCache[cacheKey] = this._replace(this._missingKeyFormat, '$key', key);
         }
-        return Promise.resolve(undefined);
+        return this._keyValuesCache[cacheKey];
     }
     /**
-     * Obtain the lat user mail account that has been verified (or attempted to verify) by this service.
+     * Get the translation for the given key and bundle as a string with all words first character capitalized
+     * and all the rest of the word with lower case
+     *
+     * @see t()
+     *
+     * @returns The localized and case formatted text
      */
-    getLastVerifiedMail() {
-        return this._lastVerifiedMail;
+    tStartCase(key, bundlePath, replaceWildcards = []) {
+        return this.t(key, bundlePath, replaceWildcards).split(' ')
+            .map((word) => word ? word[0].toUpperCase() + word.slice(1).toLowerCase() : '').join(' ');
     }
     /**
-     * Authenticates the userName and password that are currently defined at the respective properties of this service.
-     * Returns a promise that resolves with the server's response or rejects with an error if the login fails.
-     * Path to the login service must be correctly defined at this.loginWebService
+     * Get the translation for the given key and bundle as an all upper case string
      *
-     * The authentication process is performed by sending an encoded credentials request to the login web service using the
-     * currently defined user name and psw.
+     * @see t()
      *
-     * Here's an example of a call:
+     * @returns The localized and case formatted text
+     */
+    tAllUpperCase(key, bundlePath, replaceWildcards = []) {
+        return this.t(key, bundlePath, replaceWildcards).toUpperCase();
+    }
+    /**
+     * Get the translation for the given key and bundle as an all lower case string
      *
-     *  login().then(response => {
-     *     console.log('Login successful:', response);
-     *  }).catch(() => {
-     *     console.error('Login failed:');
-     *  });
+     * @see t()
      *
-     * @returns A promise that resolves with the server response if the login is successful,
-     *          or rejects with an error if the login fails.
+     * @returns The localized and case formatted text
      */
-    login() {
-        this.dialogService.addModalBusyState();
-        return new Promise((resolve, reject) => {
-            const request = new HTTPManagerPostRequest(this.loginServiceURI);
-            request.ignoreGlobalPostParams = true;
-            const encodedCredentials = ConversionUtils.stringToBase64(ConversionUtils.stringToBase64(this._userName) + ',' + ConversionUtils.stringToBase64(this._password));
-            request.parameters = { data: encodedCredentials };
-            request.successCallback = (response) => {
-                if (response !== '') {
-                    response = JSON.parse(response);
-                    this._isLogged = true;
-                    this._token = response.token;
-                    this._operations = response.operations;
-                    this.httpManager.setGlobalPostParam('token', response.token);
-                    resolve(response);
-                }
-                else {
-                    this._clearUserAndToken();
-                    reject(new Error());
-                }
-            };
-            request.errorCallback = () => {
-                this._clearUserAndToken();
-                reject(new Error());
-            };
-            request.finallyCallback = () => {
-                this.dialogService.removeModalBusyState();
-            };
-            this.httpManager.execute(request);
-        });
+    tAllLowerCase(key, bundlePath, replaceWildcards = []) {
+        return this.t(key, bundlePath, replaceWildcards).toLowerCase();
     }
     /**
-     * Perform a request to the API service to create a new token for the user that is currently logged in.
+     * Get the translation for the given key and bundle as a string with the first character as Upper case
+     * and all the rest as lower case
      *
-     * @param options The parameters that will affect the token behaviour. To learn more about each option, please
-     *        refer to the turbodepot UsersManager class createToken method documentation
+     * @see t()
      *
-     * @returns A promise that resolves with the created token string if the request is successful, or rejects
-     *          with an error (containing all the error response details) if the request fails.
+     * @returns The localized and case formatted text
      */
-    createUserToken(options) {
-        return this.call(this.tokenCreationServiceURI, { options: options }, { resultFormat: 'STRING' });
+    tFirstUpperRestLower(key, bundlePath, replaceWildcards = []) {
+        const string = this.t(key, bundlePath, replaceWildcards);
+        return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
     }
     /**
-     * Checks if the user and password credentials are filled and not empty.
-     * If any of the two values is empty, false will be returned
+     * A list of strings containing the locales that are used by this class to translate the given keys, sorted by preference.
+     * Each string is formatted as a standard locale code with language and country joined by an underscore, like: en_US, fr_FR
+     *
+     * When a key and bundle are requested for translation, the class will check on the first language of this
+     * list for a translated text. If missing, the next one will be used, and so. This list is constructed after initialize
+     * methods is called.
+     *
+     * @example: After loading the following list of locales ['en_US', 'es_ES', 'fr_FR'] if we call t('HELLO', 'lib1/greetings')
+     * the localization manager will try to locate the en_US value for the HELLO tag on the greetings bundle for the library lib1.
+     * If the tag is not found for the specified locale and bundle, the same search will be performed for the es_ES locale, and so, till a
+     * value is found or no more locales are defined.
      */
-    get isUserAndPswDefined() {
-        return !StringUtils.isEmpty(this._userName) && !StringUtils.isEmpty(this._password);
+    getLocales() {
+        return this._locales;
     }
     /**
-     * Tells if the user name and psw that are specified on this service are currently logged or not. This means
-     * also a token is active.
+     * A list of strings containing the languages that are used by this class to translate the given keys, sorted by preference.
+     * Each string is formatted as a 2 digit language code, like: en, fr
+     *
+     * This list is the same as the locales() one, but containing only the language part of each locale (the first two digits)
+     *
+     * @see getLocales()
      */
-    get isLogged() {
-        return this._isLogged;
+    getLanguages() {
+        return this._languages;
     }
     /**
-     * Gives the value for the currently active user authentication token or an empty string if no user logged
+     * Get the first locale from the list of loaded locales, which is the currently used to search for translated texts.
+     *
+     * @returns The locale that is defined as the primary one. For example: en_US, es_ES, ..
      */
-    get token() {
-        return this._token;
+    getPrimaryLocale() {
+        this._validateInitialized();
+        return this._locales[0];
+    }
+    /**
+     * Get the first language from the list of loaded locales, which is the currently used to search for translated texts.
+     *
+     * @returns The 2 digit language code that is defined as the primary one. For example: en, es, ..
+     */
+    getPrimaryLanguage() {
+        this._validateInitialized();
+        return this._languages[0];
+    }
+    /**
+     * Define the locale that will be placed at the front of the currently loaded locales list (moving all the others one position to the right).
+     *
+     * This will be the first locale to use when trying to get a translation.
+     *
+     * @param locale A currently loaded locale that will be moved to the first position of the loaded locales list. If the specified locale
+     *        is not currently loaded, an exception will happen.
+     *
+     * @returns void
+     */
+    setPrimaryLocale(locale) {
+        this._validateInitialized();
+        if (!this.isLocaleLoaded(locale)) {
+            throw new Error(locale + ' not loaded');
+        }
+        let result = [locale];
+        for (let l of this._locales) {
+            if (l !== locale) {
+                result.push(l);
+            }
+        }
+        this._locales = result;
+        this._languages = this._locales.map((l) => l.substring(0, 2));
+        this._cacheHashBaseString = this._wildCardsFormat + this._missingKeyFormat + this._locales[0];
     }
     /**
-     * Checks if the currently logged user is allowed to perform the specified operation.
-     * This will check the user permisions as defined on server side and return true if the operation is allowed
-     * or false if not. We can then decide what to do (hide an app section, block a button, etc)
+     * Moves the specified locales to the beginning of the locales list. This also alters the translation priority by setting the first
+     * provided locale as the most prioritary, the second as the next one and so.
      *
-     * @param operation The name of the operation to check
+     * This method basically works exactly the same way as setPrimaryLocale but letting us add many locales at once.
      *
-     * @returns True if the operation is allowed, false otherwise
+     * @see setPrimaryLocale()
+     *
+     * @param locales A list of locales to be moved to the beginning of the translation priority. First locales item will be the prefered
+     *        locale for translation, second will be the next one in case some key is not translated for the first one and so. If any of the
+     *        specified locales is not currently loaded, an exception will happen.
+     *
+     * @returns void
      */
-    isUserAllowedTo(operation) {
-        return this._operations.includes(operation);
+    setPrimaryLocales(locales) {
+        if (!Array.isArray(locales) ||
+            (new Set(locales).size !== locales.length) ||
+            locales.length === 0) {
+            throw new Error('locales must be non empty string array with no duplicate elements');
+        }
+        for (let i = locales.length - 1; i >= 0; i--) {
+            this.setPrimaryLocale(locales[i]);
+        }
     }
     /**
-     * Performs a standard request to an API service and returns a promise that resolves with the response data.
-     *
-     * Following is an example of a call:
+     * Define the 2 digit language that will be placed at the front of the currently loaded locales list (moving all the others one position to the right).
      *
-     *     this.apiService.call('users/user-create', this.userData, {handleErrors: false}).then(response => {
+     * This will be the first language to use when trying to get a translation.
      *
-     *          console.log('Success:', response);
+     * @param language A 2 digit language code that matches with any of the currently loaded locales, which will
+     *        be moved to the first position of the loaded locales list. If the specified language does not match with
+     *        a locale that is currently loaded, an exception will happen.
      *
-     *      }).catch(error => {
+     * @returns void
+     */
+    setPrimaryLanguage(language) {
+        for (let locale of this._locales) {
+            if (locale.substring(0, 2) === language) {
+                this.setPrimaryLocale(locale);
+                return;
+            }
+        }
+        throw new Error(language + ' not loaded');
+    }
+    /**
+     * Moves the locales that match the specified languages to the beginning of the locales list.
+     * Works the same as setPrimaryLocales() but with a list of the 2 digit language codes that match the respective locales.
      *
-     *          console.error('Error:', error.message);
-     *      });
+     * @see setPrimaryLocale()
+     * @see setPrimaryLanguage()
      *
-     * @param apiPath - A relative URL (based on the defined base root url) that defines the path to the service to call.
-     *        For example: 'users/login'
-     * @param parameters - An object containing key-value pairs that are sent as the request body.
-     *        token parameter is not necessary, it is automatically appended
-     * @param options An object defining several options for the request:
-     *        resultFormat: 'JSON' by default. The expected format of the response.
-     *        busyState: Enabled by default. Enables or disables the busy state to lock user interaction while performing the http calls.
-     *        handleErrors: Enabled by default. If set to true, an error dialog will be automatically shown when the call fails.
-     *        If set to false, the promise will generate a reject error that must be handled by our code.
+     * @param languages A list of 2 digit language codes to be moved to the beginning of the translation priority. If any of the
+     *        specified languages does not match with a locale that is currently loaded, an exception will happen.
      *
-     * @returns A promise that resolves with the response data correctly parsed if the request is successful, or rejects
-     *          with an error (containing all the error response details) if the request fails.
+     * @returns void
      */
-    call(apiPath, parameters = {}, options = {}) {
-        // Set the default values for non specified properties
-        options.resultFormat = options.resultFormat ?? 'JSON';
-        options.busyState = options.busyState ?? true;
-        options.handleErrors = options.handleErrors ?? true;
-        if (options.busyState) {
-            this.dialogService.addModalBusyState();
+    setPrimaryLanguages(languages) {
+        if (!Array.isArray(languages) ||
+            (new Set(languages).size !== languages.length) ||
+            languages.length === 0) {
+            throw new Error('languages must be non empty string array with no duplicate elements');
+        }
+        for (let i = languages.length - 1; i >= 0; i--) {
+            this.setPrimaryLanguage(languages[i]);
         }
-        return new Promise((resolve, reject) => {
-            // Create the request object
-            const request = new HTTPManagerPostRequest(apiPath, options.resultFormat === 'STRING' ? HTTPManagerPostRequest.STRING : HTTPManagerPostRequest.JSON);
-            request.parameters = parameters;
-            request.successCallback = (response) => {
-                resolve(response);
-            };
-            request.errorCallback = (errorMsg, errorCode, response) => {
-                if (options.handleErrors) {
-                    this.showErrorDialog(errorMsg, errorCode, response);
-                }
-                else {
-                    reject(new Error(errorMsg + ' ' + errorCode + ' ' + response));
-                }
-            };
-            request.finallyCallback = () => {
-                if (options.busyState) {
-                    this.dialogService.removeModalBusyState();
-                }
-            };
-            this.httpManager.execute(request);
-        });
     }
     /**
-     * Performs a request to chain several api calls into a single http request, via the chain services mechanism of the turboframework API.
-     * Returns a promise that resolves with an array of response objects. One for each of the request calls.
+     * Change the loaded locales translation preference order. The same locales that are currently loaded must be passed
+     * but with a different order to change the translation priority.
      *
-     * @param apiPath - A relative URL (based on the defined base root url) that defines the path to the root of the chain services call.
-     *        For example: 'turbosite/chain/chain-services'
-     * @param services - An array of objects, were each object contains a valid structure for the chain services call.
-     *        Token parameter is not necessary, it is automatically appended
-     * @param options An object defining several options for the request:
-     *        busyState: Enables or disables the busy state to lock user interaction while performing the http calls. Enabled by default
-     *        handleErrors: Enabled by default. If set to true, an error dialog will be automatically shown when the call fails.
-     *        If set to false, the promise will generate a reject error that must be handled by our code.
+     * @param locales A list with the new locales translation priority
      *
-     * @returns A promise that resolves with the response data correctly parsed if the request is successful, or rejects
-     *          with an error (containing all the error response details) if the request fails.
+     * @returns void
      */
-    callChain(apiPath, services, options = {}) {
-        // Set the default values for non specified properties
-        options.busyState = options.busyState ?? true;
-        options.handleErrors = options.handleErrors ?? true;
-        if (options.busyState) {
-            this.dialogService.addModalBusyState();
+    setLocalesOrder(locales) {
+        if (locales.length !== this._locales.length) {
+            throw new Error('locales must contain all the currently loaded locales');
         }
-        return new Promise((resolve, reject) => {
-            const request = new HTTPManagerPostRequest(apiPath, HTTPManagerPostRequest.JSON);
-            request.ignoreGlobalPostParams = true;
-            request.parameters = { services: services };
-            request.successCallback = (response) => {
-                resolve(response);
-            };
-            request.errorCallback = (errorMsg, errorCode, response) => {
-                if (options.handleErrors) {
-                    this.showErrorDialog(errorMsg, errorCode, response);
-                }
-                else {
-                    reject(new Error(errorMsg + ' ' + errorCode + ' ' + response));
-                }
-            };
-            request.finallyCallback = () => {
-                if (options.busyState) {
-                    this.dialogService.removeModalBusyState();
-                }
-            };
-            this.httpManager.execute(request);
-        });
+        this._validateInitialized();
+        for (let locale of locales) {
+            if (!this.isLocaleLoaded(locale)) {
+                throw new Error(locale + ' not loaded');
+            }
+        }
+        this._locales = locales;
+        this._languages = this._locales.map((l) => l.substring(0, 2));
+        this._cacheHashBaseString = this._wildCardsFormat + this._missingKeyFormat + this._locales[0];
     }
     /**
-     * Aux method to show an error dialog when a request fails and error handling is enabled
+     * This is an aux method to implement the TurboCommons StringUtils replace method.
+     * It is exactly the same as the one on the library, but we implement it here to avoid having a dependency with TurboCommons
      */
-    showErrorDialog(errorMsg, errorCode, response) {
-        errorMsg = errorMsg + '\n\n' + response;
-        if (StringUtils.isEmpty(errorMsg)) {
-            errorMsg = 'Unknown error. Make sure Internet connection is available';
-        }
-        this.dialogService.addDialog(DialogErrorComponent, {
-            width: '50vw',
-            texts: ['Error: ' + errorCode, errorMsg],
-            options: ['Ok']
-        });
+    _replace(string, search, replacement) {
+        const escapedSearch = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        return string.replace(new RegExp(escapedSearch, 'g'), replacement);
     }
     /**
-     * Perform the logout for the currently logged user
-     *
-     * @param options An object defining several options for the request:
-     *        handleErrors: Enabled by default. If set to true, an error dialog will be automatically shown when the call fails.
-     *        If set to false, the promise will generate a reject error that must be handled by our code.
-     *
-     * @returns A promise that resolves correctly if the logout is correct, or rejects with an error (containing all the error
-     *          response details) if the request fails.
+     * This is an aux method to implement the TurboCommons StringUtils isEmpty method.
+     * It is exactly the same as the one on the library, but we implement it here to avoid having a dependency with TurboCommons
      */
-    logout(options = {}) {
-        // Set the default values for non specified properties
-        options.handleErrors = options.handleErrors ?? true;
-        this.dialogService.addModalBusyState();
-        return new Promise((resolve, reject) => {
-            const request = new HTTPManagerPostRequest(this.logOutServiceURI);
-            request.parameters = { token: this._token };
-            request.successCallback = () => {
-                this._clearUserAndToken();
-                resolve(undefined);
-            };
-            request.errorCallback = (errorMsg, errorCode, response) => {
-                if (options.handleErrors) {
-                    this.showErrorDialog(errorMsg, errorCode, response);
-                }
-                else {
-                    reject(new Error(errorMsg + ' ' + errorCode + ' ' + response));
-                }
-            };
-            request.finallyCallback = () => {
-                this.dialogService.removeModalBusyState();
-            };
-            this.httpManager.execute(request);
-        });
+    _isEmpty(string) {
+        let isString = (typeof string === 'string' || string instanceof String);
+        // Throw exception if non string value was received
+        if (!isString) {
+            // Empty or null value is considered empty
+            if (string == null || string == '') {
+                return true;
+            }
+            throw new Error("value is not a string");
+        }
+        return string.replace(/[ \n\r\t]/g, '') === '';
     }
     /**
-     * Aux methot to clear all the currently logged user data
+     * This is an aux method to implement the TurboCommons StringUtils forceNonEmptyString method.
+     * It is exactly the same as the one on the library, but we implement it here to avoid having a dependency with TurboCommons
      */
-    _clearUserAndToken() {
-        this._userName = '';
-        this._password = '';
-        this._isLogged = false;
-        this._token = '';
-        this.httpManager.setGlobalPostParam('token', '-');
+    _forceNonEmptyString(value, valueName = '', errorMessage = 'must be a non empty string') {
+        let isString = (typeof value === 'string' || value instanceof String);
+        if (!isString || this._isEmpty(value)) {
+            throw new Error(valueName + ' ' + errorMessage);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiCallerService, deps: [{ token: DialogService }, { token: BrowserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiCallerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: LocalesBaseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: LocalesBaseService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiCallerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: LocalesBaseService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: DialogService }, { type: BrowserService }] });
+        }] });
 
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
@@ -2557,6 +2721,7 @@ class ButtonContainerComponent extends ButtonBaseComponent {
         super(...arguments);
         /**
          * This is used to attach the fade animation directly to this component so it fades in and out when created and removed from the app
+         * TODO: THIS IS NOT A GOOD IDEA
          */
         this.buttonFade = true;
     }
@@ -2612,18 +2777,29 @@ class GUINotification {
  * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
  */
 /**
- * Defines an application view.
- * This is a base class that helps managing our application views. We should extend this class to create our views, as it forces us
- * to set the viewContainerRef and the viewService, which are both used when working with views.
+ * This is a base class that helps managing our application pages.
+ * We should extend this class to create our application pages, as it forces us to set the viewContainerRef and the viewService,
+ * which are both used when working with pages.
  *
- * When using view services, it is important to specify the view service as a provider for the view component to ensure that it will
- * be created and destroyed when the view is created and destroyed.
+ * IMPORTANT!!! View services are created and destroyed when the page is created and destroyed. It is vital to specify the view service
+ * as a provider for the page to ensure that it will be created and destroyed when the view is created and destroyed.
+ *
+ * Example:
+ *
+ * @Component({
+ *   ...
+ *   selector: 'app-my-view-page',
+ *   providers: [MyViewService]
+ *   ...
+ *})
  */
 class View {
     /**
-     * This constructor is specifically designed to force the view to set the viewContainerRef which will be automatically assigned
-     * to the respective view service. If the view has no service, we can set it to null, but it is recommended to always use a service with a view,
-     * to store the view state and global methods that can be used by other components loaded in the view.
+     * This constructor is specifically designed to force the following:
+     *
+     * - Set the viewContainerRef which will be automatically assigned to the respective view service.
+     *
+     * - If the view has no service, we can set it to null, but it is recommended to always use a service with a view, to store the view state and global methods
      */
     constructor(viewContainerRef, viewService) {
         this.viewContainerRef = viewContainerRef;
@@ -2764,5 +2940,5 @@ class ValidatorsPlus extends Validators {
  * Generated bundle index. Do not edit.
  */
 
-export { AutoFocusOnDisplayDirective, AutoSelectTextOnFocusDirective, BrowserService, BusyStateBaseComponent, ButtonContainerComponent, ButtonImageComponent, DelayedMethodCallManager, DialogBaseComponent, DialogDateSelectionComponent, DialogErrorComponent, DialogMultipleOptionComponent, DialogService, DialogSingleInputComponent, DialogSingleOptionComponent, DialogSingleSelectionListComponent, DialogTwoOptionComponent, ElementCreatedDirective, ElementDestroyedDirective, FadeAnimationClass, GUINotification, GlobalErrorService, HTTPService, HTTPServiceGetRequest, HTTPServicePostRequest, LocalesService, NotificationService, SingletoneStrictClass, TurboApiCallerService, TurboGuiAngularModule, ValidatorsPlus, View, ViewService };
+export { AutoFocusOnDisplayDirective, AutoSelectTextOnFocusDirective, BrowserService, BusyStateBaseComponent, ButtonContainerComponent, ButtonImageComponent, DelayedMethodCallManager, DialogBaseComponent, DialogDateSelectionComponent, DialogErrorComponent, DialogMultipleOptionComponent, DialogService, DialogSingleInputComponent, DialogSingleOptionComponent, DialogSingleSelectionListComponent, DialogTwoOptionComponent, ElementCreatedDirective, ElementDestroyedDirective, FadeAnimationClass, GUINotification, GlobalErrorService, HTTPService, HTTPServiceGetRequest, HTTPServicePostRequest, LocalesBaseService, NotificationService, RouterBaseService, SingletoneStrictClass, TurboApiCallerService, TurboGuiAngularModule, ValidatorsPlus, View, ViewService };
 //# sourceMappingURL=turbogui-angular.mjs.map