turbogui-angular 19.1.0 → 20.0.0

package/fesm2022/turbogui-angular.mjs

@@ -8,6 +8,7 @@ import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { take, filter } from 'rxjs/operators';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';
 import * as i2$1 from '@angular/material/datepicker';
@@ -16,7 +17,6 @@ import { MatNativeDateModule } from '@angular/material/core';
 import * as i1$1 from '@angular/material/snack-bar';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd } from '@angular/router';
-import { filter } from 'rxjs/operators';
 import * as i2$2 from '@angular/platform-browser';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4 from '@angular/material/input';
@@ -623,13 +623,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * Manages the application modal and non modal floating elements
  */
 class DialogService extends SingletoneStrictClass {
-    constructor(rendererFactory, matSnackBar, matDialog, injector, applicationRef, componentFactoryResolver) {
+    constructor(rendererFactory, matSnackBar, matDialog, injector, applicationRef, environmentInjector) {
         super(DialogService);
         this.matSnackBar = matSnackBar;
         this.matDialog = matDialog;
         this.injector = injector;
         this.applicationRef = applicationRef;
-        this.componentFactoryResolver = componentFactoryResolver;
+        this.environmentInjector = environmentInjector;
         /**
          * Used to modify the busy state component that is shown by default by the addModalBusyState() method.
          *
@@ -659,7 +659,7 @@ class DialogService extends SingletoneStrictClass {
          */
         this._isShowingSnackBar = false;
         /**
-         * Contains a list of the dialogs that are currently visible to the user.
+         * Contains a list of the dialogs (MODAL AND NON MODAL) 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
@@ -670,6 +670,10 @@ class DialogService extends SingletoneStrictClass {
          * The list uses the same order as the list of _activeDialogs hash values
          */
         this._activeDialogInstances = [];
+        /**
+         * Counts the number of dialogs that are currently open and that can be closed by the user by navigating with the browser
+         */
+        this._activeCloseableDialogs = 0;
         /**
          * Method that is used to delete the window beforeunload event listener once not used anymore
          */
@@ -709,9 +713,7 @@ class DialogService extends SingletoneStrictClass {
      * otherwise it will do nothing.
      */
     addCloseApplicationWarning() {
-        if (this._windowBeforeUnloadUnListen === null) {
-            this._windowBeforeUnloadUnListen = this._renderer.listen('window', 'beforeunload', (event) => event.returnValue = true);
-        }
+        this._windowBeforeUnloadUnListen ??= this._renderer.listen('window', 'beforeunload', (event) => event.returnValue = true);
     }
     /**
      * Remove the close application warning message if previously assigned
@@ -745,7 +747,7 @@ class DialogService extends SingletoneStrictClass {
         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 = new DomPortalOutlet(document.body, this.environmentInjector, this.applicationRef, this.injector);
         }
         this._modalBusyStateHost.attach(this._componentPortal);
         this._isShowingBusyState = true;
@@ -799,12 +801,12 @@ class DialogService extends SingletoneStrictClass {
         return new Promise((resolve) => {
             const snackBarRef = this.matSnackBar.open(message, action === '' ? undefined : action, config);
             // Handle action button click
-            snackBarRef.onAction().subscribe(() => {
+            snackBarRef.onAction().pipe(take(1)).subscribe(() => {
                 this._isShowingSnackBar = false;
                 resolve(true);
             });
             // Handle dismiss
-            snackBarRef.afterDismissed().subscribe(() => {
+            snackBarRef.afterDismissed().pipe(take(1)).subscribe(() => {
                 this._isShowingSnackBar = false;
                 resolve(false);
             });
@@ -833,21 +835,29 @@ class DialogService extends SingletoneStrictClass {
      * this library or extend DialogBaseComponent to create our own custom ones.
      *
      * @param dialogComponentClass A class for a component that extends DialogBaseComponent, which will be the dialog that is shown to the user.
-     * @param properties An object containing the different visual and textual options that this dialog allows:
+     * @param properties An object containing the different visual and textual options that this dialog allows.
+     *                   IMPORTANT: texts, options and data values need to be read at the dialog component by declaring "@Inject(MAT_DIALOG_DATA) public data: any"
+     *                   at the dialog component constructor. This data object will contain the texts, options and data properties
+     *
      *            - id: The html unique identifier that the dialog will have once created. If not specified, no id will be explicitly set
      *            - width: 50% by default. Specify the css value for the default dialog width. As the dialog is responsive, the value will be automatically
      *              reduced if the available screen is not enough, and will reach the desired value otherwise. We can set any css unit like pixels,
      *              %, vh, vw, or any other. For example: '400px', '50%', etc.
-     *            - maxWidth: Defines the maximum width that the dialog will have regarding the viewport. We can specify it in % or vw, just like is done in
+     *            - maxWidth: Defines the maximum width that the dialog will have. We can specify it in % or vw, just like is done in
      *              css. By default it is defined as 96vw, which will fit 96% of the viewport on small devices
-     *            - height: TODO docs
-     *            - maxHeight: TODO docs
+     *            - height: Unset by default. Specify the css value for the dialog height.
+     *            - maxHeight: Defines the maximum height that the dialog will have. We can specify it in % or vh, just like is done in
+         *          css. By default it is defined as 96vh, which will fit 96% of the viewport
      *            - modal: True (default) if selecting an option is mandatory to close the dialog, false if the dialog can be closed
      *              by the user clicking outside it
+     *            - closeOnNavigation: Tells if the dialog should be closed when the user navigates with the browser. By default is true for non modal and false for modal dialogs.
      *            - texts: A list with strings containing the dialog texts, sorted by importance. When dialog has a title, this should
      *              be placed first, subtitle second and so (Each dialog may accept a different custom number of texts).
+     *              (add "@Inject(MAT_DIALOG_DATA) public data: any" to dialog constructor and read it with data.texts)
      *            - options: A list of strings that will be used as button captions for each one of the accepted dialog options
-     *            - data: An object that we can use to pass any extra data that we want to the dialog
+     *              (add "@Inject(MAT_DIALOG_DATA) public data: any" to dialog constructor and read it with data.options)
+     *            - data: An object to pass any extra data we want to the dialog.
+     *              (add "@Inject(MAT_DIALOG_DATA) public data: any" to dialog constructor and read it with data.data)
      *            - viewContainerRef: This is important if we want to propagate providers from a parent component to this dialog. We must specify
      *              this reference to make sure the same services injected on the parent are available too at the child dialog
      *
@@ -862,6 +872,7 @@ class DialogService extends SingletoneStrictClass {
         return new Promise((resolve) => {
             // Set the default values for non specified properties
             properties.modal = properties.modal ?? true;
+            properties.closeOnNavigation = properties.closeOnNavigation ?? !properties.modal;
             properties.texts = properties.texts ?? [];
             properties.options = properties.options ?? [];
             properties.data = properties.data ?? {};
@@ -877,24 +888,44 @@ class DialogService extends SingletoneStrictClass {
             if (this._activeDialogs.includes(dialogHash)) {
                 return resolve({ index: -1 });
             }
-            const dialogRef = this.matDialog.open(dialogComponentClass, {
+            let dialogRefConfig = {
                 width: properties.width ?? "50%",
                 maxWidth: properties.maxWidth ?? "96vw",
+                maxHeight: properties.maxHeight ?? "96vh",
                 disableClose: properties.modal,
                 autoFocus: false,
-                closeOnNavigation: !properties.modal,
+                closeOnNavigation: properties.closeOnNavigation,
                 viewContainerRef: properties.viewContainerRef,
                 data: { texts: properties.texts, options: properties.options, data: properties.data }
-            });
+            };
+            // Dialog height will only be set if it is specified on properties
+            if (properties.height && properties.height !== undefined) {
+                dialogRefConfig['height'] = properties.height;
+            }
+            const dialogRef = this.matDialog.open(dialogComponentClass, dialogRefConfig);
+            // Push a new state to handle browser navigation to close the dialog
+            if (properties.closeOnNavigation && this._activeCloseableDialogs === 0) {
+                history.pushState({ dialogOpen: true }, '');
+            }
             // Assign the dialog ID only if specifically set on properties
             if (properties.id && properties.id !== undefined) {
                 dialogRef.id = properties.id;
             }
             this._activeDialogs.push(dialogHash);
             this._activeDialogInstances.push(dialogRef);
-            dialogRef.beforeClosed().subscribe((selection) => {
+            if (properties.closeOnNavigation) {
+                this._activeCloseableDialogs += 1;
+            }
+            dialogRef.beforeClosed().pipe(take(1)).subscribe((selection) => {
                 this._activeDialogs = ArrayUtils.removeElement(this._activeDialogs, dialogHash);
                 this._activeDialogInstances = ArrayUtils.removeElement(this._activeDialogInstances, dialogRef);
+                if (properties.closeOnNavigation) {
+                    // Remove dialog state from browser history
+                    if (this._activeCloseableDialogs === 1 && window.history.state?.dialogOpen) {
+                        history.back();
+                    }
+                    this._activeCloseableDialogs -= 1;
+                }
                 if (!properties.modal && selection === undefined) {
                     selection = { index: -1 };
                 }
@@ -936,7 +967,7 @@ class DialogService extends SingletoneStrictClass {
             id: properties.id ?? undefined,
             width: properties.width ?? "50%",
             maxWidth: properties.maxWidth ?? "96vw",
-            height: properties.height ?? "50%",
+            height: properties.height ?? "auto",
             maxHeight: properties.maxHeight ?? "92vw",
             modal: properties.modal ?? false,
             texts: [properties.title ?? ''],
@@ -953,11 +984,16 @@ class DialogService extends SingletoneStrictClass {
         if (!this._isEnabled) {
             return;
         }
+        // If there are dialogs that should close on navigation and a history state was pushed, pop it
+        if (this._activeCloseableDialogs > 0 && window.history.state?.dialogOpen) {
+            history.back();
+        }
         for (const dialogRef of this._activeDialogInstances) {
             dialogRef.close({ index: -1 });
         }
         this._activeDialogs = [];
         this._activeDialogInstances = [];
+        this._activeCloseableDialogs = 0;
     }
     /**
      * TODO - translate from TS version
@@ -981,15 +1017,9 @@ class DialogService extends SingletoneStrictClass {
      * 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());
-        }
+        this._documentKeydownUnlisten ??= this._renderer.listen('document', 'keydown', (event) => event.preventDefault());
+        this._documentMousedownUnlisten ??= this._renderer.listen('document', 'mousedown', (event) => event.preventDefault());
+        this._documentPointerdownUnlisten ??= this._renderer.listen('document', 'pointerdown', (event) => event.preventDefault());
     }
     /**
      * Restore the user interactions that were previously disabled with _disableUserInteraction method
@@ -1005,10 +1035,10 @@ class DialogService extends SingletoneStrictClass {
         }
         if (this._documentPointerdownUnlisten !== null) {
             this._documentPointerdownUnlisten();
-            this._documentMousedownUnlisten = null;
+            this._documentPointerdownUnlisten = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogService, deps: [{ token: i0.RendererFactory2 }, { token: i1$1.MatSnackBar }, { token: i1.MatDialog }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogService, deps: [{ token: i0.RendererFactory2 }, { token: i1$1.MatSnackBar }, { token: i1.MatDialog }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogService, decorators: [{
@@ -1016,7 +1046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: i1$1.MatSnackBar }, { type: i1.MatDialog }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }] });
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: i1$1.MatSnackBar }, { type: i1.MatDialog }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
 
 /**
  * TurboGUI is A library that helps with the most common and generic UI elements and functionalities
@@ -1170,9 +1200,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 /**
  * Allows us to easily perform requests to a remote API that is developed with Turbo framework.
  */
-class TurboApiCallerService extends SingletoneStrictClass {
+class TurboApiService {
     constructor(dialogService, browserService) {
-        super(TurboApiCallerService);
         this.dialogService = dialogService;
         this.browserService = browserService;
         /**
@@ -1581,10 +1610,10 @@ class TurboApiCallerService extends SingletoneStrictClass {
         this._token = '';
         this.httpManager.setGlobalPostParam('token', '-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiCallerService, deps: [{ token: DialogService }, { token: BrowserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiCallerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiService, deps: [{ token: DialogService }, { token: BrowserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiCallerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TurboApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2234,6 +2263,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }] });
 
+/**
+ * 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 an iframe that can be used to display any url or content.
+ *
+ * We must specify the url in the data parameter when opening the dialog, and we can also specify the title
+ * bi placing it at the first position of the texts array.
+ */
+class DialogIFrameComponent extends DialogBaseComponent {
+    static { this.DIALOG_CLASS_NAME = 'DialogIFrameComponent'; }
+    constructor(elementRef, dialogRef, sanitizer, data) {
+        super(elementRef, dialogRef);
+        this.elementRef = elementRef;
+        this.dialogRef = dialogRef;
+        this.sanitizer = sanitizer;
+        this.data = data;
+        this.title = '';
+        if (data.texts.length > 0) {
+            this.title = data.texts[0];
+        }
+        this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(data.data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogIFrameComponent, deps: [{ token: i0.ElementRef }, { token: i1.MatDialogRef }, { token: i2$2.DomSanitizer }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogIFrameComponent, isStandalone: true, selector: "tg-dialog-iframe", providers: [], usesInheritance: true, ngImport: i0, template: "<h2 *ngIf=\"title !== ''\">{{title}}</h2>\r\n\r\n<iframe [src]=\"safeUrl\" title=\"data.texts[0]\"></iframe>", styles: [":host{display:block;width:100%;height:100%}h2{margin-top:0;margin-bottom:25px;width:82%}iframe{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogIFrameComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tg-dialog-iframe', imports: [CommonModule], providers: [], template: "<h2 *ngIf=\"title !== ''\">{{title}}</h2>\r\n\r\n<iframe [src]=\"safeUrl\" title=\"data.texts[0]\"></iframe>", styles: [":host{display:block;width:100%;height:100%}h2{margin-top:0;margin-bottom:25px;width:82%}iframe{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatDialogRef }, { type: i2$2.DomSanitizer }, { 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
  *
@@ -2766,7 +2834,6 @@ class ButtonContainerComponent extends ButtonBaseComponent {
         super(...arguments);
         /**
          * This is used to attach the fade animation directly to this component so it fades in and out when created and removed from the app
-         * TODO: THIS IS NOT A GOOD IDEA
          */
         this.buttonFade = true;
     }
@@ -2985,5 +3052,5 @@ class ValidatorsPlus extends Validators {
  * Generated bundle index. Do not edit.
  */
 
-export { AutoFocusOnDisplayDirective, AutoSelectTextOnFocusDirective, BrowserService, BusyStateBaseComponent, ButtonContainerComponent, ButtonImageComponent, DelayedMethodCallManager, DialogBaseComponent, DialogDateSelectionComponent, DialogErrorComponent, DialogMultipleOptionComponent, DialogService, DialogSingleInputComponent, DialogSingleOptionComponent, DialogSingleSelectionListComponent, DialogTwoOptionComponent, ElementClickOutsideDirective, ElementCreatedDirective, ElementDestroyedDirective, FadeAnimationClass, GUINotification, GlobalErrorService, HTTPService, HTTPServiceGetRequest, HTTPServicePostRequest, LocalesBaseService, NotificationService, RouterBaseService, SingletoneStrictClass, TurboApiCallerService, TurboGuiAngularModule, ValidatorsPlus, View, ViewService };
+export { AutoFocusOnDisplayDirective, AutoSelectTextOnFocusDirective, BrowserService, BusyStateBaseComponent, ButtonContainerComponent, ButtonImageComponent, DelayedMethodCallManager, DialogBaseComponent, DialogDateSelectionComponent, DialogErrorComponent, DialogIFrameComponent, DialogMultipleOptionComponent, DialogService, DialogSingleInputComponent, DialogSingleOptionComponent, DialogSingleSelectionListComponent, DialogTwoOptionComponent, ElementClickOutsideDirective, ElementCreatedDirective, ElementDestroyedDirective, FadeAnimationClass, GUINotification, GlobalErrorService, HTTPService, HTTPServiceGetRequest, HTTPServicePostRequest, LocalesBaseService, NotificationService, RouterBaseService, SingletoneStrictClass, TurboApiService, TurboGuiAngularModule, ValidatorsPlus, View, ViewService };
 //# sourceMappingURL=turbogui-angular.mjs.map