@genesislcap/foundation-notifications 14.400.0 → 14.401.0

package/dist/dts/container/index.d.ts

@@ -0,0 +1,3 @@
+export * from './notify-container';
+export * from './notify-container-builder';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/container/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC"}

package/dist/dts/container/notify-container-builder.d.ts

@@ -0,0 +1,9 @@
+import { NotifyContainerConfig } from './notify-container';
+/**
+ * Configures a `notify-container` component used to opt-into new behaviours for toast notifications such as stacking
+ * You can have a `notify-container` in each of the four corners of the screen.
+ * If you call this function for a `ToastPosition` and it does not yet exist then this function
+ * will create one. If it already exists then this will override its config
+ */
+export declare const configureNotifications: (config: Partial<NotifyContainerConfig>) => void;
+//# sourceMappingURL=notify-container-builder.d.ts.map

package/dist/dts/container/notify-container-builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notify-container-builder.d.ts","sourceRoot":"","sources":["../../../src/container/notify-container-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI5E;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,QAAQ,OAAO,CAAC,qBAAqB,CAAC,KAAG,IAwB/E,CAAC"}

package/dist/dts/container/notify-container.d.ts

@@ -0,0 +1,41 @@
+import { GenesisElement } from '@genesislcap/web-core';
+import { ToastPosition } from '../types';
+export interface NotifyContainerConfig {
+    position: ToastPosition;
+    stackThreshold: number;
+    allowManualCollapse: boolean;
+    allowCloseAll: boolean;
+    designSystemPrefix: string;
+    showCount: boolean;
+}
+export declare class NotifyContainer extends GenesisElement implements NotifyContainerConfig {
+    position: ToastPosition;
+    stackThreshold: number;
+    allowManualCollapse: boolean;
+    allowCloseAll: boolean;
+    designSystemPrefix: string;
+    showCount: boolean;
+    stackCollapsed: boolean;
+    private manuallyExpanded;
+    private routeSubscriber;
+    /** @internal */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private checkRoute;
+    slottedNodes: Node[];
+    /** @internal */
+    slottedNodesChanged(): void;
+    /** @internal */
+    handleContainerClick(): void;
+    /** @internal */
+    handleToggleCollapse(): void;
+    /** @internal */
+    handleCloseAll(): void;
+    /**
+     * Manages the absolute positioning of notifications to enable smooth stack-to-list animations.
+     * Uses a batch read/write pattern to avoid layout thrashing.
+     * @internal
+     */
+    private handlePosition;
+}
+//# sourceMappingURL=notify-container.d.ts.map

package/dist/dts/container/notify-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notify-container.d.ts","sourceRoot":"","sources":["../../../src/container/notify-container.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,cAAc,EAA0B,MAAM,uBAAuB,CAAC;AAEpG,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAIzC,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,aAAa,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;CACpB;AAID,qBAKa,eAAgB,SAAQ,cAAe,YAAW,qBAAqB;IAC5E,QAAQ,EAAE,aAAa,CAAe;IACJ,cAAc,EAAE,MAAM,CAAqB;IACpB,mBAAmB,EAAE,OAAO,CACpF;IACkD,aAAa,EAAE,OAAO,CAAQ;IAC1C,kBAAkB,EAAE,MAAM,CAAW;IAC9B,SAAS,EAAE,OAAO,CAAQ;IAErB,cAAc,EAAE,OAAO,CAAS;IAEzF,OAAO,CAAC,gBAAgB,CAAkB;IAE1C,OAAO,CAAC,eAAe,CAErB;IAEF,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,UAAU;IAMN,YAAY,EAAE,IAAI,EAAE,CAAM;IACtC,gBAAgB;IAChB,mBAAmB;IAiBnB,gBAAgB;IAChB,oBAAoB;IAOpB,gBAAgB;IAChB,oBAAoB;IAKpB,gBAAgB;IAChB,cAAc;IAQd;;;;OAIG;IACH,OAAO,CAAC,cAAc;CAsBvB"}

package/dist/dts/container/notify-container.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=notify-container.styles.d.ts.map

package/dist/dts/container/notify-container.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notify-container.styles.d.ts","sourceRoot":"","sources":["../../../src/container/notify-container.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,iDAiNlB,CAAC"}

package/dist/dts/container/notify-container.template.d.ts

@@ -0,0 +1,3 @@
+import { NotifyContainer } from './notify-container';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<NotifyContainer, any>;
+//# sourceMappingURL=notify-container.template.d.ts.map

package/dist/dts/container/notify-container.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notify-container.template.d.ts","sourceRoot":"","sources":["../../../src/container/notify-container.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAoCrD,eAAO,MAAM,QAAQ,sEAUpB,CAAC"}

package/dist/dts/index.d.ts

@@ -3,6 +3,7 @@ export * from './banner';
 export * from './dialog';
 export * from './snackbar';
 export * from './toast';
+export * from './container';
 export * from './notification-builder';
 export * from './notification-launcher';
 export * from './notification-util';

package/dist/dts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"toast-launcher.d.ts","sourceRoot":"","sources":["../../../src/toast/toast-launcher.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD;;;;;;;KAOK;AACL,eAAO,MAAM,SAAS,GACpB,uBAAuB,qBAAqB,EAC5C,SAAS,MAAM,EACf,wBAAwB,WAAW,KAClC,IA6FF,CAAC"}
+{"version":3,"file":"toast-launcher.d.ts","sourceRoot":"","sources":["../../../src/toast/toast-launcher.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAiB,MAAM,UAAU,CAAC;AAiChE;;;;;;;KAOK;AACL,eAAO,MAAM,SAAS,GACpB,uBAAuB,qBAAqB,EAC5C,SAAS,MAAM,EACf,wBAAwB,WAAW,KAClC,IAgFF,CAAC"}

package/dist/esm/container/index.js

@@ -0,0 +1,2 @@
+export * from './notify-container';
+export * from './notify-container-builder';

package/dist/esm/container/notify-container-builder.js

@@ -0,0 +1,29 @@
+import { getCurrentDesignSystem } from '@genesislcap/foundation-utils';
+import { NotifyContainer } from './notify-container';
+NotifyContainer;
+/**
+ * Configures a `notify-container` component used to opt-into new behaviours for toast notifications such as stacking
+ * You can have a `notify-container` in each of the four corners of the screen.
+ * If you call this function for a `ToastPosition` and it does not yet exist then this function
+ * will create one. If it already exists then this will override its config
+ */
+export const configureNotifications = (config) => {
+    // TODO: we can support this later
+    if (config.position === 'bottom-left' || config.position === 'bottom-right') {
+        throw new Error("NotifyContainer doesn't currently support bottom corner placements");
+    }
+    const { element: providerElement } = getCurrentDesignSystem(document.body, 'rapid');
+    if (!providerElement) {
+        // TODO: later we can make this more robust
+        throw new Error('Cannot find design system provider');
+    }
+    const mExistingContainer = Array.from(providerElement.querySelectorAll('notify-container')).find((elem) => { var _a; return elem.position === ((_a = config === null || config === void 0 ? void 0 : config.position) !== null && _a !== void 0 ? _a : 'top-right'); });
+    const container = (() => {
+        if (mExistingContainer)
+            return mExistingContainer;
+        const newContainer = document.createElement('notify-container');
+        providerElement.appendChild(newContainer);
+        return newContainer;
+    })();
+    Object.entries(config).forEach(([k, v]) => (container[k] = v));
+};

package/dist/esm/container/notify-container.js

@@ -0,0 +1,129 @@
+import { __decorate } from "tslib";
+import { RouteUtil } from '@genesislcap/foundation-utils';
+import { attr, customElement, GenesisElement, observable, Observable } from '@genesislcap/web-core';
+import { logger } from '../logger';
+import { styles } from './notify-container.styles';
+import { template } from './notify-container.template';
+const DEFAULT_THRESHOLD = 5;
+let NotifyContainer = class NotifyContainer extends GenesisElement {
+    constructor() {
+        super(...arguments);
+        this.position = 'top-right';
+        this.stackThreshold = DEFAULT_THRESHOLD;
+        this.allowManualCollapse = true;
+        this.allowCloseAll = true;
+        this.designSystemPrefix = 'rapid';
+        this.showCount = true;
+        this.stackCollapsed = false;
+        this.manuallyExpanded = false;
+        this.routeSubscriber = {
+            handleChange: () => this.checkRoute(RouteUtil.shared.pathName),
+        };
+        this.slottedNodes = [];
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.position === 'bottom-left' || this.position === 'bottom-right') {
+            logger.error("NotifyContainer doesn't currently support bottom corner placements");
+        }
+        Observable.getNotifier(RouteUtil.shared).subscribe(this.routeSubscriber, 'pathName');
+        this.checkRoute(RouteUtil.shared.pathName);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        Observable.getNotifier(RouteUtil.shared).unsubscribe(this.routeSubscriber, 'pathName');
+    }
+    checkRoute(path) {
+        if (path.includes('/login') || path.includes('/logout')) {
+            this.handleCloseAll();
+        }
+    }
+    /** @internal */
+    slottedNodesChanged() {
+        if (!this.manuallyExpanded &&
+            !this.stackCollapsed &&
+            this.slottedNodes.length > this.stackThreshold) {
+            this.stackCollapsed = true;
+        }
+        if (this.stackCollapsed && this.slottedNodes.length <= 1) {
+            this.stackCollapsed = false;
+            this.manuallyExpanded = false;
+        }
+        this.handlePosition();
+    }
+    /** @internal */
+    handleContainerClick() {
+        if (this.stackCollapsed) {
+            this.stackCollapsed = false;
+            this.manuallyExpanded = true;
+        }
+    }
+    /** @internal */
+    handleToggleCollapse() {
+        this.stackCollapsed = !this.stackCollapsed;
+        this.manuallyExpanded = !this.stackCollapsed;
+    }
+    /** @internal */
+    handleCloseAll() {
+        while (this.firstChild) {
+            this.removeChild(this.firstChild);
+        }
+        this.stackCollapsed = false;
+        this.manuallyExpanded = false;
+    }
+    /**
+     * Manages the absolute positioning of notifications to enable smooth stack-to-list animations.
+     * Uses a batch read/write pattern to avoid layout thrashing.
+     * @internal
+     */
+    handlePosition() {
+        const toasts = this.slottedNodes.filter((node) => node instanceof HTMLElement);
+        if (!toasts.length) {
+            return;
+        }
+        toasts.forEach((toast, index) => {
+            toast.style.position = 'absolute';
+            toast.style.transition = 'all 0.3s ease-in';
+            toast.style.right = '0px';
+            toast.style.zIndex = (toasts.length - index).toString();
+        });
+        const heights = toasts.map((toast) => toast.offsetHeight);
+        toasts.reduce((yOffset, toast, index) => {
+            toast.style.top = `${yOffset}px`;
+            return yOffset + heights[index];
+        }, 0);
+    }
+};
+__decorate([
+    attr
+], NotifyContainer.prototype, "position", void 0);
+__decorate([
+    attr({ attribute: 'stack-threshold' })
+], NotifyContainer.prototype, "stackThreshold", void 0);
+__decorate([
+    attr({ attribute: 'allow-manual-collapse', mode: 'boolean' })
+], NotifyContainer.prototype, "allowManualCollapse", void 0);
+__decorate([
+    attr({ attribute: 'allow-close-all', mode: 'boolean' })
+], NotifyContainer.prototype, "allowCloseAll", void 0);
+__decorate([
+    attr({ attribute: 'design-system-prefix' })
+], NotifyContainer.prototype, "designSystemPrefix", void 0);
+__decorate([
+    attr({ attribute: 'show-count', mode: 'boolean' })
+], NotifyContainer.prototype, "showCount", void 0);
+__decorate([
+    attr({ attribute: 'stack-collapsed', mode: 'boolean' })
+], NotifyContainer.prototype, "stackCollapsed", void 0);
+__decorate([
+    observable
+], NotifyContainer.prototype, "slottedNodes", void 0);
+NotifyContainer = __decorate([
+    customElement({
+        name: 'notify-container',
+        template,
+        styles,
+    })
+], NotifyContainer);
+export { NotifyContainer };

package/dist/esm/container/notify-container.styles.js

@@ -0,0 +1,211 @@
+import { css } from '@genesislcap/web-core';
+export const styles = css `
+  :host {
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    box-sizing: border-box;
+    pointer-events: none; /* Allow clicks to pass through empty space */
+    width: 415px;
+  }
+
+  .toast-container {
+    padding: 0 8px 12px 12px;
+    position: relative;
+  }
+
+  /* Expanded / List State: Allow scrolling if too many items */
+
+  :host(:not([stack-collapsed])) {
+    max-height: calc(100% - var(--nav-height));
+    overflow: hidden;
+    pointer-events: auto; /* Enable pointer events for scrolling */
+
+    slot {
+      display: block;
+      height: calc(100vh - var(--nav-height) - 54px);
+      position: relative;
+    }
+
+    .toast-container {
+      flex: 1;
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      scrollbar-color: var(--neutral-layer-3) transparent;
+
+      &:hover {
+        scrollbar-color: var(--neutral-layer-4) transparent;
+      }
+    }
+  }
+
+  .header {
+    display: flex;
+    gap: 12px;
+    pointer-events: none;
+    margin: 5px 24px;
+    justify-content: space-between;
+    visibility: hidden;
+    align-items: center;
+    box-sizing: border-box;
+
+    .header-title {
+      text-shadow: 0 0 10px #000;
+    }
+
+    .notification-header-buttons {
+      display: flex;
+      gap: 4px;
+
+      rapid-icon {
+        color: var(--neutral-foreground-hint);
+        margin-left: 4px;
+        display: inline-flex;
+        font-size: 14px;
+
+        &.chevron-up.collapse {
+          transform: rotate(180deg);
+          transition: transform 0.3s ease;
+        }
+      }
+    }
+
+    --base-height-multiplier: 8;
+
+    *[appearance='neutral'] {
+      font-size: 11px;
+      cursor: pointer;
+      background: var(--neutral-fill-rest);
+    }
+  }
+
+  .header.visible {
+    visibility: visible;
+    pointer-events: auto; /* Enable clicks on header buttons */
+  }
+
+  :host([position$='left']) .header {
+    justify-content: space-between;
+  }
+
+  :host([position^='bottom']) .header {
+    margin-bottom: 0;
+    margin-top: 4px;
+  }
+
+  /* Ensure children (toasts) are clickable */
+
+  ::slotted(*) {
+    pointer-events: auto;
+  }
+
+  :host([position='top-right']) {
+    top: var(--nav-height, 0);
+    right: 0;
+  }
+
+  :host([position='top-left']) {
+    top: var(--nav-height, 0);
+    left: 0;
+  }
+
+  :host([position='bottom-right']) {
+    bottom: 0;
+    right: 0;
+    flex-direction: column-reverse;
+  }
+
+  :host([position='bottom-left']) {
+    bottom: 0;
+    left: 0;
+    flex-direction: column-reverse;
+  }
+
+  /* Stacked / Collapsed State */
+
+  :host([stack-collapsed]) {
+    height: min-content;
+
+    /* Host allows pointer events so they can reach the slot */
+    pointer-events: auto;
+    cursor: pointer;
+  }
+
+  /* Apply the grid layout to the slot itself so it acts as the container and click target */
+
+  :host([stack-collapsed]) slot {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+    align-items: end; /* Default to bottom-up stacking */
+    justify-items: center;
+
+    /* The slot catches the click */
+    pointer-events: auto;
+  }
+
+  /* Rotate when the collapse class is present */
+
+  :host([stack-collapsed][position^='top']) slot {
+    align-items: start;
+  }
+
+  :host([stack-collapsed][position$='right']) slot {
+    justify-items: end;
+  }
+
+  :host([stack-collapsed][position$='left']) slot {
+    justify-items: start;
+  }
+
+  :host([stack-collapsed]) ::slotted(*) {
+    grid-area: 1 / 1;
+    transition:
+      transform 0.3s ease,
+      top 0.3s ease,
+      opacity 0.3s ease;
+    opacity: 0%;
+    pointer-events: none !important; /* Disable interaction with toasts in collapsed state */
+    transform: scale(0.9);
+    top: 0 !important;
+  }
+
+  /* Show and offset the top 3 items in the stack */
+
+  :host([stack-collapsed]) ::slotted(:nth-child(1)) {
+    opacity: 100%;
+    pointer-events: auto;
+    transform: translateY(0) scale(1);
+    z-index: 3;
+    position: relative !important;
+  }
+
+  :host([stack-collapsed]) ::slotted(:nth-child(2)) {
+    opacity: 100%;
+    transform: translateY(var(--stack-offset-y, 8px)) scale(0.95);
+    z-index: 2;
+    position: relative !important;
+  }
+
+  :host([stack-collapsed]) ::slotted(:nth-child(3)) {
+    opacity: 100%;
+    transform: translateY(var(--stack-offset-y-2, 16px)) scale(0.9);
+    z-index: 1;
+    position: relative !important;
+  }
+
+  /* Adjust offset direction based on position */
+
+  :host([stack-collapsed][position^='top']) {
+    --stack-offset-y: 8px;
+    --stack-offset-y-2: 16px;
+  }
+
+  :host([stack-collapsed][position^='bottom']) {
+    --stack-offset-y: -8px;
+    --stack-offset-y-2: -16px;
+  }
+`;

package/dist/esm/container/notify-container.template.js

@@ -0,0 +1,33 @@
+import { classNames, html, slotted, when } from '@genesislcap/web-core';
+const headerTemplate = (prefix) => html `
+  <div class="header ${(x) => classNames(['visible', x.slottedNodes.length > 1])}">
+    ${when((x) => x.showCount, html `
+        <span class="header-title">${(x) => x.slottedNodes.length} Notifications</span>
+      `)}
+    <div class="notification-header-buttons">
+      ${when((x) => x.allowManualCollapse, html `
+  <${prefix}-button @click=${(x) => x.handleToggleCollapse()}>
+    ${(x) => (x.stackCollapsed ? 'Expand' : 'Collapse')}
+    <${prefix}-icon
+      class="chevron-up ${(x) => classNames(['collapse', x.stackCollapsed])}"
+      name="chevron-up"></${prefix}-icon>
+    </${prefix}-button>
+`)}
+      ${when((x) => x.allowCloseAll, html `
+  <${prefix}-button @click=${(x) => x.handleCloseAll()}>
+    Close All
+    <${prefix}-icon name="xmark">
+    </${prefix}-icon>
+  </${prefix}-button>
+`)}
+    </div>
+  </div>
+`;
+export const template = html `
+  ${when((x) => x.allowCloseAll || x.allowManualCollapse, html `
+      ${(x) => headerTemplate(x.designSystemPrefix)}
+    `)}
+  <div class="toast-container">
+    <slot ${slotted('slottedNodes')} @click="${(x) => x.handleContainerClick()}"></slot>
+  </div>
+`;

package/dist/esm/index.js

@@ -3,6 +3,7 @@ export * from './banner';
 export * from './dialog';
 export * from './snackbar';
 export * from './toast';
+export * from './container';
 export * from './notification-builder';
 export * from './notification-launcher';
 export * from './notification-util';

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

@@ -1,4 +1,29 @@
+import { getAllElements } from '@genesislcap/foundation-utils';
 import { getNotificationContainer, showLoggerLogLevel } from '../notification-util';
+const findNotifyContainer = (position) => {
+    return getAllElements(document.body).find((element) => element.tagName.toLowerCase() === 'notify-container' && element.position === position);
+};
+function configureDivContainer(notificationStructure, container) {
+    var _a, _b;
+    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 = 'var(--nav-height, 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 = 'var(--nav-height, 0)';
+            container.style.right = '0';
+    }
+}
 /**
  * Shows the notificationStructure
  * @internal
@@ -8,29 +33,13 @@ import { getNotificationContainer, showLoggerLogLevel } from '../notification-ut
  * @returns
  * */
 export const showToast = (notificationStructure, tagName, notificationContainer) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     showLoggerLogLevel(notificationStructure);
     const tagPrefix = tagName.split('-')[0];
-    const container = notificationContainer !== null && notificationContainer !== void 0 ? notificationContainer : 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 = 'var(--nav-height, 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 = 'var(--nav-height, 0)';
-                container.style.right = '0';
-        }
+    const position = ((_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) || 'top-right';
+    const container = (_c = notificationContainer !== null && notificationContainer !== void 0 ? notificationContainer : findNotifyContainer(position)) !== null && _c !== void 0 ? _c : getNotificationContainer('notify-container', tagName);
+    if (container && container.tagName.toLowerCase() !== 'notify-container') {
+        configureDivContainer(notificationStructure, container);
     }
     const toastNotify = document.createElement(`${tagPrefix}-toast`);
     const toastTitle = document.createElement('div');
@@ -41,10 +50,10 @@ export const showToast = (notificationStructure, tagName, notificationContainer)
     toastDetails.textContent = (notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.body) || '';
     const toastDate = document.createElement('div');
     toastDate.setAttribute('slot', 'date');
-    toastDate.textContent = ((_c = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.createdAt) === null || _c === void 0 ? void 0 : _c.toLocaleTimeString()) || '';
+    toastDate.textContent = ((_d = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.createdAt) === null || _d === void 0 ? void 0 : _d.toLocaleTimeString()) || '';
     let toastBottom;
-    if (((_e = (_d = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _d === void 0 ? void 0 : _d.toast) === null || _e === void 0 ? void 0 : _e.buttons) &&
-        ((_h = (_g = (_f = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _f === void 0 ? void 0 : _f.toast) === null || _g === void 0 ? void 0 : _g.buttons) === null || _h === void 0 ? void 0 : _h.length)) {
+    if (((_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.buttons) &&
+        ((_j = (_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.buttons) === null || _j === void 0 ? void 0 : _j.length)) {
         toastBottom = document.createElement('div');
         toastBottom.setAttribute('slot', 'bottom');
         notificationStructure.config.toast.buttons.forEach((button) => {
@@ -66,15 +75,15 @@ export const showToast = (notificationStructure, tagName, notificationContainer)
             toastBottom.appendChild(buttonElement);
         });
     }
-    toastNotify.setAttribute('notify', ((_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.type) || '');
+    toastNotify.setAttribute('notify', ((_l = (_k = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _k === void 0 ? void 0 : _k.toast) === null || _l === void 0 ? void 0 : _l.type) || '');
     if (notificationStructure.iconName) {
         toastNotify.setAttribute('notification-icon', notificationStructure.iconName);
     }
-    ((_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.autoClose)
-        ? toastNotify.setAttribute('auto-close', `${(_p = (_o = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _o === void 0 ? void 0 : _o.toast) === null || _p === void 0 ? void 0 : _p.autoClose}`)
+    ((_o = (_m = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _m === void 0 ? void 0 : _m.toast) === null || _o === void 0 ? void 0 : _o.autoClose)
+        ? toastNotify.setAttribute('auto-close', `${(_q = (_p = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _p === void 0 ? void 0 : _p.toast) === null || _q === void 0 ? void 0 : _q.autoClose}`)
         : '';
-    ((_r = (_q = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _q === void 0 ? void 0 : _q.toast) === null || _r === void 0 ? void 0 : _r.closeTimeout)
-        ? toastNotify.setAttribute('close-timeout', `${(_t = (_s = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _s === void 0 ? void 0 : _s.toast) === null || _t === void 0 ? void 0 : _t.closeTimeout}`)
+    ((_s = (_r = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _r === void 0 ? void 0 : _r.toast) === null || _s === void 0 ? void 0 : _s.closeTimeout)
+        ? toastNotify.setAttribute('close-timeout', `${(_u = (_t = notificationStructure === null || notificationStructure === void 0 ? void 0 : notificationStructure.config) === null || _t === void 0 ? void 0 : _t.toast) === null || _u === void 0 ? void 0 : _u.closeTimeout}`)
         : '';
     toastNotify.appendChild(toastTitle);
     toastNotify.appendChild(toastDetails);
@@ -82,5 +91,5 @@ export const showToast = (notificationStructure, tagName, notificationContainer)
     if (toastBottom) {
         toastNotify.appendChild(toastBottom);
     }
-    container.appendChild(toastNotify);
+    container.prepend(toastNotify);
 };