turbogui-angular 20.10.1 → 20.11.0

package/fesm2022/turbogui-angular.mjs

@@ -829,6 +829,10 @@ class DialogService extends SingletoneStrictClass {
          * A reference to the modal busy state container where the component will be added
          */
         this._modalBusyStateHost = null;
+        /**
+         * Used to store the previous document body overflow values when scroll locks are added
+         */
+        this._scrollLockSavedOverflowStates = [];
         /**
          * Tells if the manager is currently showing a snackbar element or not
          */
@@ -899,6 +903,27 @@ class DialogService extends SingletoneStrictClass {
             this._windowBeforeUnloadUnListen = null;
         }
     }
+    /**
+     * Disable application scroll by setting document body overflow to hidden.
+     * Each call to this method must be matched with a call to removeScrollLock() to restore it back to previous state.
+     * If multiple calls to addScrollLock() are done, multiple calls to removeScrollLock() will be required to restore
+     * the original scroll state.
+     */
+    addScrollLock() {
+        this._scrollLockSavedOverflowStates.push(document.body.style.overflow);
+        document.body.style.overflow = 'hidden';
+    }
+    /**
+     * Restore application scroll by restoring document body overflow to the value it had before
+     * the last call to addScrollLock().
+     * Each call to this method will restore one level of scroll lock. If multiple calls to addScrollLock()
+     * were done, multiple calls to removeScrollLock() will be required to restore the original scroll state.
+     */
+    removeScrollLock() {
+        if (this._scrollLockSavedOverflowStates.length > 0) {
+            document.body.style.overflow = this._scrollLockSavedOverflowStates.pop();
+        }
+    }
     /**
      * 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
@@ -1022,8 +1047,9 @@ class DialogService extends SingletoneStrictClass {
      *              css. By default it is defined as 96vw, which will fit 96% of the viewport on small devices
      *            - 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
+     *              css. By default it is defined as 96vh, which will fit 96% of the viewport
+     *            - scrollLock: (False by default) disables the background scroll to prevent the user from scrolling the document body when the dialog is visible
+     *            - modal: (False default) if the dialog can be closed without interaction or true if selecting an option is mandatory to close it
      *              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
@@ -1046,7 +1072,7 @@ class DialogService extends SingletoneStrictClass {
         }
         return new Promise((resolve) => {
             // Set the default values for non specified properties
-            properties.modal = properties.modal ?? true;
+            properties.modal = properties.modal ?? false;
             properties.closeOnNavigation = properties.closeOnNavigation ?? !properties.modal;
             properties.texts = properties.texts ?? [];
             properties.options = properties.options ?? [];
@@ -1078,6 +1104,9 @@ class DialogService extends SingletoneStrictClass {
                 dialogRefConfig['height'] = properties.height;
             }
             const dialogRef = this.matDialog.open(dialogComponentClass, dialogRefConfig);
+            if (properties.scrollLock) {
+                this.addScrollLock();
+            }
             // Push a new state to handle browser navigation to close the dialog
             if (properties.closeOnNavigation && this._activeCloseableDialogs === 0) {
                 history.pushState({ dialogOpen: true }, '');
@@ -1092,6 +1121,9 @@ class DialogService extends SingletoneStrictClass {
                 this._activeCloseableDialogs += 1;
             }
             dialogRef.beforeClosed().pipe(take(1)).subscribe((selection) => {
+                if (properties.scrollLock) {
+                    this.removeScrollLock();
+                }
                 this._activeDialogs = ArrayUtils.removeElement(this._activeDialogs, dialogHash);
                 this._activeDialogInstances = ArrayUtils.removeElement(this._activeDialogInstances, dialogRef);
                 if (properties.closeOnNavigation) {
@@ -1105,7 +1137,7 @@ class DialogService extends SingletoneStrictClass {
                     selection = { index: -1 };
                 }
                 else if (!NumericUtils.isInteger(selection.index)) {
-                    throw new Error(`closeDialog() expects index to be an integer`);
+                    throw new TypeError(`closeDialog() expects index to be an integer`);
                 }
                 if (selection.index >= 0 && selection.value === null) {
                     selection.value = properties.options[selection.index];
@@ -1271,6 +1303,7 @@ class DialogService extends SingletoneStrictClass {
      *            - maxWidth: see addDialog() docs
      *            - height: see addDialog() docs
      *            - maxHeight: see addDialog() docs
+     *            - scrollLock: addDialog() docs
      *            - modal: see addDialog() docs
      *
      * @returns A Promise that resolves once the user closes the dialog
@@ -1285,6 +1318,7 @@ class DialogService extends SingletoneStrictClass {
                 maxWidth: properties.maxWidth ?? "1200px",
                 height: properties.height ?? "98vh",
                 maxHeight: properties.maxHeight ?? "3000px",
+                scrollLock: properties.scrollLock ?? false,
                 modal: properties.modal ?? false
             });
         }
@@ -1303,6 +1337,7 @@ class DialogService extends SingletoneStrictClass {
      *            - maxWidth: see addDialog() docs
      *            - height: see addDialog() docs
      *            - maxHeight: see addDialog() docs
+     *            - scrollLock: addDialog() docs
      *            - modal: see addDialog() docs
      *
      * @returns A Promise that resolves once the user closes the dialog
@@ -1317,6 +1352,7 @@ class DialogService extends SingletoneStrictClass {
                 maxWidth: properties.maxWidth ?? "1200px",
                 height: properties.height ?? "98vh",
                 maxHeight: properties.maxHeight ?? "3000px",
+                scrollLock: properties.scrollLock ?? false,
                 modal: properties.modal ?? false
             });
         }
@@ -1336,6 +1372,7 @@ class DialogService extends SingletoneStrictClass {
      *            - maxWidth: see addDialog() docs
      *            - height: see addDialog() docs
      *            - maxHeight: see addDialog() docs
+     *            - scrollLock: addDialog() docs
      *            - modal: see addDialog() docs
      *
      * @returns A Promise that resolves once the user closes the dialog
@@ -1350,6 +1387,7 @@ class DialogService extends SingletoneStrictClass {
                 maxWidth: properties.maxWidth ?? "1200px",
                 height: properties.height ?? "98vh",
                 maxHeight: properties.maxHeight ?? "3000px",
+                scrollLock: properties.scrollLock ?? false,
                 modal: properties.modal ?? false
             });
         }
@@ -1364,6 +1402,7 @@ class DialogService extends SingletoneStrictClass {
      *            - maxWidth: see addDialog() docs
      *            - height: see addDialog() docs
      *            - maxHeight: see addDialog() docs
+     *            - scrollLock: addDialog() docs
      *            - modal: see addDialog() docs
      *            - title: The title to show at the top of the dialog
      *            - viewContainerRef: MANDATORY! or the component won't render. see addDialog() docs
@@ -1380,6 +1419,7 @@ class DialogService extends SingletoneStrictClass {
             maxWidth: properties.maxWidth ?? "96vw",
             height: properties.height ?? "auto",
             maxHeight: properties.maxHeight ?? "92vw",
+            scrollLock: properties.scrollLock ?? false,
             modal: properties.modal ?? false,
             texts: [properties.title ?? ''],
             viewContainerRef: properties.viewContainerRef
@@ -1400,6 +1440,7 @@ class DialogService extends SingletoneStrictClass {
      *            - maxWidth: see addDialog() docs
      *            - height: see addDialog() docs
      *            - maxHeight: see addDialog() docs
+     *            - scrollLock: addDialog() docs
      *            - modal: see addDialog() docs
      *            - dialogClass: A custom component class to use instead of the default DialogErrorComponent.
      *              This custom class must extend DialogErrorComponent
@@ -1418,6 +1459,7 @@ class DialogService extends SingletoneStrictClass {
                 maxWidth: properties.maxWidth ?? "500px",
                 height: properties.height ?? "auto",
                 maxHeight: properties.maxHeight ?? "92vw",
+                scrollLock: properties.scrollLock ?? false,
                 modal: properties.modal ?? false,
                 texts: texts,
                 options: [properties.option]
@@ -1439,6 +1481,7 @@ class DialogService extends SingletoneStrictClass {
      *            - maxWidth: see addDialog() docs
      *            - height: see addDialog() docs
      *            - maxHeight: see addDialog() docs
+     *            - scrollLock: addDialog() docs
      *            - modal: see addDialog() docs
      *            - dialogClass: A custom component class to use instead of the default DialogSingleOptionComponent.
      *              This custom class must extend DialogSingleOptionComponent