turbogui-angular 11.0.2 → 12.0.0

package/fesm2022/turbogui-angular.mjs

@@ -11,1930 +11,1930 @@ import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { trigger, transition, style, animate } from '@angular/animations';
+import { style, animate, transition, trigger } from '@angular/animations';
 import { ArrayUtils, NumericUtils, LocalizationManager, HTTPManager, StringUtils, HTTPManagerPostRequest, ConversionUtils, BrowserManager, HTTPManagerGetRequest } from 'turbocommons-ts';
 import { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';
 import * as i3 from '@angular/common';
 import { Subject } from 'rxjs';
 
-/**
- * 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 {
-    /**
-     * 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 = '0s ease') {
-        return trigger(triggerName, [
-            transition(':enter', [style({ opacity: 0 }), animate(enter)]),
-            transition(':leave', [style({ opacity: 1 }), animate(leave, style({ opacity: 0 }))])
-        ]);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FadeAnimationClass, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FadeAnimationClass }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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
+ */
+/**
+ * Fade animations
+ */
+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 = '0s ease') {
+        return trigger(triggerName, [
+            transition(':enter', [style({ opacity: 0 }), animate(enter)]),
+            transition(':leave', [style({ opacity: 1 }), animate(leave, style({ opacity: 0 }))])
+        ]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FadeAnimationClass, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FadeAnimationClass }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", 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;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BusyStateBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BusyStateBaseComponent, selector: "tg-busy-state-base", host: { properties: { "@busyStateBaseFade": "this.busyStateBaseFade" } }, 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: "16.2.12", ngImport: i0, type: BusyStateBaseComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-busy-state-base', 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
+ */
+/**
+ * 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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BusyStateBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: BusyStateBaseComponent, selector: "tg-busy-state-base", host: { properties: { "@busyStateBaseFade": "this.busyStateBaseFade" } }, 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: "17.0.8", ngImport: i0, type: BusyStateBaseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-busy-state-base', 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
- */
-/**
- * Manages the application modal and non modal floating elements
- */
-class DialogService {
-    constructor(rendererFactory, matSnackBar, matDialog, injector, applicationRef, componentFactoryResolver) {
-        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);
-    }
-    /**
-     * 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.
-     *
-     * Note: We can modify the busy state 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;
-    }
-    /**
-     * Tells if the application is currently locked in a modal busy state (caused by an addModalBusyState() call)
-     */
-    get isShowingBusyState() {
-        return this._isShowingBusyState;
-    }
-    /**
-     * Remove the application busy state and restore it back to normal user interaction
-     */
-    removeModalBusyState() {
-        if (!this._isEnabled || !this._isShowingBusyState) {
-            return;
-        }
-        if (this._componentPortal !== null) {
-            this._modalBusyStateHost.detach();
-        }
-        this._enableUserInteraction();
-        this._isShowingBusyState = false;
-    }
-    /**
-     * TODO - adapt from TS version
-     */
-    addToolTip() {
-        // TODO - adapt from TS version
-    }
-    /**
-     * 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
-     */
-    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();
-            });
-        }
-    }
-    /**
-     * 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.
-     *
-     * If no snackbar is currently visible, this method will do nothing
-     */
-    removeSnackBar() {
-        if (!this._isEnabled || !this._isShowingSnackBar) {
-            return;
-        }
-        this.matSnackBar.dismiss();
-        this._isShowingSnackBar = false;
-    }
-    /**
-     * 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 DialogOptionsBaseComponent to create our own custom ones.
-     *
-     * @param width Specify the css value for the maximum width the dialog will have. 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. Note that height will be adapted to the contents
-              of the dialog and cannot be specified here. We can set a pixels, % or any other css accepted value. For example: '400px', '50%', etc.
-     * @param 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 different kind of texts).
-     * @param options A list of strings that will be used as button captions for each one of the accepted dialog options
-     * @param dialogComponentClass A class for a component that extends DialogOptionsBaseComponent, which will be the
-     *        dialog visual element that is shown to the user.
-     * @param callback A function that will be called after the dialog is closed and will receive an object with the numeric index and value for
-     *        the option that's been selected by the user.
-     * @param modal True (default) if selecting an option is mandatory to close the dialog, false if the dialog can be closed
-     *        by the user by clicking outside it
-     */
-    addDialog(width, texts, options, dialogComponentClass, callback = null, modal = true) {
-        if (!this._isEnabled) {
-            return;
-        }
-        // Generate a string to uniquely identify this dialog on the list of active dialogs
-        const dialogHash = texts.join('') + options.join('') + dialogComponentClass.name;
-        // identical dialogs won't be allowed at the same time
-        if (this._activeDialogs.includes(dialogHash)) {
-            return;
-        }
-        const dialogRef = this.matDialog.open(dialogComponentClass, {
-            width: width,
-            disableClose: modal,
-            autoFocus: false,
-            closeOnNavigation: !modal,
-            data: { texts: texts, options: options }
-        });
-        this._activeDialogs.push(dialogHash);
-        this._activeDialogInstances.push(dialogRef);
-        dialogRef.beforeClosed().subscribe((selectedOptionIndex) => {
-            this._activeDialogs = ArrayUtils.removeElement(this._activeDialogs, dialogHash);
-            this._activeDialogInstances = ArrayUtils.removeElement(this._activeDialogInstances, dialogRef);
-            if (!NumericUtils.isInteger(selectedOptionIndex)) {
-                if (modal) {
-                    throw new Error(`dialogRef.close() expects int value`);
-                }
-                else {
-                    selectedOptionIndex = -1;
-                }
-            }
-            if (callback !== null) {
-                let selectedOption = { index: selectedOptionIndex, value: '' };
-                if (selectedOptionIndex >= 0) {
-                    selectedOption.value = options[selectedOptionIndex];
-                }
-                callback(selectedOption);
-            }
-        });
-    }
-    /**
-     * Force the removal of all the dialogs that are currently visible.
-     *
-     * If no dialogs are currently visible, this method will do nothing
-     */
-    removeAllDialogs() {
-        if (!this._isEnabled) {
-            return;
-        }
-        for (const dialogRef of this._activeDialogInstances) {
-            dialogRef.close(-1);
-        }
-        this._activeDialogs = [];
-        this._activeDialogInstances = [];
-    }
-    /**
-     * 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());
-        }
-    }
-    /**
-     * Restore the user interactions that were previously disabled with _disableUserInteraction method
-     */
-    _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: "16.2.12", ngImport: i0, type: DialogService, deps: [{ token: i0.RendererFactory2 }, { token: i1.MatSnackBar }, { token: i1$1.MatDialog }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i1.MatSnackBar }, { type: i1$1.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 the application modal and non modal floating elements
+ */
+class DialogService {
+    constructor(rendererFactory, matSnackBar, matDialog, injector, applicationRef, componentFactoryResolver) {
+        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);
+    }
+    /**
+     * 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.
+     *
+     * Note: We can modify the busy state 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;
+    }
+    /**
+     * Tells if the application is currently locked in a modal busy state (caused by an addModalBusyState() call)
+     */
+    get isShowingBusyState() {
+        return this._isShowingBusyState;
+    }
+    /**
+     * Remove the application busy state and restore it back to normal user interaction
+     */
+    removeModalBusyState() {
+        if (!this._isEnabled || !this._isShowingBusyState) {
+            return;
+        }
+        if (this._componentPortal !== null) {
+            this._modalBusyStateHost.detach();
+        }
+        this._enableUserInteraction();
+        this._isShowingBusyState = false;
+    }
+    /**
+     * TODO - adapt from TS version
+     */
+    addToolTip() {
+        // TODO - adapt from TS version
+    }
+    /**
+     * 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
+     */
+    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();
+            });
+        }
+    }
+    /**
+     * 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.
+     *
+     * If no snackbar is currently visible, this method will do nothing
+     */
+    removeSnackBar() {
+        if (!this._isEnabled || !this._isShowingSnackBar) {
+            return;
+        }
+        this.matSnackBar.dismiss();
+        this._isShowingSnackBar = false;
+    }
+    /**
+     * 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 DialogOptionsBaseComponent to create our own custom ones.
+     *
+     * @param width Specify the css value for the maximum width the dialog will have. 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. Note that height will be adapted to the contents
+              of the dialog and cannot be specified here. We can set a pixels, % or any other css accepted value. For example: '400px', '50%', etc.
+     * @param 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 different kind of texts).
+     * @param options A list of strings that will be used as button captions for each one of the accepted dialog options
+     * @param dialogComponentClass A class for a component that extends DialogOptionsBaseComponent, which will be the
+     *        dialog visual element that is shown to the user.
+     * @param callback A function that will be called after the dialog is closed and will receive an object with the numeric index and value for
+     *        the option that's been selected by the user.
+     * @param modal True (default) if selecting an option is mandatory to close the dialog, false if the dialog can be closed
+     *        by the user by clicking outside it
+     */
+    addDialog(width, texts, options, dialogComponentClass, callback = null, modal = true) {
+        if (!this._isEnabled) {
+            return;
+        }
+        // Generate a string to uniquely identify this dialog on the list of active dialogs
+        const dialogHash = texts.join('') + options.join('') + dialogComponentClass.name;
+        // identical dialogs won't be allowed at the same time
+        if (this._activeDialogs.includes(dialogHash)) {
+            return;
+        }
+        const dialogRef = this.matDialog.open(dialogComponentClass, {
+            width: width,
+            disableClose: modal,
+            autoFocus: false,
+            closeOnNavigation: !modal,
+            data: { texts: texts, options: options }
+        });
+        this._activeDialogs.push(dialogHash);
+        this._activeDialogInstances.push(dialogRef);
+        dialogRef.beforeClosed().subscribe((selectedOptionIndex) => {
+            this._activeDialogs = ArrayUtils.removeElement(this._activeDialogs, dialogHash);
+            this._activeDialogInstances = ArrayUtils.removeElement(this._activeDialogInstances, dialogRef);
+            if (!NumericUtils.isInteger(selectedOptionIndex)) {
+                if (modal) {
+                    throw new Error(`dialogRef.close() expects int value`);
+                }
+                else {
+                    selectedOptionIndex = -1;
+                }
+            }
+            if (callback !== null) {
+                let selectedOption = { index: selectedOptionIndex, value: '' };
+                if (selectedOptionIndex >= 0) {
+                    selectedOption.value = options[selectedOptionIndex];
+                }
+                callback(selectedOption);
+            }
+        });
+    }
+    /**
+     * Force the removal of all the dialogs that are currently visible.
+     *
+     * If no dialogs are currently visible, this method will do nothing
+     */
+    removeAllDialogs() {
+        if (!this._isEnabled) {
+            return;
+        }
+        for (const dialogRef of this._activeDialogInstances) {
+            dialogRef.close(-1);
+        }
+        this._activeDialogs = [];
+        this._activeDialogInstances = [];
+    }
+    /**
+     * 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());
+        }
+    }
+    /**
+     * Restore the user interactions that were previously disabled with _disableUserInteraction method
+     */
+    _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: "17.0.8", ngImport: i0, type: DialogService, deps: [{ token: i0.RendererFactory2 }, { token: i1.MatSnackBar }, { token: i1$1.MatDialog }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: i1.MatSnackBar }, { type: i1$1.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 text translations and languages
- */
-class LocalizationService extends LocalizationManager {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizationService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizationService, 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
+ */
+/**
+ * Manages application text translations and languages
+ */
+class LocalizationService extends LocalizationManager {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LocalizationService, 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 is the base class for all the dialog components that can be loaded by the dialog service class
- */
-class DialogBaseComponent {
+/**
+ * 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 is the base class for all the dialog components that can be loaded by the dialog service class
+ */
+class DialogBaseComponent {
 }
 
-/**
- * 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 is the base class for all the dialog components that show one or more options for the user to select
- */
-class DialogOptionsBaseComponent extends DialogBaseComponent {
+/**
+ * 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 is the base class for all the dialog components that show one or more options for the user to select
+ */
+class DialogOptionsBaseComponent extends DialogBaseComponent {
 }
 
-/**
- * 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 DialogOptionsBaseComponent {
-    constructor(dialogRef, data) {
-        super();
-        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');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogErrorComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogErrorComponent, selector: "tg-dialog-error", 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<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"dialogRef.close(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}h3{margin-top:0;margin-bottom:25px;width:82%}svg{width:18%;height:auto}p{margin-bottom:52px}button{float:right;width:50%;min-width:50px}\n"], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogErrorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-dialog-error', 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<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"dialogRef.close(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}h3{margin-top:0;margin-bottom:25px;width:82%}svg{width:18%;height:auto}p{margin-bottom:52px}button{float:right;width:50%;min-width:50px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.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
+ */
+/**
+ * A dialog component with a single option button, to be used for error notifications
+ */
+class DialogErrorComponent extends DialogOptionsBaseComponent {
+    constructor(dialogRef, data) {
+        super();
+        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');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogErrorComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogErrorComponent, selector: "tg-dialog-error", 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<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"dialogRef.close(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}h3{margin-top:0;margin-bottom:25px;width:82%}svg{width:18%;height:auto}p{margin-bottom:52px}button{float:right;width:50%;min-width:50px}\n"], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-dialog-error', 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<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"warn\"\r\n    (click)=\"dialogRef.close(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}h3{margin-top:0;margin-bottom:25px;width:82%}svg{width:18%;height:auto}p{margin-bottom:52px}button{float:right;width:50%;min-width:50px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.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 application http communications
- */
-class HTTPService extends HTTPManager {
-    /**
-     * execute() method option that tells the service to avoid blocking the user interface with a modal busy state while the requests that are
-     * launched by the execute method are running.
-     */
-    static { this.NO_MODAL_BUSY_STATE = 'NO_MODAL_BUSY_STATE'; }
-    /**
-     * execute() method option that tells the service to skip showing an error dialog when a request fails. We normally use this to handle the
-     * errors by ourselves or if we want to hide the error dialog for a specific request.
-     */
-    static { this.DISABLE_ERROR_HANDLING = 'DISABLE_ERROR_HANDLING'; }
-    constructor(dialogService) {
-        super(true);
-        this.dialogService = dialogService;
-    }
-    /**
-     * The same method as HTTPManager.execute but with the ability to enable several options which are specific to this service:
-     *
-     * - HTTPService.NO_MODAL_BUSY_STATE To prevent the default behaviour of locking the UI while the request is running
-     * - HTTPService.DISABLE_ERROR_HANDLING To prevent the default behaviour of showing a detailed error dialog when a request fails
-     *
-     * @see HTTPManager.execute()
-     */
-    execute(requests, finishedCallback = null, progressCallback = null, options = []) {
-        if (options.indexOf(HTTPService.NO_MODAL_BUSY_STATE) < 0) {
-            this.dialogService.addModalBusyState();
-        }
-        super.execute(requests, (results, anyError) => {
-            if (options.indexOf(HTTPService.NO_MODAL_BUSY_STATE) < 0) {
-                this.dialogService.removeModalBusyState();
-            }
-            if ((options.indexOf(HTTPService.DISABLE_ERROR_HANDLING) < 0) && 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('600px', ['Error: ' + result.code, errorMsg], ['Ok'], DialogErrorComponent);
-                    }
-                }
-            }
-            if (finishedCallback !== null) {
-                finishedCallback(results, anyError);
-            }
-        }, progressCallback);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HTTPService, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HTTPService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HTTPService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ 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
+ */
+/**
+ * Manages application http communications
+ */
+class HTTPService extends HTTPManager {
+    /**
+     * execute() method option that tells the service to avoid blocking the user interface with a modal busy state while the requests that are
+     * launched by the execute method are running.
+     */
+    static { this.NO_MODAL_BUSY_STATE = 'NO_MODAL_BUSY_STATE'; }
+    /**
+     * execute() method option that tells the service to skip showing an error dialog when a request fails. We normally use this to handle the
+     * errors by ourselves or if we want to hide the error dialog for a specific request.
+     */
+    static { this.DISABLE_ERROR_HANDLING = 'DISABLE_ERROR_HANDLING'; }
+    constructor(dialogService) {
+        super(true);
+        this.dialogService = dialogService;
+    }
+    /**
+     * The same method as HTTPManager.execute but with the ability to enable several options which are specific to this service:
+     *
+     * - HTTPService.NO_MODAL_BUSY_STATE To prevent the default behaviour of locking the UI while the request is running
+     * - HTTPService.DISABLE_ERROR_HANDLING To prevent the default behaviour of showing a detailed error dialog when a request fails
+     *
+     * @see HTTPManager.execute()
+     */
+    execute(requests, finishedCallback = null, progressCallback = null, options = []) {
+        if (options.indexOf(HTTPService.NO_MODAL_BUSY_STATE) < 0) {
+            this.dialogService.addModalBusyState();
+        }
+        super.execute(requests, (results, anyError) => {
+            if (options.indexOf(HTTPService.NO_MODAL_BUSY_STATE) < 0) {
+                this.dialogService.removeModalBusyState();
+            }
+            if ((options.indexOf(HTTPService.DISABLE_ERROR_HANDLING) < 0) && 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('600px', ['Error: ' + result.code, errorMsg], ['Ok'], DialogErrorComponent);
+                    }
+                }
+            }
+            if (finishedCallback !== null) {
+                finishedCallback(results, anyError);
+            }
+        }, progressCallback);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HTTPService, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HTTPService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HTTPService, decorators: [{
+            type: Injectable
+        }], 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
- */
-/**
- * This is the main application event bus.
- * All global events that happen on the application are broadcasted by this service, and
- * can be listened by any application element who previously subscribed
- */
-class NotificationService {
-    constructor() {
-        /**
-         * The Observable instance that handles subscriptions and notifications
-         */
-        this._notifications = new Subject();
-    }
-    /**
-     * used by other services or components to subscribe to all notifications that are generated by this service
-     *
-     * @param notificationHandler A method that will be used to receive each notification as a GUINotification instance
-     *
-     * @returns The new subscription object. Make sure to unsubscribe when not required anymore
-     */
-    subscribe(notificationHandler) {
-        return this._notifications.subscribe(notificationHandler);
-    }
-    /**
-     * Launch a notification to anyone who may be listening
-     *
-     * @param notification A notification instance to launch
-     */
-    send(notification) {
-        this._notifications.next(notification);
-    }
-    /**
-     * End a previously initiated subscription
-     *
-     * @param subscription A previously created subscription instance from which we want to unsubscribe
-     */
-    unsubscribe(subscription) {
-        return subscription.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService, 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 is the main application event bus.
+ * All global events that happen on the application are broadcasted by this service, and
+ * can be listened by any application element who previously subscribed
+ */
+class NotificationService {
+    constructor() {
+        /**
+         * The Observable instance that handles subscriptions and notifications
+         */
+        this._notifications = new Subject();
+    }
+    /**
+     * used by other services or components to subscribe to all notifications that are generated by this service
+     *
+     * @param notificationHandler A method that will be used to receive each notification as a GUINotification instance
+     *
+     * @returns The new subscription object. Make sure to unsubscribe when not required anymore
+     */
+    subscribe(notificationHandler) {
+        return this._notifications.subscribe(notificationHandler);
+    }
+    /**
+     * Launch a notification to anyone who may be listening
+     *
+     * @param notification A notification instance to launch
+     */
+    send(notification) {
+        this._notifications.next(notification);
+    }
+    /**
+     * End a previously initiated subscription
+     *
+     * @param subscription A previously created subscription instance from which we want to unsubscribe
+     */
+    unsubscribe(subscription) {
+        return subscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NotificationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NotificationService, 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
- */
-/**
- * Class that defines a POST http request, to be used by HttpService
- */
-class HTTPServicePostRequest extends HTTPManagerPostRequest {
+/**
+ * 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 {
 }
 
-/**
- * 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 users model and commands
- */
-class UserService {
-    constructor(httpService, ls) {
-        this.httpService = httpService;
-        this.ls = ls;
-        /**
-         * Path to the web service that performs the user login
-         */
-        this.loginWebService = 'users/login';
-        /**
-         * The username that is currently defined and will be used by the login methods
-         */
-        this.userName = '';
-        /**
-         * The password for the user that is currently defined and will be used by the login methods
-         */
-        this.password = '';
-        /**
-         * Check public getter for docs
-         */
-        this._isLogged = false;
-        /**
-         * @see token() getter for more info
-         */
-        this._token = '';
-    }
-    /**
-     * Tells if the services contains a non empty username and password specified
-     */
-    get isUserAndPswDefined() {
-        return !StringUtils.isEmpty(this.userName) && !StringUtils.isEmpty(this.password);
-    }
-    /**
-     * Tells if exists a user that is currently logged or not
-     */
-    get isLogged() {
-        return this._isLogged;
-    }
-    /**
-     * Gives the value for the currently active user authentication token or an empty string if no user logged
-     */
-    get token() {
-        return this._token;
-    }
-    /**
-     * Perform a user login against the configured login webservice
-     *
-     * @param loginOkCallback Method to be executed once the login finishes chorrectly. An object with all the service response data will be passed to this method
-     * @param loginFailCallback Method to be executed once the login finishes incorrectly.
-     */
-    login(loginOkCallback = null, loginFailCallback = null) {
-        const request = new HTTPServicePostRequest(this.loginWebService);
-        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.httpService.setGlobalPostParam('token', response.token);
-                if (loginOkCallback !== null) {
-                    loginOkCallback(response);
-                }
-            }
-            else {
-                this._clearUserAndToken();
-                if (loginFailCallback !== null) {
-                    loginFailCallback();
-                }
-            }
-        };
-        this.httpService.execute(request);
-    }
-    /**
-     * Perform the logout for the currently logged user
-     */
-    logout(logoutOkCallback = null) {
-        const request = new HTTPServicePostRequest('users/logout');
-        request.parameters = {
-            token: this._token
-        };
-        request.successCallback = () => {
-            this._clearUserAndToken();
-            if (logoutOkCallback !== null) {
-                logoutOkCallback();
-            }
-        };
-        this.httpService.execute(request);
-    }
-    _clearUserAndToken() {
-        this.userName = '';
-        this.password = '';
-        this._isLogged = false;
-        this._token = '';
-        if (this.httpService.isGlobalPostParam('token')) {
-            this.httpService.deleteGlobalPostParam('token');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserService, deps: [{ token: HTTPService }, { token: LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: HTTPService }, { type: LocalizationService }]; } });
+/**
+ * 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 users model and commands
+ */
+class UserService {
+    constructor(httpService, ls) {
+        this.httpService = httpService;
+        this.ls = ls;
+        /**
+         * Path to the web service that performs the user login
+         */
+        this.loginWebService = 'users/login';
+        /**
+         * The username that is currently defined and will be used by the login methods
+         */
+        this.userName = '';
+        /**
+         * The password for the user that is currently defined and will be used by the login methods
+         */
+        this.password = '';
+        /**
+         * Check public getter for docs
+         */
+        this._isLogged = false;
+        /**
+         * @see token() getter for more info
+         */
+        this._token = '';
+    }
+    /**
+     * Tells if the services contains a non empty username and password specified
+     */
+    get isUserAndPswDefined() {
+        return !StringUtils.isEmpty(this.userName) && !StringUtils.isEmpty(this.password);
+    }
+    /**
+     * Tells if exists a user that is currently logged or not
+     */
+    get isLogged() {
+        return this._isLogged;
+    }
+    /**
+     * Gives the value for the currently active user authentication token or an empty string if no user logged
+     */
+    get token() {
+        return this._token;
+    }
+    /**
+     * Perform a user login against the configured login webservice
+     *
+     * @param loginOkCallback Method to be executed once the login finishes chorrectly. An object with all the service response data will be passed to this method
+     * @param loginFailCallback Method to be executed once the login finishes incorrectly.
+     */
+    login(loginOkCallback = null, loginFailCallback = null) {
+        const request = new HTTPServicePostRequest(this.loginWebService);
+        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.httpService.setGlobalPostParam('token', response.token);
+                if (loginOkCallback !== null) {
+                    loginOkCallback(response);
+                }
+            }
+            else {
+                this._clearUserAndToken();
+                if (loginFailCallback !== null) {
+                    loginFailCallback();
+                }
+            }
+        };
+        this.httpService.execute(request);
+    }
+    /**
+     * Perform the logout for the currently logged user
+     */
+    logout(logoutOkCallback = null) {
+        const request = new HTTPServicePostRequest('users/logout');
+        request.parameters = {
+            token: this._token
+        };
+        request.successCallback = () => {
+            this._clearUserAndToken();
+            if (logoutOkCallback !== null) {
+                logoutOkCallback();
+            }
+        };
+        this.httpService.execute(request);
+    }
+    _clearUserAndToken() {
+        this.userName = '';
+        this.password = '';
+        this._isLogged = false;
+        this._token = '';
+        if (this.httpService.isGlobalPostParam('token')) {
+            this.httpService.deleteGlobalPostParam('token');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UserService, deps: [{ token: HTTPService }, { token: LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UserService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UserService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: HTTPService }, { type: LocalizationService }] });
 
-/**
- * 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 adding, removing and manipulating the application views
- */
-class ViewsService {
-    constructor(componentFactoryResolver) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        /**
-         * See getter method for docs
-         */
-        this._loadedViewClass = null;
-        /**
-         * An instance of the model that is assigned to the currently loaded view
-         */
-        this._loadedViewModel = null;
-        /**
-         * See setter method for docs
-         */
-        this._viewContainerRef = null;
-    }
-    /**
-     * Tells if there's any view currently loaded on the application views container
-     */
-    get isViewLoaded() {
-        return this._loadedViewClass !== null;
-    }
-    /**
-     * Stores a reference to the visual element that will be used as the container for all the views.
-     * This is automatically assigned by the tg-views-container component once it is created.
-     *
-     * @see ViewsContainerComponent for more information
-     */
-    set viewContainerRef(ref) {
-        if (ref !== null && this._viewContainerRef !== null) {
-            throw new Error('Views container already defined. Only one views container element can exist on an application');
-        }
-        this._viewContainerRef = ref;
-    }
-    /**
-     * Create a new view instance with the specified type and add it to the current application views container. Any currently loaded
-     * view will be removed
-     *
-     * Make sure this method is called when all the visual components of the application have been created (ngAfterViewInit)
-     *
-     * @param view The classname for the view that we want to create and add to the views container (must extend View base class).
-     *
-     * @return The instance of the newly added and created view.
-     */
-    pushView(view) {
-        // If a view is already loaded, we will unload it first
-        if (this._loadedViewClass !== null) {
-            // If the loaded view is the same as the specified one, we will do nothing
-            if (this._loadedViewClass === view) {
-                return;
-            }
-            this.popView();
-        }
-        this.verifyViewsContainerExist();
-        const factory = this.componentFactoryResolver.resolveComponentFactory(view);
-        const componentRef = this._viewContainerRef.createComponent(factory);
-        this._loadedViewModel = componentRef.instance.modelClass !== null ? new componentRef.instance.modelClass() : null;
-        componentRef.changeDetectorRef.detectChanges();
-        this._loadedViewClass = view;
-        return componentRef;
-    }
-    /**
-     * Get the model that is instantiated for the currently active view. (A view model only lives while its view is active)
-     * If no view model is assigned to the current view or no view is loaded, an exception will be thrown.
-     *
-     * @return The current view model instance, which must be casted to the appropiate ViewModel extended class
-     */
-    get model() {
-        if (this._loadedViewModel === null) {
-            throw new Error('No active model. Make sure a view is loaded with an assigned model. Do not access the model until view is initialized (for example on ngAfterViewInit)');
-        }
-        return this._loadedViewModel;
-    }
-    /**
-     * Delete the currently loaded view from the views container, and leave it empty.
-     * If no view is currently loaded, this method will do nothing
-     */
-    popView() {
-        this.verifyViewsContainerExist();
-        if (this._loadedViewClass !== null) {
-            this._viewContainerRef.clear();
-        }
-        this._loadedViewClass = null;
-        this._loadedViewModel = null;
-    }
-    /**
-     * Auxiliary method to test if the views container instance is available on the application
-     */
-    verifyViewsContainerExist() {
-        if (this._viewContainerRef === null) {
-            throw new Error('Views container not defined. Please declare a <views-container> element in your application');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewsService, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewsService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewsService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ 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 adding, removing and manipulating the application views
+ */
+class ViewsService {
+    constructor(componentFactoryResolver) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        /**
+         * See getter method for docs
+         */
+        this._loadedViewClass = null;
+        /**
+         * An instance of the model that is assigned to the currently loaded view
+         */
+        this._loadedViewModel = null;
+        /**
+         * See setter method for docs
+         */
+        this._viewContainerRef = null;
+    }
+    /**
+     * Tells if there's any view currently loaded on the application views container
+     */
+    get isViewLoaded() {
+        return this._loadedViewClass !== null;
+    }
+    /**
+     * Stores a reference to the visual element that will be used as the container for all the views.
+     * This is automatically assigned by the tg-views-container component once it is created.
+     *
+     * @see ViewsContainerComponent for more information
+     */
+    set viewContainerRef(ref) {
+        if (ref !== null && this._viewContainerRef !== null) {
+            throw new Error('Views container already defined. Only one views container element can exist on an application');
+        }
+        this._viewContainerRef = ref;
+    }
+    /**
+     * Create a new view instance with the specified type and add it to the current application views container. Any currently loaded
+     * view will be removed
+     *
+     * Make sure this method is called when all the visual components of the application have been created (ngAfterViewInit)
+     *
+     * @param view The classname for the view that we want to create and add to the views container (must extend View base class).
+     *
+     * @return The instance of the newly added and created view.
+     */
+    pushView(view) {
+        // If a view is already loaded, we will unload it first
+        if (this._loadedViewClass !== null) {
+            // If the loaded view is the same as the specified one, we will do nothing
+            if (this._loadedViewClass === view) {
+                return;
+            }
+            this.popView();
+        }
+        this.verifyViewsContainerExist();
+        const factory = this.componentFactoryResolver.resolveComponentFactory(view);
+        const componentRef = this._viewContainerRef.createComponent(factory);
+        this._loadedViewModel = componentRef.instance.modelClass !== null ? new componentRef.instance.modelClass() : null;
+        componentRef.changeDetectorRef.detectChanges();
+        this._loadedViewClass = view;
+        return componentRef;
+    }
+    /**
+     * Get the model that is instantiated for the currently active view. (A view model only lives while its view is active)
+     * If no view model is assigned to the current view or no view is loaded, an exception will be thrown.
+     *
+     * @return The current view model instance, which must be casted to the appropiate ViewModel extended class
+     */
+    get model() {
+        if (this._loadedViewModel === null) {
+            throw new Error('No active model. Make sure a view is loaded with an assigned model. Do not access the model until view is initialized (for example on ngAfterViewInit)');
+        }
+        return this._loadedViewModel;
+    }
+    /**
+     * Delete the currently loaded view from the views container, and leave it empty.
+     * If no view is currently loaded, this method will do nothing
+     */
+    popView() {
+        this.verifyViewsContainerExist();
+        if (this._loadedViewClass !== null) {
+            this._viewContainerRef.clear();
+        }
+        this._loadedViewClass = null;
+        this._loadedViewModel = null;
+    }
+    /**
+     * Auxiliary method to test if the views container instance is available on the application
+     */
+    verifyViewsContainerExist() {
+        if (this._viewContainerRef === null) {
+            throw new Error('Views container not defined. Please declare a <views-container> element in your application');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ViewsService, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ViewsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ViewsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ 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
- */
-/**
- * Component that is used as a container for application views.
- * We must create only one views container in our application and pass to it a reference to our main
- * viewsService instance. For example:
- *
- * <tg-views-container [viewsService]="viewsService" [initialView]="HomeViewComponent"></tg-views-container>
- */
-class ViewsContainerComponent {
-    constructor() {
-        /**
-         * If we want to load a view by default when this component is loaded for the first time, we can
-         * set here the respective class view and it will be automatically added.
-         */
-        this.initialView = null;
-        /**
-         * A reference to the views service that is used to operate with this views container.
-         * This must be specified when this component is added to the application
-         */
-        this.viewsService = null;
-    }
-    /**
-     * Check that the service reference has been correctly passed
-     */
-    ngOnInit() {
-        if (!(this.viewsService instanceof ViewsService)) {
-            throw new Error('ViewService instance must be referenced on a views container');
-        }
-        else {
-            this.viewsService.viewContainerRef = this.viewContainerRef;
-        }
-        // Set the initial view if defined
-        if (this.initialView !== null) {
-            this.viewsService.pushView(this.initialView);
-        }
-    }
-    /**
-     * Clear the current view from the service when this component is deleted
-     */
-    ngOnDestroy() {
-        if (this.viewsService instanceof ViewsService) {
-            this.viewsService.popView();
-            this.viewsService.viewContainerRef = null;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewsContainerComponent, selector: "tg-views-container", inputs: { initialView: "initialView", viewsService: "viewsService" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["viewContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<!--\r\n    This is a dummy template component that will be used as the anchor point where the views will be loaded\r\n-->\r\n<ng-template #viewContainerRef></ng-template>", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewsContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-views-container', template: "<!--\r\n    This is a dummy template component that will be used as the anchor point where the views will be loaded\r\n-->\r\n<ng-template #viewContainerRef></ng-template>" }]
-        }], propDecorators: { initialView: [{
-                type: Input
-            }], viewsService: [{
-                type: Input
-            }], viewContainerRef: [{
-                type: ViewChild,
-                args: ['viewContainerRef', { read: ViewContainerRef, static: true }]
+/**
+ * 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
+ */
+/**
+ * Component that is used as a container for application views.
+ * We must create only one views container in our application and pass to it a reference to our main
+ * viewsService instance. For example:
+ *
+ * <tg-views-container [viewsService]="viewsService" [initialView]="HomeViewComponent"></tg-views-container>
+ */
+class ViewsContainerComponent {
+    constructor() {
+        /**
+         * If we want to load a view by default when this component is loaded for the first time, we can
+         * set here the respective class view and it will be automatically added.
+         */
+        this.initialView = null;
+        /**
+         * A reference to the views service that is used to operate with this views container.
+         * This must be specified when this component is added to the application
+         */
+        this.viewsService = null;
+    }
+    /**
+     * Check that the service reference has been correctly passed
+     */
+    ngOnInit() {
+        if (!(this.viewsService instanceof ViewsService)) {
+            throw new Error('ViewService instance must be referenced on a views container');
+        }
+        else {
+            this.viewsService.viewContainerRef = this.viewContainerRef;
+        }
+        // Set the initial view if defined
+        if (this.initialView !== null) {
+            this.viewsService.pushView(this.initialView);
+        }
+    }
+    /**
+     * Clear the current view from the service when this component is deleted
+     */
+    ngOnDestroy() {
+        if (this.viewsService instanceof ViewsService) {
+            this.viewsService.popView();
+            this.viewsService.viewContainerRef = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ViewsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ViewsContainerComponent, selector: "tg-views-container", inputs: { initialView: "initialView", viewsService: "viewsService" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["viewContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<!--\r\n    This is a dummy template component that will be used as the anchor point where the views will be loaded\r\n-->\r\n<ng-template #viewContainerRef></ng-template>", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ViewsContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-views-container', template: "<!--\r\n    This is a dummy template component that will be used as the anchor point where the views will be loaded\r\n-->\r\n<ng-template #viewContainerRef></ng-template>" }]
+        }], propDecorators: { initialView: [{
+                type: Input
+            }], viewsService: [{
+                type: Input
+            }], viewContainerRef: [{
+                type: ViewChild,
+                args: ['viewContainerRef', { read: ViewContainerRef, static: true }]
             }] } });
 
-/**
- * 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 is the base class for all button components
- */
-class ButtonBaseComponent {
-    constructor() {
-        /**
-         * Defines the actual opacity that is binded on the html part
-         */
-        this.currentOpacity = .7;
-        /**
-         * Defines the actual scale that is binded on the html part
-         */
-        this.currentScale = 'scale(1)';
-        /**
-         * Defines if the button can be clicked or not
-         */
-        this.pointerEvents = 'initial';
-        /**
-         * Specifies if the button animations must rollback when the user releases the mouse or pointer after pressing it
-         */
-        this.releaseOnMouseUp = true;
-        /**
-         * Specifies the amount of milliseconds that the button will vibrate when it gets clicked (only on compatible devices and browsers)
-         * Set it to 0 to disable click vibration
-         */
-        this.vibrateOnClick = 25;
-        /**
-         * Defines the button opacity when it is not clicked
-         */
-        this.defaultOpacity = .7;
-        /**
-         * Defines the image scale when it is not clicked
-         */
-        this.defaultScale = 1;
-        /**
-         * Defines the button opacity when it is hovered
-         */
-        this.hoverOpacity = .8;
-        /**
-         * Defines the image scale when it is hovered
-         */
-        this.hoverScale = 1;
-        /**
-         * Defines the button opacity when it is clicked
-         */
-        this.clickOpacity = 1;
-        /**
-         * Defines the image scale when it is clicked
-         */
-        this.clickScale = 1;
-        /**
-         * Defines the button opacity when it is disabled
-         */
-        this.disabledOpacity = .2;
-        /**
-         * Stores the value that tells if the button is enabled or disabled
-         */
-        this._enabled = true;
-    }
-    /**
-     * Specifies if the button is enabled or disabled
-     */
-    set enabled(v) {
-        this._enabled = v;
-        this.currentOpacity = v ? this.defaultOpacity : this.disabledOpacity;
-        this.pointerEvents = v ? 'initial' : 'none';
-    }
-    ;
-    /**
-     * Set button default values
-     */
-    ngOnInit() {
-        this.currentOpacity = this._enabled ? this.defaultOpacity : this.disabledOpacity;
-        this.currentScale = 'scale(1)';
-    }
-    /**
-     * Listens for the mouse over the button component
-     */
-    onMouseOver() {
-        if (this._enabled) {
-            this.currentOpacity = this.hoverOpacity;
-            this.currentScale = 'scale(' + this.hoverScale + ')';
-        }
-    }
-    /**
-     * Listens for the mouse out of the button component
-     */
-    onMouseOut() {
-        if (this._enabled) {
-            this.currentOpacity = this.defaultOpacity;
-            this.currentScale = 'scale(' + this.defaultScale + ')';
-        }
-    }
-    /**
-     * Listens for the mouse down on the button component
-     */
-    onMouseDown() {
-        if (this._enabled) {
-            this.currentOpacity = this.clickOpacity;
-            this.currentScale = 'scale(' + this.clickScale + ')';
-        }
-    }
-    /**
-     * Listens for the mouse up of the button component
-     */
-    onMouseUp() {
-        if (this._enabled) {
-            if (this.vibrateOnClick > 0 && window.navigator && window.navigator.vibrate) {
-                window.navigator.vibrate(this.vibrateOnClick);
-            }
-            if (this.releaseOnMouseUp) {
-                this.currentOpacity = this.defaultOpacity;
-                this.currentScale = 'scale(' + this.defaultScale + ')';
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ButtonBaseComponent, inputs: { releaseOnMouseUp: "releaseOnMouseUp", vibrateOnClick: "vibrateOnClick", defaultOpacity: "defaultOpacity", defaultScale: "defaultScale", hoverOpacity: "hoverOpacity", hoverScale: "hoverScale", clickOpacity: "clickOpacity", clickScale: "clickScale", disabledOpacity: "disabledOpacity", enabled: "enabled" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()", "pointerout": "onMouseOut()", "pointerleave": "onMouseOut()", "pointerdown": "onMouseDown()", "pointerup": "onMouseUp()" }, properties: { "style.opacity": "this.currentOpacity", "style.transform": "this.currentScale", "style.pointer-events": "this.pointerEvents" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonBaseComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { currentOpacity: [{
-                type: HostBinding,
-                args: ['style.opacity']
-            }], currentScale: [{
-                type: HostBinding,
-                args: ['style.transform']
-            }], pointerEvents: [{
-                type: HostBinding,
-                args: ['style.pointer-events']
-            }], releaseOnMouseUp: [{
-                type: Input
-            }], vibrateOnClick: [{
-                type: Input
-            }], defaultOpacity: [{
-                type: Input
-            }], defaultScale: [{
-                type: Input
-            }], hoverOpacity: [{
-                type: Input
-            }], hoverScale: [{
-                type: Input
-            }], clickOpacity: [{
-                type: Input
-            }], clickScale: [{
-                type: Input
-            }], disabledOpacity: [{
-                type: Input
-            }], enabled: [{
-                type: Input
-            }], onMouseOver: [{
-                type: HostListener,
-                args: ['mouseover']
-            }], onMouseOut: [{
-                type: HostListener,
-                args: ['mouseout']
-            }, {
-                type: HostListener,
-                args: ['pointerout']
-            }, {
-                type: HostListener,
-                args: ['pointerleave']
-            }], onMouseDown: [{
-                type: HostListener,
-                args: ['pointerdown']
-            }], onMouseUp: [{
-                type: HostListener,
-                args: ['pointerup']
+/**
+ * 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 is the base class for all button components
+ */
+class ButtonBaseComponent {
+    constructor() {
+        /**
+         * Defines the actual opacity that is binded on the html part
+         */
+        this.currentOpacity = .7;
+        /**
+         * Defines the actual scale that is binded on the html part
+         */
+        this.currentScale = 'scale(1)';
+        /**
+         * Defines if the button can be clicked or not
+         */
+        this.pointerEvents = 'initial';
+        /**
+         * Specifies if the button animations must rollback when the user releases the mouse or pointer after pressing it
+         */
+        this.releaseOnMouseUp = true;
+        /**
+         * Specifies the amount of milliseconds that the button will vibrate when it gets clicked (only on compatible devices and browsers)
+         * Set it to 0 to disable click vibration
+         */
+        this.vibrateOnClick = 25;
+        /**
+         * Defines the button opacity when it is not clicked
+         */
+        this.defaultOpacity = .7;
+        /**
+         * Defines the image scale when it is not clicked
+         */
+        this.defaultScale = 1;
+        /**
+         * Defines the button opacity when it is hovered
+         */
+        this.hoverOpacity = .8;
+        /**
+         * Defines the image scale when it is hovered
+         */
+        this.hoverScale = 1;
+        /**
+         * Defines the button opacity when it is clicked
+         */
+        this.clickOpacity = 1;
+        /**
+         * Defines the image scale when it is clicked
+         */
+        this.clickScale = 1;
+        /**
+         * Defines the button opacity when it is disabled
+         */
+        this.disabledOpacity = .2;
+        /**
+         * Stores the value that tells if the button is enabled or disabled
+         */
+        this._enabled = true;
+    }
+    /**
+     * Specifies if the button is enabled or disabled
+     */
+    set enabled(v) {
+        this._enabled = v;
+        this.currentOpacity = v ? this.defaultOpacity : this.disabledOpacity;
+        this.pointerEvents = v ? 'initial' : 'none';
+    }
+    ;
+    /**
+     * Set button default values
+     */
+    ngOnInit() {
+        this.currentOpacity = this._enabled ? this.defaultOpacity : this.disabledOpacity;
+        this.currentScale = 'scale(1)';
+    }
+    /**
+     * Listens for the mouse over the button component
+     */
+    onMouseOver() {
+        if (this._enabled) {
+            this.currentOpacity = this.hoverOpacity;
+            this.currentScale = 'scale(' + this.hoverScale + ')';
+        }
+    }
+    /**
+     * Listens for the mouse out of the button component
+     */
+    onMouseOut() {
+        if (this._enabled) {
+            this.currentOpacity = this.defaultOpacity;
+            this.currentScale = 'scale(' + this.defaultScale + ')';
+        }
+    }
+    /**
+     * Listens for the mouse down on the button component
+     */
+    onMouseDown() {
+        if (this._enabled) {
+            this.currentOpacity = this.clickOpacity;
+            this.currentScale = 'scale(' + this.clickScale + ')';
+        }
+    }
+    /**
+     * Listens for the mouse up of the button component
+     */
+    onMouseUp() {
+        if (this._enabled) {
+            if (this.vibrateOnClick > 0 && window.navigator && window.navigator.vibrate) {
+                window.navigator.vibrate(this.vibrateOnClick);
+            }
+            if (this.releaseOnMouseUp) {
+                this.currentOpacity = this.defaultOpacity;
+                this.currentScale = 'scale(' + this.defaultScale + ')';
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ButtonBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: ButtonBaseComponent, inputs: { releaseOnMouseUp: "releaseOnMouseUp", vibrateOnClick: "vibrateOnClick", defaultOpacity: "defaultOpacity", defaultScale: "defaultScale", hoverOpacity: "hoverOpacity", hoverScale: "hoverScale", clickOpacity: "clickOpacity", clickScale: "clickScale", disabledOpacity: "disabledOpacity", enabled: "enabled" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()", "pointerout": "onMouseOut()", "pointerleave": "onMouseOut()", "pointerdown": "onMouseDown()", "pointerup": "onMouseUp()" }, properties: { "style.opacity": "this.currentOpacity", "style.transform": "this.currentScale", "style.pointer-events": "this.pointerEvents" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ButtonBaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { currentOpacity: [{
+                type: HostBinding,
+                args: ['style.opacity']
+            }], currentScale: [{
+                type: HostBinding,
+                args: ['style.transform']
+            }], pointerEvents: [{
+                type: HostBinding,
+                args: ['style.pointer-events']
+            }], releaseOnMouseUp: [{
+                type: Input
+            }], vibrateOnClick: [{
+                type: Input
+            }], defaultOpacity: [{
+                type: Input
+            }], defaultScale: [{
+                type: Input
+            }], hoverOpacity: [{
+                type: Input
+            }], hoverScale: [{
+                type: Input
+            }], clickOpacity: [{
+                type: Input
+            }], clickScale: [{
+                type: Input
+            }], disabledOpacity: [{
+                type: Input
+            }], enabled: [{
+                type: Input
+            }], onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover']
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout']
+            }, {
+                type: HostListener,
+                args: ['pointerout']
+            }, {
+                type: HostListener,
+                args: ['pointerleave']
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['pointerdown']
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['pointerup']
             }] } });
 
-/**
- * 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 a basic button that uses an image as its visual appearance
- */
-class ButtonImageComponent extends ButtonBaseComponent {
-    constructor() {
-        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
-         */
-        this.buttonFade = true;
-        /**
-         * Defines the path to the image that is shown by this button
-         */
-        this.src = '';
-        /**
-         * Defines the percentual size of the image based on the button size. 100 means the image will fill the whole button,
-         * 50 only half, etc..
-         */
-        this.percentSize = 100;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonImageComponent, selector: "tg-button-image", inputs: { src: "src", percentSize: "percentSize" }, host: { properties: { "@buttonFade": "this.buttonFade" } }, usesInheritance: true, ngImport: i0, template: "<img src=\"{{src}}\"\r\n    [style.width]=\"percentSize + '%'\"\r\n    [style.height]=\"percentSize + '%'\" />", styles: [":host{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s ease,transform .2s cubic-bezier(.04,.62,.58,1);display:flex;justify-content:center;align-items:center}img{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}\n"], animations: [FadeAnimationClass.getTrigger('buttonFade', '300ms ease', '300ms ease')] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonImageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-button-image', animations: [FadeAnimationClass.getTrigger('buttonFade', '300ms ease', '300ms ease')], template: "<img src=\"{{src}}\"\r\n    [style.width]=\"percentSize + '%'\"\r\n    [style.height]=\"percentSize + '%'\" />", styles: [":host{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s ease,transform .2s cubic-bezier(.04,.62,.58,1);display:flex;justify-content:center;align-items:center}img{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}\n"] }]
-        }], propDecorators: { buttonFade: [{
-                type: HostBinding,
-                args: ['@buttonFade']
-            }], src: [{
-                type: Input
-            }], percentSize: [{
-                type: Input
+/**
+ * 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 a basic button that uses an image as its visual appearance
+ */
+class ButtonImageComponent extends ButtonBaseComponent {
+    constructor() {
+        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
+         */
+        this.buttonFade = true;
+        /**
+         * Defines the path to the image that is shown by this button
+         */
+        this.src = '';
+        /**
+         * Defines the percentual size of the image based on the button size. 100 means the image will fill the whole button,
+         * 50 only half, etc..
+         */
+        this.percentSize = 100;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ButtonImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ButtonImageComponent, selector: "tg-button-image", inputs: { src: "src", percentSize: "percentSize" }, host: { properties: { "@buttonFade": "this.buttonFade" } }, usesInheritance: true, ngImport: i0, template: "<img src=\"{{src}}\"\r\n    [style.width]=\"percentSize + '%'\"\r\n    [style.height]=\"percentSize + '%'\" />", styles: [":host{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s ease,transform .2s cubic-bezier(.04,.62,.58,1);display:flex;justify-content:center;align-items:center}img{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}\n"], animations: [FadeAnimationClass.getTrigger('buttonFade', '300ms ease', '300ms ease')] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ButtonImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-button-image', animations: [FadeAnimationClass.getTrigger('buttonFade', '300ms ease', '300ms ease')], template: "<img src=\"{{src}}\"\r\n    [style.width]=\"percentSize + '%'\"\r\n    [style.height]=\"percentSize + '%'\" />", styles: [":host{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s ease,transform .2s cubic-bezier(.04,.62,.58,1);display:flex;justify-content:center;align-items:center}img{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}\n"] }]
+        }], propDecorators: { buttonFade: [{
+                type: HostBinding,
+                args: ['@buttonFade']
+            }], src: [{
+                type: Input
+            }], percentSize: [{
+                type: Input
             }] } });
 
-/**
- * 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 a basic button without visual appearance, that is used as a container to load any content.
- */
-class ButtonContainerComponent extends ButtonBaseComponent {
-    constructor() {
-        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
-         */
-        this.buttonFade = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonContainerComponent, selector: "tg-button-container", host: { properties: { "@buttonFade": "this.buttonFade" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s ease,transform .2s cubic-bezier(.04,.62,.58,1);display:flex;justify-content:center;align-items:center}\n"], animations: [FadeAnimationClass.getTrigger('buttonFade', '300ms ease', '300ms ease')] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-button-container', animations: [FadeAnimationClass.getTrigger('buttonFade', '300ms ease', '300ms ease')], template: "<ng-content></ng-content>", styles: [":host{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s ease,transform .2s cubic-bezier(.04,.62,.58,1);display:flex;justify-content:center;align-items:center}\n"] }]
-        }], propDecorators: { buttonFade: [{
-                type: HostBinding,
-                args: ['@buttonFade']
+/**
+ * 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 a basic button without visual appearance, that is used as a container to load any content.
+ */
+class ButtonContainerComponent extends ButtonBaseComponent {
+    constructor() {
+        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
+         */
+        this.buttonFade = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ButtonContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ButtonContainerComponent, selector: "tg-button-container", host: { properties: { "@buttonFade": "this.buttonFade" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s ease,transform .2s cubic-bezier(.04,.62,.58,1);display:flex;justify-content:center;align-items:center}\n"], animations: [FadeAnimationClass.getTrigger('buttonFade', '300ms ease', '300ms ease')] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ButtonContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-button-container', animations: [FadeAnimationClass.getTrigger('buttonFade', '300ms ease', '300ms ease')], template: "<ng-content></ng-content>", styles: [":host{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s ease,transform .2s cubic-bezier(.04,.62,.58,1);display:flex;justify-content:center;align-items:center}\n"] }]
+        }], propDecorators: { buttonFade: [{
+                type: HostBinding,
+                args: ['@buttonFade']
             }] } });
 
-/**
- * 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 with dialog service
- */
-class DialogSingleOptionComponent extends DialogOptionsBaseComponent {
-    constructor(dialogRef, data) {
-        super();
-        this.dialogRef = dialogRef;
-        this.data = data;
-        if (data.texts.length < 1) {
-            throw new Error('DialogSingleOptionComponent expects 2 texts: The title and optionally a description');
-        }
-        if (data.options.length !== 1) {
-            throw new Error('DialogSingleOptionComponent expects only one option');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogSingleOptionComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogSingleOptionComponent, selector: "tg-dialog-single-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    (click)=\"dialogRef.close(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}button{float:right}\n"], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogSingleOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-dialog-single-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    (click)=\"dialogRef.close(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}button{float:right}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.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
+ */
+/**
+ * A dialog component with a single option button, to be used with dialog service
+ */
+class DialogSingleOptionComponent extends DialogOptionsBaseComponent {
+    constructor(dialogRef, data) {
+        super();
+        this.dialogRef = dialogRef;
+        this.data = data;
+        if (data.texts.length < 1) {
+            throw new Error('DialogSingleOptionComponent expects 2 texts: The title and optionally a description');
+        }
+        if (data.options.length !== 1) {
+            throw new Error('DialogSingleOptionComponent expects only one option');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogSingleOptionComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogSingleOptionComponent, selector: "tg-dialog-single-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    (click)=\"dialogRef.close(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}button{float:right}\n"], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogSingleOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-dialog-single-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    (click)=\"dialogRef.close(0)\">\r\n    \r\n    {{data.options[0]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}button{float:right}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.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
- */
-/**
- * A dialog component with two option buttons, to be used with dialog service.
- * The first of the options is considered to be the primary one and will therefore have more visual accent
- */
-class DialogTwoOptionComponent extends DialogOptionsBaseComponent {
-    constructor(dialogRef, data) {
-        super();
-        this.dialogRef = dialogRef;
-        this.data = data;
-        if (data.texts.length < 1) {
-            throw new Error('DialogTwoOptionComponent expects 2 texts: The title and optionally a description');
-        }
-        if (data.options.length !== 2) {
-            throw new Error('DialogTwoOptionComponent expects only two options');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogTwoOptionComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogTwoOptionComponent, selector: "tg-dialog-two-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<div class=\"buttonsContainer\">\r\n\r\n    <button mat-raised-button color=\"primary\" class=\"primaryButton\"\r\n        (click)=\"dialogRef.close(0)\">\r\n        \r\n        {{data.options[0]}}\r\n        \r\n    </button>\r\n    \r\n    <button mat-button\r\n        (click)=\"dialogRef.close(1)\">\r\n        \r\n        {{data.options[1]}}\r\n        \r\n    </button>\r\n    \r\n</div>\r\n", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}.buttonsContainer{width:100%;max-width:530px;display:flex;flex-direction:row-reverse;float:right}button{width:50%;padding:0}.primaryButton{margin-left:2%}\n"], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogTwoOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-dialog-two-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<div class=\"buttonsContainer\">\r\n\r\n    <button mat-raised-button color=\"primary\" class=\"primaryButton\"\r\n        (click)=\"dialogRef.close(0)\">\r\n        \r\n        {{data.options[0]}}\r\n        \r\n    </button>\r\n    \r\n    <button mat-button\r\n        (click)=\"dialogRef.close(1)\">\r\n        \r\n        {{data.options[1]}}\r\n        \r\n    </button>\r\n    \r\n</div>\r\n", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}.buttonsContainer{width:100%;max-width:530px;display:flex;flex-direction:row-reverse;float:right}button{width:50%;padding:0}.primaryButton{margin-left:2%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.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
+ */
+/**
+ * A dialog component with two option buttons, to be used with dialog service.
+ * The first of the options is considered to be the primary one and will therefore have more visual accent
+ */
+class DialogTwoOptionComponent extends DialogOptionsBaseComponent {
+    constructor(dialogRef, data) {
+        super();
+        this.dialogRef = dialogRef;
+        this.data = data;
+        if (data.texts.length < 1) {
+            throw new Error('DialogTwoOptionComponent expects 2 texts: The title and optionally a description');
+        }
+        if (data.options.length !== 2) {
+            throw new Error('DialogTwoOptionComponent expects only two options');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogTwoOptionComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogTwoOptionComponent, selector: "tg-dialog-two-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<div class=\"buttonsContainer\">\r\n\r\n    <button mat-raised-button color=\"primary\" class=\"primaryButton\"\r\n        (click)=\"dialogRef.close(0)\">\r\n        \r\n        {{data.options[0]}}\r\n        \r\n    </button>\r\n    \r\n    <button mat-button\r\n        (click)=\"dialogRef.close(1)\">\r\n        \r\n        {{data.options[1]}}\r\n        \r\n    </button>\r\n    \r\n</div>\r\n", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}.buttonsContainer{width:100%;max-width:530px;display:flex;flex-direction:row-reverse;float:right}button{width:50%;padding:0}.primaryButton{margin-left:2%}\n"], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogTwoOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-dialog-two-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<div class=\"buttonsContainer\">\r\n\r\n    <button mat-raised-button color=\"primary\" class=\"primaryButton\"\r\n        (click)=\"dialogRef.close(0)\">\r\n        \r\n        {{data.options[0]}}\r\n        \r\n    </button>\r\n    \r\n    <button mat-button\r\n        (click)=\"dialogRef.close(1)\">\r\n        \r\n        {{data.options[1]}}\r\n        \r\n    </button>\r\n    \r\n</div>\r\n", styles: [":host{min-height:300px}h3{margin-bottom:25px}p{margin-bottom:52px}.buttonsContainer{width:100%;max-width:530px;display:flex;flex-direction:row-reverse;float:right}button{width:50%;padding:0}.primaryButton{margin-left:2%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.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
- */
-/**
- * An abstraction of the browser entity an all its related operations and properties
- */
-class BrowserService extends BrowserManager {
-    constructor(location) {
-        super();
-        this.location = location;
-    }
-    /**
-     * 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
-     */
-    setURI(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: "16.2.12", ngImport: i0, type: BrowserService, deps: [{ token: i3.Location }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BrowserService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BrowserService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i3.Location }]; } });
+/**
+ * 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
+ */
+/**
+ * An abstraction of the browser entity an all its related operations and properties
+ */
+class BrowserService extends BrowserManager {
+    constructor(location) {
+        super();
+        this.location = location;
+    }
+    /**
+     * 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
+     */
+    setURI(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: "17.0.8", ngImport: i0, type: BrowserService, deps: [{ token: i3.Location }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BrowserService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BrowserService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i3.Location }] });
 
-/**
- * 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 directive is used to perform an autofocus on an element every time it is displayed */
-/**
- * This directive is used to perform an autofocus on an element every time it is displayed
- * If we set the autoFocusOnDisplay tag to the html element, it will be automatically focused after it is shown.
- */
-class AutoFocusOnDisplayDirective {
-    constructor(el, zone, renderer) {
-        this.el = el;
-        this.zone = zone;
-        this.renderer = renderer;
-        if (!el.nativeElement['focus']) {
-            throw new Error('Element does not accept focus');
-        }
-    }
-    ngAfterContentInit() {
-        this.zone.runOutsideAngular(() => setTimeout(() => {
-            this.renderer.selectRootElement(this.el.nativeElement).focus();
-        }, 0));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoFocusOnDisplayDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AutoFocusOnDisplayDirective, selector: "[autoFocusOnDisplay]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoFocusOnDisplayDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[autoFocusOnDisplay]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; } });
+/**
+ * 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 directive is used to perform an autofocus on an element every time it is displayed */
+/**
+ * This directive is used to perform an autofocus on an element every time it is displayed
+ * If we set the autoFocusOnDisplay tag to the html element, it will be automatically focused after it is shown.
+ */
+class AutoFocusOnDisplayDirective {
+    constructor(el, zone, renderer) {
+        this.el = el;
+        this.zone = zone;
+        this.renderer = renderer;
+        if (!el.nativeElement['focus']) {
+            throw new Error('Element does not accept focus');
+        }
+    }
+    ngAfterContentInit() {
+        this.zone.runOutsideAngular(() => setTimeout(() => {
+            this.renderer.selectRootElement(this.el.nativeElement).focus();
+        }, 0));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AutoFocusOnDisplayDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: AutoFocusOnDisplayDirective, selector: "[autoFocusOnDisplay]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AutoFocusOnDisplayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[autoFocusOnDisplay]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }] });
 
-/**
- * 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 which allows us to select one single item from a list. The elements on that list are displayed on a table
- * which may show a scroll if necessary when there are many elements on the list.
- *
- * It also allows us to filter inside the list with a custom text that we can type into a search input, which is optional.
- *
- * texts parameter must contain the title, the description (optional), the filter input title (optional), and the submit button caption.
- * If that caption is not provided, the selection will be automatically performed once user clicks on an element on the list. Otherwise,
- * the element will be selected on the list and the selection will be performed once the user clicks on the submit button.
- *
- * options parameter must contain the list of elements that will be displayed to the user
- */
-class DialogSingleSelectionListComponent extends DialogOptionsBaseComponent {
-    constructor(dialogRef, browserService, data) {
-        super();
-        this.dialogRef = dialogRef;
-        this.browserService = browserService;
-        this.data = data;
-        /**
-         * Declare a reference to the string utils class so it can be used on the html part
-         */
-        this.stringUtils = StringUtils;
-        /**
-         * Contains the list of elements that will be directly shown to the user at the component list.
-         * It may be filtered or not depending on this component setup and the user input
-         */
-        this.filteredOptions = [];
-        /**
-         * Contains the original list of elements that are provided to be listed on this component before
-         * being possibly filtered. It is only used as a backup, not shown to the user
-         */
-        this.originalOptions = [];
-        /**
-         * The same list as the originally provided but processed for a better text search.
-         * It will be used to perform the search, but not shown to the user.
-         */
-        this.originalOptionsFullTextSearch = [];
-        /**
-         * Stores the index for the element that's been selected by the user
-         */
-        this.selectedItemIndex = -1;
-        /**
-         * This method is used to greatly improve ngFor performance with arrays of primitive values. It tells the refresh
-         * function to work by index instead of by value. The change in performance when refreshing the list is massive.
-         */
-        this.trackByFn = (index, _value) => index;
-        if (data.texts.length < 1) {
-            throw new Error('DialogSingleSelectionListComponent expects 4 texts: The title, the description (optional), the filter input title (optional), and the submit button caption');
-        }
-        if (data.options.length < 1) {
-            throw new Error('DialogSingleSelectionListComponent expects one or more options');
-        }
-        this.originalOptions = data.options;
-        for (let option of this.originalOptions) {
-            this.filteredOptions.push(option);
-            this.originalOptionsFullTextSearch.push(StringUtils.formatForFullTextSearch(option));
-        }
-    }
-    /**
-     * Method to calculate the max possible height that the list items container is allowed to have
-     */
-    getListItemsContainerMaxheight() {
-        return (this.browserService.getWindowHeight() * 0.6) + 'px';
-    }
-    /**
-     * When the user types a value on the input element to filter the list, this method will perform
-     * that filtering and refresh the list
-     */
-    onSearchChange(input) {
-        this.selectedItemIndex = -1;
-        let inputValue = StringUtils.formatForFullTextSearch(input.value);
-        for (let i = 0; i < this.originalOptionsFullTextSearch.length; i++) {
-            if (inputValue === '' ||
-                this.originalOptionsFullTextSearch[i].indexOf(inputValue) >= 0) {
-                this.filteredOptions[i] = this.originalOptions[i];
-            }
-            else {
-                this.filteredOptions[i] = '';
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogSingleSelectionListComponent, deps: [{ token: i1$1.MatDialogRef }, { token: BrowserService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogSingleSelectionListComponent, selector: "tg-dialog-single-selection-list", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? dialogRef.close(i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"dialogRef.close(selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px}button{float:right}\n"], dependencies: [{ kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AutoFocusOnDisplayDirective, selector: "[autoFocusOnDisplay]" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogSingleSelectionListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-dialog-single-selection-list', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? dialogRef.close(i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"dialogRef.close(selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px}button{float:right}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: BrowserService }, { 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
+ */
+/**
+ * A dialog component which allows us to select one single item from a list. The elements on that list are displayed on a table
+ * which may show a scroll if necessary when there are many elements on the list.
+ *
+ * It also allows us to filter inside the list with a custom text that we can type into a search input, which is optional.
+ *
+ * texts parameter must contain the title, the description (optional), the filter input title (optional), and the submit button caption.
+ * If that caption is not provided, the selection will be automatically performed once user clicks on an element on the list. Otherwise,
+ * the element will be selected on the list and the selection will be performed once the user clicks on the submit button.
+ *
+ * options parameter must contain the list of elements that will be displayed to the user
+ */
+class DialogSingleSelectionListComponent extends DialogOptionsBaseComponent {
+    constructor(dialogRef, browserService, data) {
+        super();
+        this.dialogRef = dialogRef;
+        this.browserService = browserService;
+        this.data = data;
+        /**
+         * Declare a reference to the string utils class so it can be used on the html part
+         */
+        this.stringUtils = StringUtils;
+        /**
+         * Contains the list of elements that will be directly shown to the user at the component list.
+         * It may be filtered or not depending on this component setup and the user input
+         */
+        this.filteredOptions = [];
+        /**
+         * Contains the original list of elements that are provided to be listed on this component before
+         * being possibly filtered. It is only used as a backup, not shown to the user
+         */
+        this.originalOptions = [];
+        /**
+         * The same list as the originally provided but processed for a better text search.
+         * It will be used to perform the search, but not shown to the user.
+         */
+        this.originalOptionsFullTextSearch = [];
+        /**
+         * Stores the index for the element that's been selected by the user
+         */
+        this.selectedItemIndex = -1;
+        /**
+         * This method is used to greatly improve ngFor performance with arrays of primitive values. It tells the refresh
+         * function to work by index instead of by value. The change in performance when refreshing the list is massive.
+         */
+        this.trackByFn = (index, _value) => index;
+        if (data.texts.length < 1) {
+            throw new Error('DialogSingleSelectionListComponent expects 4 texts: The title, the description (optional), the filter input title (optional), and the submit button caption');
+        }
+        if (data.options.length < 1) {
+            throw new Error('DialogSingleSelectionListComponent expects one or more options');
+        }
+        this.originalOptions = data.options;
+        for (let option of this.originalOptions) {
+            this.filteredOptions.push(option);
+            this.originalOptionsFullTextSearch.push(StringUtils.formatForFullTextSearch(option));
+        }
+    }
+    /**
+     * Method to calculate the max possible height that the list items container is allowed to have
+     */
+    getListItemsContainerMaxheight() {
+        return (this.browserService.getWindowHeight() * 0.6) + 'px';
+    }
+    /**
+     * When the user types a value on the input element to filter the list, this method will perform
+     * that filtering and refresh the list
+     */
+    onSearchChange(input) {
+        this.selectedItemIndex = -1;
+        let inputValue = StringUtils.formatForFullTextSearch(input.value);
+        for (let i = 0; i < this.originalOptionsFullTextSearch.length; i++) {
+            if (inputValue === '' ||
+                this.originalOptionsFullTextSearch[i].indexOf(inputValue) >= 0) {
+                this.filteredOptions[i] = this.originalOptions[i];
+            }
+            else {
+                this.filteredOptions[i] = '';
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogSingleSelectionListComponent, deps: [{ token: i1$1.MatDialogRef }, { token: BrowserService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogSingleSelectionListComponent, selector: "tg-dialog-single-selection-list", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? dialogRef.close(i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"dialogRef.close(selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px}button{float:right}\n"], dependencies: [{ kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AutoFocusOnDisplayDirective, selector: "[autoFocusOnDisplay]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogSingleSelectionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-dialog-single-selection-list', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? dialogRef.close(i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"dialogRef.close(selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px}button{float:right}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: BrowserService }, { 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
- */
-/**
- * A dialog component that is designed to show more than one option buttons (usually more than two), to be used with dialog service
- */
-class DialogMultipleOptionComponent extends DialogOptionsBaseComponent {
-    constructor(dialogRef, data) {
-        super();
-        this.dialogRef = dialogRef;
-        this.data = data;
-        if (data.texts.length < 1) {
-            throw new Error('DialogMultipleOptionComponent expects 2 texts: The title and optionally a description');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogMultipleOptionComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogMultipleOptionComponent, selector: "tg-dialog-multiple-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    *ngFor=\"let option of data.options; let i = index\"\r\n    (click)=\"dialogRef.close(i)\">\r\n    \r\n    {{option}}\r\n    \r\n</button>", styles: [":host{display:flex;flex-direction:column;min-height:193px}h3{margin-bottom:45px}button{margin-bottom:25px}\n"], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogMultipleOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tg-dialog-multiple-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    *ngFor=\"let option of data.options; let i = index\"\r\n    (click)=\"dialogRef.close(i)\">\r\n    \r\n    {{option}}\r\n    \r\n</button>", styles: [":host{display:flex;flex-direction:column;min-height:193px}h3{margin-bottom:45px}button{margin-bottom:25px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.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
+ */
+/**
+ * A dialog component that is designed to show more than one option buttons (usually more than two), to be used with dialog service
+ */
+class DialogMultipleOptionComponent extends DialogOptionsBaseComponent {
+    constructor(dialogRef, data) {
+        super();
+        this.dialogRef = dialogRef;
+        this.data = data;
+        if (data.texts.length < 1) {
+            throw new Error('DialogMultipleOptionComponent expects 2 texts: The title and optionally a description');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogMultipleOptionComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DialogMultipleOptionComponent, selector: "tg-dialog-multiple-option", usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    *ngFor=\"let option of data.options; let i = index\"\r\n    (click)=\"dialogRef.close(i)\">\r\n    \r\n    {{option}}\r\n    \r\n</button>", styles: [":host{display:flex;flex-direction:column;min-height:193px}h3{margin-bottom:45px}button{margin-bottom:25px}\n"], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DialogMultipleOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-dialog-multiple-option', template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<p *ngIf=\"data.texts.length > 1\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    *ngFor=\"let option of data.options; let i = index\"\r\n    (click)=\"dialogRef.close(i)\">\r\n    \r\n    {{option}}\r\n    \r\n</button>", styles: [":host{display:flex;flex-direction:column;min-height:193px}h3{margin-bottom:45px}button{margin-bottom:25px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.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
- */
-/** This directive is used to listen for onInit events on raw html elements */
-/**
- * This directive is used to listen for onInit events on raw html elements
- * If we place (elementCreated)="someMethod()" on the element at the html template part, when the element
- * that uses this directive is visually created, someMethod() will be called.
- */
-class ElementCreatedDirective {
-    constructor() {
-        /**
-         * Event that will be dispatched once element is created
-         */
-        this.elementCreated = new EventEmitter();
-    }
-    /**
-     * Listen for the on init event
-     */
-    ngOnInit() {
-        this.elementCreated.next(this);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementCreatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElementCreatedDirective, selector: "[elementCreated]", outputs: { elementCreated: "elementCreated" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementCreatedDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elementCreated]'
-                }]
-        }], propDecorators: { elementCreated: [{
-                type: Output,
-                args: ['elementCreated']
+/**
+ * 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 directive is used to listen for onInit events on raw html elements */
+/**
+ * This directive is used to listen for onInit events on raw html elements
+ * If we place (elementCreated)="someMethod()" on the element at the html template part, when the element
+ * that uses this directive is visually created, someMethod() will be called.
+ */
+class ElementCreatedDirective {
+    constructor() {
+        /**
+         * Event that will be dispatched once element is created
+         */
+        this.elementCreated = new EventEmitter();
+    }
+    /**
+     * Listen for the on init event
+     */
+    ngOnInit() {
+        this.elementCreated.next(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElementCreatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: ElementCreatedDirective, selector: "[elementCreated]", outputs: { elementCreated: "elementCreated" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElementCreatedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elementCreated]'
+                }]
+        }], propDecorators: { elementCreated: [{
+                type: Output,
+                args: ['elementCreated']
             }] } });
 
-/**
- * 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 directive is used to listen for onDestroy events on raw html elements */
-/**
- * This directive is used to listen for onDestroy events on raw html elements
- * If we place (elementDestroyed)="someMethod()" on the element at the html template part, when the element
- * that uses this directive is visually destroyed from the screen, someMethod() will be called.
- */
-class ElementDestroyedDirective {
-    constructor() {
-        /**
-         * Event that will be dispatched once element is destroyed
-         */
-        this.elementDestroyed = new EventEmitter();
-    }
-    /**
-     * Listen for the on destroy event
-     */
-    ngOnDestroy() {
-        this.elementDestroyed.next(this);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementDestroyedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElementDestroyedDirective, selector: "[elementDestroyed]", outputs: { elementDestroyed: "elementDestroyed" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementDestroyedDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elementDestroyed]'
-                }]
-        }], propDecorators: { elementDestroyed: [{
-                type: Output,
-                args: ['elementDestroyed']
+/**
+ * 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 directive is used to listen for onDestroy events on raw html elements */
+/**
+ * This directive is used to listen for onDestroy events on raw html elements
+ * If we place (elementDestroyed)="someMethod()" on the element at the html template part, when the element
+ * that uses this directive is visually destroyed from the screen, someMethod() will be called.
+ */
+class ElementDestroyedDirective {
+    constructor() {
+        /**
+         * Event that will be dispatched once element is destroyed
+         */
+        this.elementDestroyed = new EventEmitter();
+    }
+    /**
+     * Listen for the on destroy event
+     */
+    ngOnDestroy() {
+        this.elementDestroyed.next(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElementDestroyedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: ElementDestroyedDirective, selector: "[elementDestroyed]", outputs: { elementDestroyed: "elementDestroyed" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElementDestroyedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elementDestroyed]'
+                }]
+        }], propDecorators: { elementDestroyed: [{
+                type: Output,
+                args: ['elementDestroyed']
             }] } });
 
-/**
- * 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 directive is used to perform an automatic select all text on an element every time it is focused */
-/**
- * This directive is used to perform an an automatic select all text on an element every time it is focused.
- * If we set the autoSelectTextOnFocus tag to the html element, its text will be automatically selected after it gets the focus.
- */
-class AutoSelectTextOnFocusDirective {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        if (!el.nativeElement['select']) {
-            throw new Error('Element does not accept select');
-        }
-    }
-    onFocus() {
-        this.renderer.selectRootElement(this.el.nativeElement).select();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoSelectTextOnFocusDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AutoSelectTextOnFocusDirective, selector: "[autoSelectTextOnFocus]", host: { listeners: { "focus": "onFocus($event)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoSelectTextOnFocusDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[autoSelectTextOnFocus]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onFocus: [{
-                type: HostListener,
-                args: ['focus', ['$event']]
+/**
+ * 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 directive is used to perform an automatic select all text on an element every time it is focused */
+/**
+ * This directive is used to perform an an automatic select all text on an element every time it is focused.
+ * If we set the autoSelectTextOnFocus tag to the html element, its text will be automatically selected after it gets the focus.
+ */
+class AutoSelectTextOnFocusDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        if (!el.nativeElement['select']) {
+            throw new Error('Element does not accept select');
+        }
+    }
+    onFocus() {
+        this.renderer.selectRootElement(this.el.nativeElement).select();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AutoSelectTextOnFocusDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: AutoSelectTextOnFocusDirective, selector: "[autoSelectTextOnFocus]", host: { listeners: { "focus": "onFocus($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AutoSelectTextOnFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[autoSelectTextOnFocus]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { onFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
             }] } });
 
-/**
- * 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 file contains the root module that contains all the library declarations and exports.
- */
-class TurboGuiAngularModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TurboGuiAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TurboGuiAngularModule, declarations: [BusyStateBaseComponent,
-            DialogErrorComponent,
-            DialogSingleOptionComponent,
-            DialogTwoOptionComponent,
-            DialogMultipleOptionComponent,
-            DialogSingleSelectionListComponent,
-            ViewsContainerComponent,
-            ButtonImageComponent,
-            ButtonContainerComponent,
-            ElementCreatedDirective,
-            ElementDestroyedDirective,
-            AutoFocusOnDisplayDirective,
-            AutoSelectTextOnFocusDirective], imports: [MatDialogModule,
-            MatSnackBarModule,
-            MatInputModule,
-            MatButtonModule,
-            MatFormFieldModule,
-            BrowserAnimationsModule], exports: [BusyStateBaseComponent,
-            ViewsContainerComponent,
-            ButtonImageComponent,
-            ButtonContainerComponent,
-            DialogErrorComponent,
-            DialogSingleOptionComponent,
-            DialogTwoOptionComponent,
-            DialogMultipleOptionComponent,
-            DialogSingleSelectionListComponent,
-            ElementCreatedDirective,
-            ElementDestroyedDirective,
-            AutoFocusOnDisplayDirective,
-            AutoSelectTextOnFocusDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TurboGuiAngularModule, providers: [
-            DialogService,
-            LocalizationService,
-            HTTPService,
-            NotificationService,
-            UserService,
-            ViewsService,
-            BrowserService
-        ], imports: [MatDialogModule,
-            MatSnackBarModule,
-            MatInputModule,
-            MatButtonModule,
-            MatFormFieldModule,
-            BrowserAnimationsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TurboGuiAngularModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        MatDialogModule,
-                        MatSnackBarModule,
-                        MatInputModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        BrowserAnimationsModule
-                    ],
-                    declarations: [
-                        BusyStateBaseComponent,
-                        DialogErrorComponent,
-                        DialogSingleOptionComponent,
-                        DialogTwoOptionComponent,
-                        DialogMultipleOptionComponent,
-                        DialogSingleSelectionListComponent,
-                        ViewsContainerComponent,
-                        ButtonImageComponent,
-                        ButtonContainerComponent,
-                        ElementCreatedDirective,
-                        ElementDestroyedDirective,
-                        AutoFocusOnDisplayDirective,
-                        AutoSelectTextOnFocusDirective
-                    ],
-                    // Globally available singleton services are added here
-                    providers: [
-                        DialogService,
-                        LocalizationService,
-                        HTTPService,
-                        NotificationService,
-                        UserService,
-                        ViewsService,
-                        BrowserService
-                    ],
-                    exports: [
-                        BusyStateBaseComponent,
-                        ViewsContainerComponent,
-                        ButtonImageComponent,
-                        ButtonContainerComponent,
-                        DialogErrorComponent,
-                        DialogSingleOptionComponent,
-                        DialogTwoOptionComponent,
-                        DialogMultipleOptionComponent,
-                        DialogSingleSelectionListComponent,
-                        ElementCreatedDirective,
-                        ElementDestroyedDirective,
-                        AutoFocusOnDisplayDirective,
-                        AutoSelectTextOnFocusDirective
-                    ]
-                }]
+/**
+ * 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 file contains the root module that contains all the library declarations and exports.
+ */
+class TurboGuiAngularModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TurboGuiAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TurboGuiAngularModule, declarations: [BusyStateBaseComponent,
+            DialogErrorComponent,
+            DialogSingleOptionComponent,
+            DialogTwoOptionComponent,
+            DialogMultipleOptionComponent,
+            DialogSingleSelectionListComponent,
+            ViewsContainerComponent,
+            ButtonImageComponent,
+            ButtonContainerComponent,
+            ElementCreatedDirective,
+            ElementDestroyedDirective,
+            AutoFocusOnDisplayDirective,
+            AutoSelectTextOnFocusDirective], imports: [MatDialogModule,
+            MatSnackBarModule,
+            MatInputModule,
+            MatButtonModule,
+            MatFormFieldModule,
+            BrowserAnimationsModule], exports: [BusyStateBaseComponent,
+            ViewsContainerComponent,
+            ButtonImageComponent,
+            ButtonContainerComponent,
+            DialogErrorComponent,
+            DialogSingleOptionComponent,
+            DialogTwoOptionComponent,
+            DialogMultipleOptionComponent,
+            DialogSingleSelectionListComponent,
+            ElementCreatedDirective,
+            ElementDestroyedDirective,
+            AutoFocusOnDisplayDirective,
+            AutoSelectTextOnFocusDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TurboGuiAngularModule, providers: [
+            DialogService,
+            LocalizationService,
+            HTTPService,
+            NotificationService,
+            UserService,
+            ViewsService,
+            BrowserService
+        ], imports: [MatDialogModule,
+            MatSnackBarModule,
+            MatInputModule,
+            MatButtonModule,
+            MatFormFieldModule,
+            BrowserAnimationsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TurboGuiAngularModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        MatDialogModule,
+                        MatSnackBarModule,
+                        MatInputModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        BrowserAnimationsModule
+                    ],
+                    declarations: [
+                        BusyStateBaseComponent,
+                        DialogErrorComponent,
+                        DialogSingleOptionComponent,
+                        DialogTwoOptionComponent,
+                        DialogMultipleOptionComponent,
+                        DialogSingleSelectionListComponent,
+                        ViewsContainerComponent,
+                        ButtonImageComponent,
+                        ButtonContainerComponent,
+                        ElementCreatedDirective,
+                        ElementDestroyedDirective,
+                        AutoFocusOnDisplayDirective,
+                        AutoSelectTextOnFocusDirective
+                    ],
+                    // Globally available singleton services are added here
+                    providers: [
+                        DialogService,
+                        LocalizationService,
+                        HTTPService,
+                        NotificationService,
+                        UserService,
+                        ViewsService,
+                        BrowserService
+                    ],
+                    exports: [
+                        BusyStateBaseComponent,
+                        ViewsContainerComponent,
+                        ButtonImageComponent,
+                        ButtonContainerComponent,
+                        DialogErrorComponent,
+                        DialogSingleOptionComponent,
+                        DialogTwoOptionComponent,
+                        DialogMultipleOptionComponent,
+                        DialogSingleSelectionListComponent,
+                        ElementCreatedDirective,
+                        ElementDestroyedDirective,
+                        AutoFocusOnDisplayDirective,
+                        AutoSelectTextOnFocusDirective
+                    ]
+                }]
         }] });
 
-/**
- * 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
- */
-/**
- * Captures all the application exceptions and performs any required action.
- * It also contains multiple general error management features.
- *
- * To define this class as your application error handler, you must add the following to your
- * main app module providers:
- *      {
- *          provide: ErrorHandler,
- *          useClass: GlobalErrorService
- *      },
- *      GlobalErrorService
- *
- * You cannot access the error handler at runtime. If you need to modify any of the behaviours
- * or implement your custom ones, you must extend this class and set your new one as the error
- * handler provider.
- */
-class GlobalErrorService {
-    constructor() {
-        /**
-         * Enables or disables the error notification to user via an alert box
-         * Extend this class and override this value on your custom error handle to change it
-         */
-        this.showExceptionsToUser = true;
-        /**
-         * Enables or disables the error notification to user via an alert box
-         * Extend this class and override this value on your custom error handle to change it
-         */
-        this.showExceptionsOnConsole = true;
-        /**
-         * Defines the text that will be used for the alert that is shown to the user when an exception happens
-         * and showExceptionsToUser is true
-         * Extend this class and override this value on your custom error handle to change it
-         */
-        this.errorAlertMessage = 'Application exception:\n\n';
-    }
-    /**
-     * Show an alert with the received error detail and also log it to the js console.
-     *
-     * Angular expects at least this method to be implemented on any class that is used as a global exception handler.
-     *
-     * @param error An error instance
-     */
-    handleError(error) {
-        if (this.showExceptionsToUser) {
-            alert(this.errorAlertMessage + error);
-        }
-        if (this.showExceptionsOnConsole) {
-            console.log(error);
-        }
-        throw error;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalErrorService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalErrorService, 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
+ */
+/**
+ * Captures all the application exceptions and performs any required action.
+ * It also contains multiple general error management features.
+ *
+ * To define this class as your application error handler, you must add the following to your
+ * main app module providers:
+ *      {
+ *          provide: ErrorHandler,
+ *          useClass: GlobalErrorService
+ *      },
+ *      GlobalErrorService
+ *
+ * You cannot access the error handler at runtime. If you need to modify any of the behaviours
+ * or implement your custom ones, you must extend this class and set your new one as the error
+ * handler provider.
+ */
+class GlobalErrorService {
+    constructor() {
+        /**
+         * Enables or disables the error notification to user via an alert box
+         * Extend this class and override this value on your custom error handle to change it
+         */
+        this.showExceptionsToUser = true;
+        /**
+         * Enables or disables the error notification to user via an alert box
+         * Extend this class and override this value on your custom error handle to change it
+         */
+        this.showExceptionsOnConsole = true;
+        /**
+         * Defines the text that will be used for the alert that is shown to the user when an exception happens
+         * and showExceptionsToUser is true
+         * Extend this class and override this value on your custom error handle to change it
+         */
+        this.errorAlertMessage = 'Application exception:\n\n';
+    }
+    /**
+     * Show an alert with the received error detail and also log it to the js console.
+     *
+     * Angular expects at least this method to be implemented on any class that is used as a global exception handler.
+     *
+     * @param error An error instance
+     */
+    handleError(error) {
+        if (this.showExceptionsToUser) {
+            alert(this.errorAlertMessage + error);
+        }
+        if (this.showExceptionsOnConsole) {
+            console.log(error);
+        }
+        throw error;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalErrorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalErrorService, 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
- */
-/**
- * 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 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
- */
-/**
- * Defines the data that is contained inside a GUI notification
- */
-class GUINotification {
-    constructor(name, type = '', data = null) {
-        /**
-         * The name for this notification
-         */
-        this.name = '';
-        /**
-         * An optional type to categorize this notification in case the name is not enough
-         * to uniquely identify it
-         */
-        this.type = '';
-        /**
-         * Additional data to send with the notification
-         */
-        this.data = null;
-        this.name = name;
-        this.type = type;
-        this.data = 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
+ */
+/**
+ * Defines the data that is contained inside a GUI notification
+ */
+class GUINotification {
+    constructor(name, type = '', data = null) {
+        /**
+         * The name for this notification
+         */
+        this.name = '';
+        /**
+         * An optional type to categorize this notification in case the name is not enough
+         * to uniquely identify it
+         */
+        this.type = '';
+        /**
+         * Additional data to send with the notification
+         */
+        this.data = null;
+        this.name = name;
+        this.type = type;
+        this.data = 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
- */
-/**
- * Defines an application view.
- * Our View components must extend this class so they can be manipulated via ViewsService
- */
-class View {
-    /**
-     * In order for the views service to know which model class must be created when setting a new active view,
-     * each view must specify the class for the view model at the overriden constructor super() call.
-     * All view models must also extend ViewModel. If we do not plan to attach a model to a view, we can pass a null value to
-     * the constructor super() call.
-     *
-     * A new model instance will be automatically created each time the view is added to the views container, and
-     * destroyed when the view is removed. So the view model will only live while the view is active on the views service.
-     */
-    constructor(modelClass) {
-        this._modelClass = null;
-        this._modelClass = modelClass;
-    }
-    /**
-     * Obtain the class type for the model that is linked to this view, or null if the view model is not yet instantiated.
-     */
-    get modelClass() {
-        return this._modelClass;
-    }
+/**
+ * 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
+ */
+/**
+ * Defines an application view.
+ * Our View components must extend this class so they can be manipulated via ViewsService
+ */
+class View {
+    /**
+     * In order for the views service to know which model class must be created when setting a new active view,
+     * each view must specify the class for the view model at the overriden constructor super() call.
+     * All view models must also extend ViewModel. If we do not plan to attach a model to a view, we can pass a null value to
+     * the constructor super() call.
+     *
+     * A new model instance will be automatically created each time the view is added to the views container, and
+     * destroyed when the view is removed. So the view model will only live while the view is active on the views service.
+     */
+    constructor(modelClass) {
+        this._modelClass = null;
+        this._modelClass = modelClass;
+    }
+    /**
+     * Obtain the class type for the model that is linked to this view, or null if the view model is not yet instantiated.
+     */
+    get modelClass() {
+        return this._modelClass;
+    }
 }
 
-/**
- * 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
- */
-/**
- * Defines the model base class for an application view
- */
-class ViewModel {
+/**
+ * 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
+ */
+/**
+ * Defines the model base class for an application view
+ */
+class ViewModel {
 }
 
-/**
- * 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
- */
-/**
- * Defines the service base class for a view service class. All services that are used by views must extend this.
- * We must create the view services as an @Injectable() angular class which will be globally available at any time, but we must take
- * into consideration that the view model will only be instantiated when the view is active.
- */
-class ViewService {
-    /**
-     * Class requires a views service instance
-     */
-    constructor(viewsService) {
-        this.viewsService = viewsService;
-    }
-    /**
-     * A reference to the currently active view model
-     */
-    get model() {
-        return this.viewsService.model;
-    }
+/**
+ * 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
+ */
+/**
+ * Defines the service base class for a view service class. All services that are used by views must extend this.
+ * We must create the view services as an @Injectable() angular class which will be globally available at any time, but we must take
+ * into consideration that the view model will only be instantiated when the view is active.
+ */
+class ViewService {
+    /**
+     * Class requires a views service instance
+     */
+    constructor(viewsService) {
+        this.viewsService = viewsService;
+    }
+    /**
+     * A reference to the currently active view model
+     */
+    get model() {
+        return this.viewsService.model;
+    }
 }
 
-/**
- * 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
- */
-/**
- * Sometimes it is necessary to apply some kind of buffer to the user input for certain operations that may be executed
- * several times but we need to capture only the latest of them into a certain period of time. This class does exactly this:
- * we can queue as many times as we want a specific method call and only the last one will be executed under a defined window of time.
- * So for example if a user types keys on an input, we can buffer it for x seconds and perform a request only with the last of its changes.
- * Lots of other UI interaction usages may be interesting with this class.
- */
-class DelayedMethodCallManager {
-    /**
-     * Sometimes it is necessary to apply some kind of buffer to the user input for certain operations that may be executed
-     * several times but we need to capture only the latest of them into a certain period of time. This class does exactly this:
-     * we can queue as many times as we want a specific method call and only the last one will be executed under a defined window of time.
-     * So for example if a user types keys on an input, we can buffer it for x seconds and perform a request only with the last of its changes.
-     * Lots of other UI interaction usages may be interesting with this class.
-     *
-     * @param delay Amount of time to wait before executing the operations . Defaults to 1000 miliseconds.
-     */
-    constructor(delay = 1000) {
-        this.delay = delay;
-        this._functionsToExecute = [];
-        this._timerIsRunning = false;
-        this._setTimeoutHandler = null;
-    }
-    /**
-     * Add a method to be called once the delay time is finished.
-     * Every time a new call to queue is performed, the delay timer is restarted. When the delay time finishes, only the
-     * last of the methods that have been pushed by call() will be executed.
-     *
-     * Use it to queue several user input operations that should be called only once in a period of time, while waiting
-     * for the user to finish his input.
-     *
-     * @param method The function that will be queued for execution after the delay time has passed
-     */
-    queue(method) {
-        this._functionsToExecute.push(method);
-        if (this._timerIsRunning) {
-            clearTimeout(this._setTimeoutHandler);
-        }
-        this._timerIsRunning = true;
-        this._setTimeoutHandler = setTimeout(() => { this.run(); }, this.delay);
-    }
-    /**
-     * Abort all methods that may have been pushed to this class and are waiting to be executed, so none of them
-     * is executed when the delay time finishes. Basically everything is cleared and stoped when this method is called.
-     */
-    cancel() {
-        if (this._setTimeoutHandler !== null) {
-            clearTimeout(this._setTimeoutHandler);
-        }
-        this._functionsToExecute = [];
-        this._timerIsRunning = false;
-    }
-    /**
-     * Auxiliary function that performs the call to the latest queued method
-     */
-    run() {
-        this._functionsToExecute.pop()();
-        this._functionsToExecute = [];
-        this._timerIsRunning = false;
-    }
+/**
+ * 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
+ */
+/**
+ * Sometimes it is necessary to apply some kind of buffer to the user input for certain operations that may be executed
+ * several times but we need to capture only the latest of them into a certain period of time. This class does exactly this:
+ * we can queue as many times as we want a specific method call and only the last one will be executed under a defined window of time.
+ * So for example if a user types keys on an input, we can buffer it for x seconds and perform a request only with the last of its changes.
+ * Lots of other UI interaction usages may be interesting with this class.
+ */
+class DelayedMethodCallManager {
+    /**
+     * Sometimes it is necessary to apply some kind of buffer to the user input for certain operations that may be executed
+     * several times but we need to capture only the latest of them into a certain period of time. This class does exactly this:
+     * we can queue as many times as we want a specific method call and only the last one will be executed under a defined window of time.
+     * So for example if a user types keys on an input, we can buffer it for x seconds and perform a request only with the last of its changes.
+     * Lots of other UI interaction usages may be interesting with this class.
+     *
+     * @param delay Amount of time to wait before executing the operations . Defaults to 1000 miliseconds.
+     */
+    constructor(delay = 1000) {
+        this.delay = delay;
+        this._functionsToExecute = [];
+        this._timerIsRunning = false;
+        this._setTimeoutHandler = null;
+    }
+    /**
+     * Add a method to be called once the delay time is finished.
+     * Every time a new call to queue is performed, the delay timer is restarted. When the delay time finishes, only the
+     * last of the methods that have been pushed by call() will be executed.
+     *
+     * Use it to queue several user input operations that should be called only once in a period of time, while waiting
+     * for the user to finish his input.
+     *
+     * @param method The function that will be queued for execution after the delay time has passed
+     */
+    queue(method) {
+        this._functionsToExecute.push(method);
+        if (this._timerIsRunning) {
+            clearTimeout(this._setTimeoutHandler);
+        }
+        this._timerIsRunning = true;
+        this._setTimeoutHandler = setTimeout(() => { this.run(); }, this.delay);
+    }
+    /**
+     * Abort all methods that may have been pushed to this class and are waiting to be executed, so none of them
+     * is executed when the delay time finishes. Basically everything is cleared and stoped when this method is called.
+     */
+    cancel() {
+        if (this._setTimeoutHandler !== null) {
+            clearTimeout(this._setTimeoutHandler);
+        }
+        this._functionsToExecute = [];
+        this._timerIsRunning = false;
+    }
+    /**
+     * Auxiliary function that performs the call to the latest queued method
+     */
+    run() {
+        this._functionsToExecute.pop()();
+        this._functionsToExecute = [];
+        this._timerIsRunning = false;
+    }
 }
 
-/*
- * Public API Surface of turbogui-angular
+/*
+ * Public API Surface of turbogui-angular
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AutoFocusOnDisplayDirective, AutoSelectTextOnFocusDirective, BrowserService, BusyStateBaseComponent, ButtonContainerComponent, ButtonImageComponent, DelayedMethodCallManager, DialogErrorComponent, DialogMultipleOptionComponent, DialogOptionsBaseComponent, DialogService, DialogSingleOptionComponent, DialogSingleSelectionListComponent, DialogTwoOptionComponent, ElementCreatedDirective, ElementDestroyedDirective, FadeAnimationClass, GUINotification, GlobalErrorService, HTTPService, HTTPServiceGetRequest, HTTPServicePostRequest, LocalizationService, NotificationService, TurboGuiAngularModule, UserService, View, ViewModel, ViewService, ViewsContainerComponent, ViewsService };