@genesislcap/foundation-notifications 14.305.0 → 14.306.0

package/dist/dts/dialog/dialog-builder.d.ts

@@ -3,5 +3,5 @@ import { DialogStructure } from '../types';
  * Shows the notification dialog
  * @public
  */
-export declare const showNotificationDialog: (configuration: DialogStructure, tagName: String) => void;
+export declare const showNotificationDialog: (configuration: DialogStructure, tagName: String, notificationBoundary?: HTMLElement) => void;
 //# sourceMappingURL=dialog-builder.d.ts.map

package/dist/dts/dialog/dialog-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-builder.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAC;AAGlE;;;GAGG;AACH,eAAO,MAAM,sBAAsB,GAAI,eAAe,eAAe,EAAE,SAAS,MAAM,KAAG,IA0BxF,CAAC"}
+{"version":3,"file":"dialog-builder.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAC;AAGlE;;;GAGG;AACH,eAAO,MAAM,sBAAsB,GACjC,eAAe,eAAe,EAC9B,SAAS,MAAM,EACf,uBAAuB,WAAW,KACjC,IA0BF,CAAC"}

package/dist/dts/dialog/dialog-launcher.d.ts

@@ -2,9 +2,10 @@ import { NotificationStructure } from '../types';
 /**
  * Shows the dialog
  * @internal
- * @param notification - The NotificationStructure object
+ * @param notificationStructure - The NotificationStructure object
  * @param tagName - The tag name to create prefix for the design system provider & notification component
+ * @param notificationBoundary - Optional boundary element to place the dialog within. If provided, the dialog will be created within this element's context, which can help with z-index stacking issues when the dialog needs to appear above modals or other elements.
  * @returns
  * */
-export declare const showDialog: (notificationStructure: NotificationStructure, tagName: String) => void;
+export declare const showDialog: (notificationStructure: NotificationStructure, tagName: String, notificationBoundary?: HTMLElement) => void;
 //# sourceMappingURL=dialog-launcher.d.ts.map

package/dist/dts/dialog/dialog-launcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-launcher.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog-launcher.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAiB,MAAM,UAAU,CAAC;AAEhE;;;;;;KAMK;AACL,eAAO,MAAM,UAAU,GAAI,uBAAuB,qBAAqB,EAAE,SAAS,MAAM,KAAG,IAS1F,CAAC"}
+{"version":3,"file":"dialog-launcher.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog-launcher.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAiB,MAAM,UAAU,CAAC;AAmBhE;;;;;;;KAOK;AACL,eAAO,MAAM,UAAU,GACrB,uBAAuB,qBAAqB,EAC5C,SAAS,MAAM,EACf,uBAAuB,WAAW,KACjC,IAaF,CAAC"}

package/dist/esm/dialog/dialog-builder.js

@@ -4,7 +4,7 @@ import { showDialog } from './dialog-launcher';
  * Shows the notification dialog
  * @public
  */
-export const showNotificationDialog = (configuration, tagName) => {
+export const showNotificationDialog = (configuration, tagName, notificationBoundary) => {
     if (!configuration.title) {
         throw new Error('Title is required');
     }
@@ -23,5 +23,5 @@ export const showNotificationDialog = (configuration, tagName) => {
         config = Object.assign({ dialog: configuration.dialog }, config);
         notificationStructure = Object.assign({ config }, notificationStructure);
     }
-    showDialog(notificationStructure, tagName);
+    showDialog(notificationStructure, tagName, notificationBoundary);
 };

package/dist/esm/dialog/dialog-launcher.js

@@ -1,16 +1,35 @@
 import { getNotificationContainer, showLoggerLogLevel } from '../notification-util';
+/**
+ * Gets or creates a dialog container within the provided boundary element.
+ * @internal
+ * @param notificationBoundary - The boundary element to search for or create the container within
+ * @returns The dialog container element
+ */
+const getBoundaryContainer = (notificationBoundary) => {
+    let boundaryContainer = notificationBoundary.querySelector('#dialog-container');
+    if (!boundaryContainer) {
+        boundaryContainer = document.createElement('div');
+        boundaryContainer.setAttribute('id', 'dialog-container');
+        boundaryContainer.style.position = 'relative';
+        notificationBoundary.appendChild(boundaryContainer);
+    }
+    return boundaryContainer;
+};
 /**
  * Shows the dialog
  * @internal
- * @param notification - The NotificationStructure object
+ * @param notificationStructure - The NotificationStructure object
  * @param tagName - The tag name to create prefix for the design system provider & notification component
+ * @param notificationBoundary - Optional boundary element to place the dialog within. If provided, the dialog will be created within this element's context, which can help with z-index stacking issues when the dialog needs to appear above modals or other elements.
  * @returns
  * */
-export const showDialog = (notificationStructure, tagName) => {
+export const showDialog = (notificationStructure, tagName, notificationBoundary) => {
     showLoggerLogLevel(notificationStructure);
     const tagPrefix = tagName.split('-')[0];
     const dialog = document.createElement(`${tagPrefix}-dialog`);
-    const container = getNotificationContainer('dialog-container', tagName);
+    const container = notificationBoundary
+        ? getBoundaryContainer(notificationBoundary)
+        : getNotificationContainer('dialog-container', tagName);
     container.appendChild(dialog);
     dialog.notification = notificationStructure;
     dialog.show();

package/dist/esm/notification-util.js

@@ -68,7 +68,7 @@ export const getNotificationContainer = (id, tagName) => {
     if (!container) {
         container = document.createElement('div');
         container.setAttribute('id', id);
-        container.style.zIndex = '1000';
+        container.style.zIndex = '9999';
         // Get the current design system prefix using the existing utility
         const currentPrefix = getCurrentDesignSystemPrefix(document.body, 'rapid');
         // Search for existing provider including shadow DOMs

package/dist/foundation-notifications.api.json

@@ -2879,6 +2879,15 @@
               "text": "String",
               "canonicalReference": "!String:interface"
             },
+            {
+              "kind": "Content",
+              "text": ", notificationBoundary?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "HTMLElement",
+              "canonicalReference": "!HTMLElement:interface"
+            },
             {
               "kind": "Content",
               "text": ") => "
@@ -2890,8 +2899,8 @@
           ],
           "fileUrlPath": "src/dialog/dialog-builder.ts",
           "returnTypeTokenRange": {
-            "startIndex": 5,
-            "endIndex": 6
+            "startIndex": 7,
+            "endIndex": 8
           },
           "releaseTag": "Public",
           "overloadIndex": 1,
@@ -2911,6 +2920,14 @@
                 "endIndex": 4
               },
               "isOptional": false
+            },
+            {
+              "parameterName": "notificationBoundary",
+              "parameterTypeTokenRange": {
+                "startIndex": 5,
+                "endIndex": 6
+              },
+              "isOptional": true
             }
           ],
           "name": "showNotificationDialog"

package/dist/foundation-notifications.d.ts

@@ -386,11 +386,12 @@ export declare const showBanner: (notificationStructure: NotificationStructure,
 /**
  * Shows the dialog
  * @internal
- * @param notification - The NotificationStructure object
+ * @param notificationStructure - The NotificationStructure object
  * @param tagName - The tag name to create prefix for the design system provider & notification component
+ * @param notificationBoundary - Optional boundary element to place the dialog within. If provided, the dialog will be created within this element's context, which can help with z-index stacking issues when the dialog needs to appear above modals or other elements.
  * @returns
  * */
-export declare const showDialog: (notificationStructure: NotificationStructure, tagName: String) => void;
+export declare const showDialog: (notificationStructure: NotificationStructure, tagName: String, notificationBoundary?: HTMLElement) => void;
 
 /**
  * Shows logger with log level from NotificationStructure object
@@ -425,7 +426,7 @@ export declare const showNotificationBanner: (configuration: BannerStructure, ta
  * Shows the notification dialog
  * @public
  */
-export declare const showNotificationDialog: (configuration: DialogStructure, tagName: String) => void;
+export declare const showNotificationDialog: (configuration: DialogStructure, tagName: String, notificationBoundary?: HTMLElement) => void;
 
 /**
  * Shows the notification snackbar

package/docs/api/foundation-notifications.md

@@ -267,7 +267,7 @@ Shows the notification banner
 </td></tr>
 <tr><td>
 
-[showNotificationDialog(configuration, tagName)](./foundation-notifications.shownotificationdialog.md)
+[showNotificationDialog(configuration, tagName, notificationBoundary)](./foundation-notifications.shownotificationdialog.md)
 
 
 </td><td>

package/docs/api/foundation-notifications.shownotificationdialog.md

@@ -9,7 +9,7 @@ Shows the notification dialog
 **Signature:**
 
 ```typescript
-showNotificationDialog: (configuration: DialogStructure, tagName: String) => void
+showNotificationDialog: (configuration: DialogStructure, tagName: String, notificationBoundary?: HTMLElement) => void
 ```
 
 ## Parameters
@@ -57,6 +57,22 @@ String
 </td><td>
 
 
+</td></tr>
+<tr><td>
+
+notificationBoundary
+
+
+</td><td>
+
+HTMLElement
+
+
+</td><td>
+
+_(Optional)_
+
+
 </td></tr>
 </tbody></table>
 

package/docs/api-report.md.api.md

@@ -223,7 +223,7 @@ export const showBanner: (notificationStructure: NotificationStructure, tagName:
 // Warning: (ae-internal-missing-underscore) The name "showDialog" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal
-export const showDialog: (notificationStructure: NotificationStructure, tagName: String) => void;
+export const showDialog: (notificationStructure: NotificationStructure, tagName: String, notificationBoundary?: HTMLElement) => void;
 
 // @public
 export const showLoggerLogLevel: (notificationStructure: NotificationStructure) => void;
@@ -238,7 +238,7 @@ export const showNotificationAlert: (configuration: AlertStructure) => void;
 export const showNotificationBanner: (configuration: BannerStructure, tagName: String, notificationBoundary?: HTMLElement) => void;
 
 // @public
-export const showNotificationDialog: (configuration: DialogStructure, tagName: String) => void;
+export const showNotificationDialog: (configuration: DialogStructure, tagName: String, notificationBoundary?: HTMLElement) => void;
 
 // @public
 export const showNotificationSnackbar: (configuration: SnackbarStructure, tagName: String) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-notifications",
   "description": "Genesis Foundation UI Notifications Utils",
-  "version": "14.305.0",
+  "version": "14.306.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -49,17 +49,17 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.305.0",
-    "@genesislcap/genx": "14.305.0",
-    "@genesislcap/rollup-builder": "14.305.0",
-    "@genesislcap/ts-builder": "14.305.0",
-    "@genesislcap/uvu-playwright-builder": "14.305.0",
-    "@genesislcap/vite-builder": "14.305.0",
-    "@genesislcap/webpack-builder": "14.305.0"
+    "@genesislcap/foundation-testing": "14.306.0",
+    "@genesislcap/genx": "14.306.0",
+    "@genesislcap/rollup-builder": "14.306.0",
+    "@genesislcap/ts-builder": "14.306.0",
+    "@genesislcap/uvu-playwright-builder": "14.306.0",
+    "@genesislcap/vite-builder": "14.306.0",
+    "@genesislcap/webpack-builder": "14.306.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-logger": "14.305.0",
-    "@genesislcap/foundation-utils": "14.305.0"
+    "@genesislcap/foundation-logger": "14.306.0",
+    "@genesislcap/foundation-utils": "14.306.0"
   },
   "repository": {
     "type": "git",
@@ -69,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d936ada51801a5d7b91c5301f39616fd650e7f5b"
+  "gitHead": "df5d88c4e8e25a56d2bf22dab70ca551784e6df0"
 }