@genesislcap/foundation-notifications 14.50.2-alpha-f13a8e3.0

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

@@ -0,0 +1,49 @@
+/**
+ * BannerBuilder
+ * @public
+ */
+export class BannerBuilder {
+    /**
+     * Add dismissing action to Banner
+     * @public
+     * @param dismissingAction - {@link DismissingAction}
+     * @returns
+     */
+    withDismissingAction(dismissingAction) {
+        this.dismissingAction = dismissingAction;
+        return this;
+    }
+    /**
+     * Add confirming action to Banner
+     * @public
+     * @param confirmingAction - {@link ConfirmingAction}
+     * @returns
+     */
+    withConfirmingAction(confirmingAction) {
+        if (!this.confirmingActions) {
+            this.confirmingActions = [];
+        }
+        this.confirmingActions.push(confirmingAction);
+        return this;
+    }
+    /**
+     * Build Banner
+     * @public
+     * @returns Banner
+     */
+    build() {
+        let banner = {};
+        if (this.dismissingAction) {
+            banner = Object.assign({ dismissingAction: this.dismissingAction }, banner);
+        }
+        if (this.confirmingActions) {
+            banner = Object.assign({ confirmingActions: this.confirmingActions }, banner);
+        }
+        return banner;
+    }
+}
+/**
+ * Get banner builder instance
+ * @public
+ */
+export const getBannerBuilder = () => new BannerBuilder();

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

@@ -0,0 +1,23 @@
+import { getBannerAnchor } from '../notification-util';
+/**
+ * Shows the notificationStructure dialog
+ * @public
+ * @param notificationStructure - The NotificationStructure object
+ * @param tagName - The tag name to create prefix for the design system provider & notificationStructure component
+ * @param notificationBoundary - target listener for the notification
+ * @returns
+ * */
+export const showBanner = (notificationStructure, tagName, notificationBoundary) => {
+    var _a;
+    const tagPrefix = tagName.split('-')[0];
+    const banner = document.createElement(`${tagPrefix}-banner`);
+    const container = getBannerAnchor(notificationBoundary);
+    if (((_a = container === null || container === void 0 ? void 0 : container.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        banner.style.position = 'absolute';
+        banner.style.top = '0';
+        banner.style.left = '0';
+        banner.style.width = '100%';
+    }
+    container.appendChild(banner);
+    banner.notification = notificationStructure;
+};

package/dist/esm/banner/index.js

@@ -0,0 +1,2 @@
+export * from './banner-builder';
+export * from './banner-launcher';

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

@@ -0,0 +1,49 @@
+/**
+ * DialogBuilder class
+ * @public
+ */
+export class DialogBuilder {
+    /**
+     * Add dismissing action to Dialog
+     * @public
+     * @param dismissingAction - {@link DismissingAction}
+     * @returns
+     */
+    withDismissingAction(dismissingAction) {
+        this.dismissingAction = dismissingAction;
+        return this;
+    }
+    /**
+     * Add confirming action to Dialog
+     * @public
+     * @param confirmingAction - {@link ConfirmingAction}
+     * @returns
+     */
+    withConfirmingAction(confirmingAction) {
+        if (!this.confirmingActions) {
+            this.confirmingActions = [];
+        }
+        this.confirmingActions.push(confirmingAction);
+        return this;
+    }
+    /**
+     * Build Dialog
+     * @public
+     * @returns Dialog
+     */
+    build() {
+        let dialog = {};
+        if (this.dismissingAction) {
+            dialog = Object.assign({ dismissingAction: this.dismissingAction }, dialog);
+        }
+        if (this.confirmingActions) {
+            dialog = Object.assign({ confirmingActions: this.confirmingActions }, dialog);
+        }
+        return dialog;
+    }
+}
+/**
+ * Returns an instance of DialogBuilder
+ * @public
+ */
+export const getDialogBuilder = () => new DialogBuilder();

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

@@ -0,0 +1,16 @@
+import { getNotificationContainer } from '../notification-util';
+/**
+ * Shows the dialog
+ * @internal
+ * @param notification - The NotificationStructure object
+ * @param tagName - The tag name to create prefix for the design system provider & notification component
+ * @returns
+ * */
+export const showDialog = (notification, tagName) => {
+    const tagPrefix = tagName.split('-')[0];
+    const dialog = document.createElement(`${tagPrefix}-notification-dialog`);
+    const container = getNotificationContainer('dialog-container', tagName);
+    container.appendChild(dialog);
+    dialog.notification = notification;
+    dialog.show();
+};

package/dist/esm/dialog/index.js

@@ -0,0 +1,2 @@
+export * from './dialog-builder';
+export * from './dialog-launcher';

package/dist/esm/index.federated.js

@@ -0,0 +1 @@
+import('./index');

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+export * from './types';
+export * from './notification-builder';
+export * from './toast';
+export * from './banner';
+export * from './dialog';
+export * from './snackbar';
+export * from './notification-util';
+export * from './notification-launcher';

package/dist/esm/logger.js

@@ -0,0 +1,2 @@
+import { createLogger } from '@genesislcap/foundation-utils';
+export const logger = createLogger('foundation-notifications');

package/dist/esm/notification-builder.js

@@ -0,0 +1,133 @@
+import { LogLevel } from '@genesislcap/foundation-utils';
+/**
+ * NotificationBuilder to build NotificationStructure
+ * @public
+ */
+export class NotificationBuilder {
+    /**
+     * Add title to notification
+     * @public
+     * @param title - string
+     * @returns
+     */
+    withTitle(title) {
+        this.title = title;
+        return this;
+    }
+    /**
+     * Add body details to notification
+     * @public
+     * @param body - string
+     * @returns
+     */
+    withBody(body) {
+        this.body = body;
+        return this;
+    }
+    /**
+     * Add log level to notification
+     * @public
+     * @returns
+     */
+    withLogLevel(logLevel) {
+        this.logLevel = logLevel;
+        return this;
+    }
+    /**
+     * Add alert to notification
+     * @public
+     * @param alert - boolean
+     * @returns
+     */
+    withAlert(alert) {
+        this.alert = alert;
+        return this;
+    }
+    /**
+     * Add toast to notification
+     * @public
+     * @param notification - {@link Toast}
+     * @returns
+     */
+    withToast(toast) {
+        this.toast = toast;
+        return this;
+    }
+    /**
+     * Add banner to notification
+     * @public
+     * @param banner - {@link Banner}
+     * @returns
+     */
+    withBanner(banner) {
+        this.banner = banner;
+        return this;
+    }
+    /**
+     * Add snackbar to notification
+     * @public
+     * @param snackbar - {@link Snackbar}
+     * @returns
+     */
+    withSnackbar(snackbar) {
+        this.snackbar = snackbar;
+        return this;
+    }
+    /**
+     * Add dialog to notification
+     * @public
+     * @param dialog - {@link Dialog}
+     * @returns
+     */
+    withDialog(dialog) {
+        this.dialog = dialog;
+        return this;
+    }
+    /**
+     * Build NotificationStructure
+     * @public
+     * @returns
+     */
+    build() {
+        if (!this.title) {
+            throw new Error('Title is required');
+        }
+        if (!this.body) {
+            throw new Error(`Missing required param 'body'`);
+        }
+        let notificationStructure = {
+            title: this.title,
+            body: this.body,
+        };
+        let config = {};
+        if (this.logLevel in LogLevel) {
+            notificationStructure = Object.assign({ logLevel: this.logLevel }, notificationStructure);
+        }
+        if (this.alert) {
+            config = Object.assign({ alert: this.alert }, config);
+            notificationStructure = Object.assign({ config }, notificationStructure);
+        }
+        if (this.toast) {
+            config = Object.assign({ notification: this.toast }, config);
+            notificationStructure = Object.assign({ config }, notificationStructure);
+        }
+        if (this.banner) {
+            config = Object.assign({ banner: this.banner }, config);
+            notificationStructure = Object.assign({ config }, notificationStructure);
+        }
+        if (this.snackbar) {
+            config = Object.assign({ snackbar: this.snackbar }, config);
+            notificationStructure = Object.assign({ config }, notificationStructure);
+        }
+        if (this.dialog) {
+            config = Object.assign({ dialog: this.dialog }, config);
+            notificationStructure = Object.assign({ config }, notificationStructure);
+        }
+        return notificationStructure;
+    }
+}
+/**
+ * Returns a new NotificationBuilder instance
+ * @public
+ */
+export const getNotificationBuilder = () => new NotificationBuilder();

package/dist/esm/notification-launcher.js

@@ -0,0 +1,36 @@
+import { createLogger } from '@genesislcap/foundation-utils';
+import { showBanner } from './banner';
+import { showDialog } from './dialog';
+import { getNotificationDetails, getLoglevel } from './notification-util';
+import { showSnackbar } from './snackbar';
+import { showToast } from './toast';
+const logger = createLogger('foundation-notifications');
+const notificationTypeToComponentMap = {
+    alert: (notificationStructure) => {
+        alert(getNotificationDetails(notificationStructure));
+    },
+    notification: showToast,
+    dialog: showDialog,
+    snackbar: showSnackbar,
+    banner: showBanner,
+};
+/**
+ * Shows the notificationStructure in the appropriate component
+ * @public
+ * @param notificationStructure - The NotificationStructure object
+ * @param tagName - The tag name to create prefix for the design system provider *
+ * @param notificationBoundary - The notificationStructure boundary element
+ * @returns
+ * */
+export const showNotification = (notificationStructure, tagName, notificationBoundary) => {
+    logger.log({
+        message: getNotificationDetails(notificationStructure),
+        level: getLoglevel(notificationStructure),
+    });
+    const keys = Object.keys((notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) || {});
+    keys.forEach((key) => {
+        if (notificationTypeToComponentMap[key]) {
+            notificationTypeToComponentMap[key](notificationStructure, tagName, notificationBoundary);
+        }
+    });
+};

package/dist/esm/notification-util.js

@@ -0,0 +1,67 @@
+import { LogLevel } from '@genesislcap/foundation-utils';
+/**
+ * Retrieves the notification details from an NotificationStructure object
+ * @public
+ * @param details - The NotificationStructure object
+ * @returns The title and body concatenated as a string, or default values ('Error: Something went wrong') if not present
+ */
+export const getNotificationDetails = (details) => {
+    var _a, _b;
+    const title = (_a = details === null || details === void 0 ? void 0 : details.title) !== null && _a !== void 0 ? _a : 'Error';
+    const body = (_b = details === null || details === void 0 ? void 0 : details.body) !== null && _b !== void 0 ? _b : 'Something went wrong';
+    return `${title}: ${body}`;
+};
+/**
+ * Retrieves the log level from an NotificationStructure object
+ * @public
+ * @param details - The NotificationStructure object
+ * @returns The log level or the default value (LogLevel.Debug) if not present
+ */
+export const getLoglevel = (details) => {
+    var _a;
+    return (details === null || details === void 0 ? void 0 : details.logLevel) || ((_a = details === null || details === void 0 ? void 0 : details.config) === null || _a === void 0 ? void 0 : _a.logLevel) || LogLevel.Debug;
+};
+/**
+ * Get/Create the error container in the DOM
+ * @public
+ * @param id - The id of the container
+ * @param tagName - The tag name to create prefix for the design system provider
+ * @returns
+ */
+export const getNotificationContainer = (id, tagName) => {
+    const tagPrefix = tagName.split('-')[0];
+    let container = document.querySelector(`#${id}`);
+    if (!container) {
+        container = document.createElement('div');
+        container.setAttribute('id', id);
+        const dsProvider = document.createElement(`${tagPrefix}-design-system-provider`);
+        dsProvider.appendChild(container);
+        document.body.appendChild(dsProvider);
+    }
+    return container;
+};
+/**
+ * Get the banner anchor to attach the banner to
+ * @public
+ * @param element - The element to start searching from
+ * @returns
+ */
+export const getBannerAnchor = (element) => {
+    var _a, _b;
+    while (element && !(element instanceof ShadowRoot)) {
+        const anchor = (_a = element === null || element === void 0 ? void 0 : element.getRootNode()) === null || _a === void 0 ? void 0 : _a.getElementById('banner-anchor');
+        if (anchor) {
+            anchor.style.position = 'relative';
+            return anchor;
+        }
+        element = (_b = element === null || element === void 0 ? void 0 : element.getRootNode()) === null || _b === void 0 ? void 0 : _b.host;
+    }
+    return createBannerContainer();
+};
+const createBannerContainer = () => {
+    const anchor = document.createElement('div');
+    anchor.setAttribute('id', 'banner-anchor');
+    anchor.style.position = 'relative';
+    document.body.insertBefore(anchor, document.body.firstChild);
+    return anchor;
+};

package/dist/esm/snackbar/index.js

@@ -0,0 +1,2 @@
+export * from './snackbar-builder';
+export * from './snackbar-launcher';

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

@@ -0,0 +1,48 @@
+/**
+ * SnackbarBuilder to build Snackbar
+ * @public
+ */
+export class SnackbarBuilder {
+    /**
+     * @public
+     * @param type - {@link SnackbarType}
+     * @returns
+     */
+    withType(type) {
+        this.type = type;
+        return this;
+    }
+    /**
+     * Add confirming action to snackbar
+     * @public
+     * @param confirmingAction - {@link ConfirmingAction}
+     * @returns
+     */
+    withConfirmingAction(confirmingAction) {
+        if (!this.confirmingActions) {
+            this.confirmingActions = [];
+        }
+        this.confirmingActions.push(confirmingAction);
+        return this;
+    }
+    /**
+     * Build snackbar
+     * @public
+     * @returns Snackbar
+     */
+    build() {
+        let snackbar = {};
+        if (this.confirmingActions) {
+            snackbar = Object.assign({ confirmingActions: this.confirmingActions }, snackbar);
+        }
+        if (this.type !== undefined) {
+            snackbar = Object.assign({ type: this.type }, snackbar);
+        }
+        return snackbar;
+    }
+}
+/**
+ * Get snackbar builder instance
+ * @public
+ */
+export const getSnackbarBuilder = () => new SnackbarBuilder();

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

@@ -0,0 +1,15 @@
+import { getNotificationContainer } from '../notification-util';
+/**
+ * Shows the snackbar
+ * @internal
+ * @param notification - The NotificationStructure object
+ * @param tagName - The tag name to create prefix for the design system provider & notification component
+ * @returns
+ * */
+export const showSnackbar = (notification, tagName) => {
+    const tagPrefix = tagName.split('-')[0];
+    const snackbar = document.createElement(`${tagPrefix}-snackbar`);
+    const container = getNotificationContainer('snack-container', tagName);
+    container.appendChild(snackbar);
+    snackbar.notification = notification;
+};

package/dist/esm/toast/index.js

@@ -0,0 +1,2 @@
+export * from './toast-builder';
+export * from './toast-launcher';

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

@@ -0,0 +1,70 @@
+/**
+ * @public
+ */
+export class ToastBuilder {
+    /**
+     * Add position to toast
+     * @public
+     * @param position - {@link ToastPosition}
+     * @returns
+     */
+    withPosition(position) {
+        this.position = position;
+        return this;
+    }
+    /**
+     * Add auto close to notification
+     * @public
+     * @param autoClose - boolean
+     * @returns
+     */
+    withAutoClose(autoClose) {
+        this.autoClose = autoClose;
+        return this;
+    }
+    /**
+     * Add close timeout to notification
+     * @public
+     * @param closeTimeout - number
+     * @returns
+     */
+    withCloseTimeout(closeTimeout) {
+        this.closeTimeout = closeTimeout;
+        return this;
+    }
+    /**
+     * Add type to notification, if the type is anything other than 'warning' or 'success' do not add it
+     * @public
+     * @param type - {@link NotificationType}
+     * @returns
+     */
+    withType(type) {
+        this.type = type;
+        return this;
+    }
+    /**
+     * Build notification
+     * @returns Toast
+     */
+    build() {
+        let notification = {};
+        if (this.position) {
+            notification = Object.assign({ position: this.position }, notification);
+        }
+        if (this.autoClose) {
+            notification = Object.assign({ autoClose: this.autoClose }, notification);
+        }
+        if (this.closeTimeout) {
+            notification = Object.assign({ closeTimeout: this.closeTimeout }, notification);
+        }
+        if (this.type) {
+            notification = Object.assign({ type: this.type }, notification);
+        }
+        return notification;
+    }
+}
+/**
+ * Get notification builder instance
+ * @public
+ */
+export const getToastBuilder = () => new ToastBuilder();

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

@@ -0,0 +1,54 @@
+import { getNotificationContainer } from '../notification-util';
+/**
+ * Shows the notificationStructure
+ * @internal
+ * @param notificationStructure - The NotificationStructure object
+ * @param tagName - The tag name to create prefix for the design system provider & notificationStructure component
+ * @returns
+ * */
+export const showToast = (notificationStructure, tagName) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const tagPrefix = tagName.split('-')[0];
+    const container = getNotificationContainer('notify-container', tagName);
+    if (container) {
+        container.style.position = 'fixed';
+        switch ((_b = (_a = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _a === void 0 ? void 0 : _a.toast) === null || _b === void 0 ? void 0 : _b.position) {
+            case 'top-left':
+                container.style.top = '0';
+                container.style.left = '0';
+                break;
+            case 'bottom-left':
+                container.style.bottom = '0';
+                container.style.left = '0';
+                break;
+            case 'bottom-right':
+                container.style.bottom = '0';
+                container.style.right = '0';
+                break;
+            default:
+                container.style.top = '0';
+                container.style.right = '0';
+        }
+    }
+    const toastNotify = document.createElement(`${tagPrefix}-toast`);
+    const toastTitle = document.createElement('div');
+    toastTitle.setAttribute('slot', 'top');
+    toastTitle.textContent = notificationStructure.title;
+    const toastDetails = document.createElement('div');
+    toastDetails.setAttribute('slot', 'content');
+    toastDetails.textContent = (notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.body) || '';
+    const toastDate = document.createElement('div');
+    toastDate.setAttribute('slot', 'date');
+    toastDate.textContent = new Date().toLocaleTimeString();
+    toastNotify.setAttribute('notify', ((_d = (_c = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _c === void 0 ? void 0 : _c.toast) === null || _d === void 0 ? void 0 : _d.type) || '');
+    ((_f = (_e = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _e === void 0 ? void 0 : _e.toast) === null || _f === void 0 ? void 0 : _f.autoClose)
+        ? toastNotify.setAttribute('auto-close', `${(_h = (_g = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _g === void 0 ? void 0 : _g.toast) === null || _h === void 0 ? void 0 : _h.autoClose}`)
+        : '';
+    ((_k = (_j = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _j === void 0 ? void 0 : _j.toast) === null || _k === void 0 ? void 0 : _k.closeTimeout)
+        ? toastNotify.setAttribute('close-timeout', `${(_m = (_l = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _l === void 0 ? void 0 : _l.toast) === null || _m === void 0 ? void 0 : _m.closeTimeout}`)
+        : '';
+    toastNotify.appendChild(toastTitle);
+    toastNotify.appendChild(toastDetails);
+    toastNotify.appendChild(toastDate);
+    container.appendChild(toastNotify);
+};

package/dist/esm/types.js

@@ -0,0 +1,8 @@
+/**
+ * @public
+ * enum for different types of notification events
+ */
+export var NotificationEvent;
+(function (NotificationEvent) {
+    NotificationEvent["NOTIFICATION_EVENT"] = "notification-event";
+})(NotificationEvent || (NotificationEvent = {}));