@fundamental-ngx/core 0.59.1-rc.9 → 0.59.1

package/fesm2022/fundamental-ngx-core-message-strip.mjs

@@ -1,17 +1,17 @@
 import { Overlay } from '@angular/cdk/overlay';
 import * as i1 from '@angular/cdk/portal';
-import { ComponentPortal, PortalModule, DomPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
+import { ComponentPortal, PortalModule, CdkPortalOutlet, DomPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, DestroyRef, Injector, Input, Component, Directive, EventEmitter, booleanAttribute, ContentChild, Output, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, isDevMode, ViewContainerRef, Renderer2, TemplateRef, ViewChild, ViewChildren, Injectable, NgModule } from '@angular/core';
+import { InjectionToken, input, signal, inject, DestroyRef, effect, Injector, Component, computed, viewChildren, ViewEncapsulation, Directive, EventEmitter, booleanAttribute, ContentChild, Output, Input, HostBinding, ChangeDetectionStrategy, ElementRef, isDevMode, ViewContainerRef, Renderer2, TemplateRef, ViewChild, Injectable, NgModule } from '@angular/core';
 import { applyCssClass, destroyObservable, ViewportSizeObservable, ResponsiveBreakpoints } from '@fundamental-ngx/cdk/utils';
 import { FD_LANGUAGE, TranslationResolver, I18nModule, patchLanguage } from '@fundamental-ngx/i18n';
-import { BehaviorSubject, map, tap, of, withLatestFrom, merge, fromEvent, startWith, Observable, takeUntil, filter, Subject, combineLatest } from 'rxjs';
-import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import { of, map, withLatestFrom, merge, fromEvent, startWith, Observable, takeUntil, filter, BehaviorSubject, Subject, combineLatest, tap } from 'rxjs';
 import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, NavigationStart } from '@angular/router';
 import { switchMap } from 'rxjs/operators';
 import { __decorate, __metadata } from 'tslib';
+import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
 import { ContentDensityDirective } from '@fundamental-ngx/core/content-density';
 import { IconComponent } from '@fundamental-ngx/core/icon';
@@ -52,7 +52,15 @@ const MessageStripAlertComponentData = new InjectionToken('MessageStripAlertComp
  * it will be empty.
  */
 class MessageStripAlertContainerFooterComponent {
+    /** @hidden */
     constructor() {
+        /** @hidden */
+        this.alertRefs = input([], ...(ngDevMode ? [{ debugName: "alertRefs" }] : []));
+        /**
+         * Reference to the user provided component's portal.
+         * @hidden
+         */
+        this._footerComponentPortal = signal(undefined, ...(ngDevMode ? [{ debugName: "_footerComponentPortal" }] : []));
         /**
          * Position of the overlay in which this component is rendered.
          */
@@ -62,43 +70,77 @@ class MessageStripAlertContainerFooterComponent {
         /** @hidden */
         this.messageStripAlertService = inject(MessageStripAlertService);
         /**
-         * Observable that emits the alert references that are currently rendered in the container.
+         * Footer component from service as signal.
          */
-        this.alertRefs$ = new BehaviorSubject([]);
-    }
-    /** @hidden */
-    set alertRefs(alertRefs) {
-        this.alertRefs$.next(alertRefs);
-    }
-    /** @hidden */
-    ngAfterViewInit() {
-        this.messageStripAlertService.footerComponents$
-            .pipe(map((components) => components[this.position]), tap((footerComponent) => {
+        this._footerComponent = toSignal(this.messageStripAlertService.footerComponents$, { initialValue: {} });
+        // Convert alertRefs signal to observable in injection context
+        this._alertRefs$ = toObservable(this.alertRefs).pipe(takeUntilDestroyed(this._destroyRef));
+        effect(() => {
+            const footerComponent = this._footerComponent()[this.position];
             if (footerComponent) {
-                this.footerComponentPortal = new ComponentPortal(footerComponent, null, Injector.create({
+                this._footerComponentPortal.set(new ComponentPortal(footerComponent, null, Injector.create({
                     providers: [
                         {
                             provide: MessageStripAlertContainerAlertRefs,
-                            useValue: this.alertRefs$.pipe(takeUntilDestroyed(this._destroyRef))
+                            useValue: this._alertRefs$
                         }
                     ]
-                }));
+                })));
             }
             else {
-                this.footerComponentPortal = undefined;
+                this._footerComponentPortal.set(undefined);
             }
-        }), takeUntilDestroyed(this._destroyRef))
-            .subscribe();
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MessageStripAlertContainerFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MessageStripAlertContainerFooterComponent, isStandalone: true, selector: "fd-message-strip-alert-container-footer", inputs: { alertRefs: "alertRefs" }, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="footerComponentPortal"></ng-template> `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MessageStripAlertContainerFooterComponent, isStandalone: true, selector: "fd-message-strip-alert-container-footer", inputs: { alertRefs: { classPropertyName: "alertRefs", publicName: "alertRefs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="_footerComponentPortal()"></ng-template> `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MessageStripAlertContainerFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-message-strip-alert-container-footer', template: ` <ng-template [cdkPortalOutlet]="footerComponentPortal"></ng-template> `, imports: [PortalModule], styles: [":host{display:block}\n"] }]
-        }], propDecorators: { alertRefs: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'fd-message-strip-alert-container-footer', template: ` <ng-template [cdkPortalOutlet]="_footerComponentPortal()"></ng-template> `, imports: [PortalModule], styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { alertRefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertRefs", required: false }] }] } });
+
+/**
+ * This will be rendered in the overlay. It is responsible for rendering the alerts and the footer.
+ */
+class MessageStripAlertContainerComponent {
+    constructor() {
+        /**
+         * The list of the elements that are attached to the container.
+         */
+        this.attachedElements = signal([], ...(ngDevMode ? [{ debugName: "attachedElements" }] : []));
+        /**
+         * List of the rendered message strip alerts. It is used in the footer and is injected into the
+         * user-provided footer component portal. This way, user has full control over the container alerts.
+         * @hidden
+         */
+        this._alertRefs = computed(() => this._portalOutlets()
+            .map((p) => p.attachedRef?.instance?.alertRef)
+            .filter((ref) => !!ref), ...(ngDevMode ? [{ debugName: "_alertRefs" }] : []));
+        /** @hidden */
+        this._portalOutlets = viewChildren(CdkPortalOutlet, ...(ngDevMode ? [{ debugName: "_portalOutlets" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MessageStripAlertContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MessageStripAlertContainerComponent, isStandalone: true, selector: "fd-message-strip-alert-container", viewQueries: [{ propertyName: "_portalOutlets", predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <div fdScrollbar>
+            @for (portal of attachedElements(); track portal) {
+                <ng-template [cdkPortalOutlet]="portal"></ng-template>
+            }
+        </div>
+        <fd-message-strip-alert-container-footer [alertRefs]="_alertRefs()"></fd-message-strip-alert-container-footer>
+    `, isInline: true, styles: [".fd-message-strip-alert-overlay{max-width:33.33vw;padding:.5rem}.fd-message-strip-alert-overlay--top{top:0;max-height:100vh}.fd-message-strip-alert-overlay--top.fd-message-strip-alert-overlay--bottom-opened{max-height:50vh}.fd-message-strip-alert-overlay--bottom{top:initial;bottom:0;max-height:100vh}.fd-message-strip-alert-overlay--bottom fd-message-strip-alert-container{flex-direction:column-reverse}.fd-message-strip-alert-overlay--bottom.fd-message-strip-alert-overlay--top-opened{max-height:50vh}.fd-message-strip-alert-overlay--start{left:0}.fd-message-strip-alert-overlay--middle{left:33.33vw;width:33.33vw}@media screen and (max-width:992px){.fd-message-strip-alert-overlay--middle{left:5vw;width:90vw;max-width:90vw}}.fd-message-strip-alert-overlay--middle fd-message-strip-alert-container{width:100%}.fd-message-strip-alert-overlay--middle fd-message-strip-alert-container>.fd-scrollbar>*{width:fit-content;margin:0 auto}.fd-message-strip-alert-overlay--end{right:0}.fd-message-strip-alert-overlay fd-message-strip-alert-container{display:flex;flex-direction:column}.fd-message-strip-alert-overlay fd-message-strip-alert-container div[fdscrollbar]{width:100%;display:flex;padding:.5rem;gap:.75rem;flex-direction:column;max-height:100%}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible"] }, { kind: "component", type: MessageStripAlertContainerFooterComponent, selector: "fd-message-strip-alert-container-footer", inputs: ["alertRefs"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MessageStripAlertContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fd-message-strip-alert-container', template: `
+        <div fdScrollbar>
+            @for (portal of attachedElements(); track portal) {
+                <ng-template [cdkPortalOutlet]="portal"></ng-template>
+            }
+        </div>
+        <fd-message-strip-alert-container-footer [alertRefs]="_alertRefs()"></fd-message-strip-alert-container-footer>
+    `, encapsulation: ViewEncapsulation.None, imports: [PortalModule, ScrollbarDirective, MessageStripAlertContainerFooterComponent], styles: [".fd-message-strip-alert-overlay{max-width:33.33vw;padding:.5rem}.fd-message-strip-alert-overlay--top{top:0;max-height:100vh}.fd-message-strip-alert-overlay--top.fd-message-strip-alert-overlay--bottom-opened{max-height:50vh}.fd-message-strip-alert-overlay--bottom{top:initial;bottom:0;max-height:100vh}.fd-message-strip-alert-overlay--bottom fd-message-strip-alert-container{flex-direction:column-reverse}.fd-message-strip-alert-overlay--bottom.fd-message-strip-alert-overlay--top-opened{max-height:50vh}.fd-message-strip-alert-overlay--start{left:0}.fd-message-strip-alert-overlay--middle{left:33.33vw;width:33.33vw}@media screen and (max-width:992px){.fd-message-strip-alert-overlay--middle{left:5vw;width:90vw;max-width:90vw}}.fd-message-strip-alert-overlay--middle fd-message-strip-alert-container{width:100%}.fd-message-strip-alert-overlay--middle fd-message-strip-alert-container>.fd-scrollbar>*{width:fit-content;margin:0 auto}.fd-message-strip-alert-overlay--end{right:0}.fd-message-strip-alert-overlay fd-message-strip-alert-container{display:flex;flex-direction:column}.fd-message-strip-alert-overlay fd-message-strip-alert-container div[fdscrollbar]{width:100%;display:flex;padding:.5rem;gap:.75rem;flex-direction:column;max-height:100%}\n"] }]
+        }], propDecorators: { _portalOutlets: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }] } });
 
 class MessageStripIconDirective {
     /** @hidden */
@@ -321,8 +363,11 @@ class AutoDismissMessageStripDirective {
         this.duration = 10000;
         /** Whether the alert should stay open if the mouse is hovering over it. */
         this.mousePersist = false;
-        /** Whether the message strip is currently opened. */
-        this.opened = false;
+        /**
+         * Whether the message strip is currently opened.
+         * @hidden
+         */
+        this._opened = signal(false, ...(ngDevMode ? [{ debugName: "_opened" }] : []));
         /** @hidden */
         this.messageStripComponent = inject(MessageStripComponent, { optional: false, host: true });
         /** @hidden */
@@ -345,7 +390,7 @@ class AutoDismissMessageStripDirective {
     }
     /** @hidden */
     open() {
-        this.opened = true;
+        this._opened.set(true);
         this.elementRef.nativeElement.classList.remove('fd-has-display-block');
         this.elementRef.nativeElement.classList.remove('fd-has-display-none');
         this.stopAutoDismiss();
@@ -380,7 +425,7 @@ class AutoDismissMessageStripDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutoDismissMessageStripDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.0", type: AutoDismissMessageStripDirective, isStandalone: true, selector: "fd-message-strip[mousePersist], fd-message-strip[duration], fd-message-strip[autoDismiss]", inputs: { dismissible: ["dismissible", "dismissible", booleanAttribute], autoDismiss: ["autoDismiss", "autoDismiss", booleanAttribute], duration: "duration", mousePersist: ["mousePersist", "mousePersist", booleanAttribute] }, host: { properties: { "style.display": "!opened ? \"none\" : null" } }, exportAs: ["fdAutoDismissMessageStrip"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.0", type: AutoDismissMessageStripDirective, isStandalone: true, selector: "fd-message-strip[mousePersist], fd-message-strip[duration], fd-message-strip[autoDismiss]", inputs: { dismissible: ["dismissible", "dismissible", booleanAttribute], autoDismiss: ["autoDismiss", "autoDismiss", booleanAttribute], duration: "duration", mousePersist: ["mousePersist", "mousePersist", booleanAttribute] }, host: { properties: { "style.display": "!_opened() ? \"none\" : null" } }, exportAs: ["fdAutoDismissMessageStrip"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutoDismissMessageStripDirective, decorators: [{
             type: Directive,
@@ -390,7 +435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     exportAs: 'fdAutoDismissMessageStrip',
                     standalone: true,
                     host: {
-                        '[style.display]': '!opened ? "none" : null'
+                        '[style.display]': '!_opened() ? "none" : null'
                     }
                 }]
         }], propDecorators: { dismissible: [{
@@ -471,54 +516,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 args: [AutoDismissMessageStripDirective]
             }] } });
 
-/**
- * This will be rendered in the overlay. It is responsible for rendering the alerts and the footer.
- */
-class MessageStripAlertContainerComponent {
-    constructor() {
-        /**
-         * The list of the elements that are attached to the container.
-         */
-        this.attachedElements = [];
-    }
-    /** @hidden */
-    ngAfterViewInit() {
-        this.alertRefs$ = this.portalOutlets.changes.pipe(startWith(this.portalOutlets), map(() => this.portalOutlets
-            .toArray()
-            .map((p) => p.attachedRef?.instance.alertRef)));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MessageStripAlertContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MessageStripAlertContainerComponent, isStandalone: true, selector: "fd-message-strip-alert-container", viewQueries: [{ propertyName: "portalOutlets", predicate: CdkPortalOutlet, descendants: true }, { propertyName: "alerts", predicate: MessageStripAlertComponent, descendants: true }], ngImport: i0, template: `
-        <div fdScrollbar>
-            @for (portal of attachedElements; track portal) {
-                <ng-template [cdkPortalOutlet]="portal"></ng-template>
-            }
-        </div>
-        <fd-message-strip-alert-container-footer
-            [alertRefs]="alertRefs$ | async"
-        ></fd-message-strip-alert-container-footer>
-    `, isInline: true, styles: [".fd-message-strip-alert-overlay{max-width:33.33vw;padding:.5rem}.fd-message-strip-alert-overlay--top{top:0;max-height:100vh}.fd-message-strip-alert-overlay--top.fd-message-strip-alert-overlay--bottom-opened{max-height:50vh}.fd-message-strip-alert-overlay--bottom{top:initial;bottom:0;max-height:100vh}.fd-message-strip-alert-overlay--bottom fd-message-strip-alert-container{flex-direction:column-reverse}.fd-message-strip-alert-overlay--bottom.fd-message-strip-alert-overlay--top-opened{max-height:50vh}.fd-message-strip-alert-overlay--start{left:0}.fd-message-strip-alert-overlay--middle{left:33.33vw;width:33.33vw}@media screen and (max-width:992px){.fd-message-strip-alert-overlay--middle{left:5vw;width:90vw;max-width:90vw}}.fd-message-strip-alert-overlay--middle fd-message-strip-alert-container{width:100%}.fd-message-strip-alert-overlay--middle fd-message-strip-alert-container>.fd-scrollbar>*{width:fit-content;margin:0 auto}.fd-message-strip-alert-overlay--end{right:0}.fd-message-strip-alert-overlay fd-message-strip-alert-container{display:flex;flex-direction:column}.fd-message-strip-alert-overlay fd-message-strip-alert-container div[fdscrollbar]{width:100%;display:flex;padding:.5rem;gap:.75rem;flex-direction:column;max-height:100%}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible"] }, { kind: "component", type: MessageStripAlertContainerFooterComponent, selector: "fd-message-strip-alert-container-footer", inputs: ["alertRefs"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MessageStripAlertContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fd-message-strip-alert-container', template: `
-        <div fdScrollbar>
-            @for (portal of attachedElements; track portal) {
-                <ng-template [cdkPortalOutlet]="portal"></ng-template>
-            }
-        </div>
-        <fd-message-strip-alert-container-footer
-            [alertRefs]="alertRefs$ | async"
-        ></fd-message-strip-alert-container-footer>
-    `, encapsulation: ViewEncapsulation.None, imports: [PortalModule, ScrollbarDirective, MessageStripAlertContainerFooterComponent, AsyncPipe], styles: [".fd-message-strip-alert-overlay{max-width:33.33vw;padding:.5rem}.fd-message-strip-alert-overlay--top{top:0;max-height:100vh}.fd-message-strip-alert-overlay--top.fd-message-strip-alert-overlay--bottom-opened{max-height:50vh}.fd-message-strip-alert-overlay--bottom{top:initial;bottom:0;max-height:100vh}.fd-message-strip-alert-overlay--bottom fd-message-strip-alert-container{flex-direction:column-reverse}.fd-message-strip-alert-overlay--bottom.fd-message-strip-alert-overlay--top-opened{max-height:50vh}.fd-message-strip-alert-overlay--start{left:0}.fd-message-strip-alert-overlay--middle{left:33.33vw;width:33.33vw}@media screen and (max-width:992px){.fd-message-strip-alert-overlay--middle{left:5vw;width:90vw;max-width:90vw}}.fd-message-strip-alert-overlay--middle fd-message-strip-alert-container{width:100%}.fd-message-strip-alert-overlay--middle fd-message-strip-alert-container>.fd-scrollbar>*{width:fit-content;margin:0 auto}.fd-message-strip-alert-overlay--end{right:0}.fd-message-strip-alert-overlay fd-message-strip-alert-container{display:flex;flex-direction:column}.fd-message-strip-alert-overlay fd-message-strip-alert-container div[fdscrollbar]{width:100%;display:flex;padding:.5rem;gap:.75rem;flex-direction:column;max-height:100%}\n"] }]
-        }], propDecorators: { portalOutlets: [{
-                type: ViewChildren,
-                args: [CdkPortalOutlet]
-            }], alerts: [{
-                type: ViewChildren,
-                args: [MessageStripAlertComponent]
-            }] } });
-
 /**
  * Service that is responsible for opening and closing message strip alerts.
  * This should be only created once in entire application.
@@ -635,8 +632,7 @@ class MessageStripAlertService {
                 topSectionIsOpened = topSectionIsOpened || position.startsWith('top');
                 bottomSectionIsOpened = bottomSectionIsOpened || position.startsWith('bottom');
                 const { containerRef } = this.getOverlayRef(position);
-                containerRef.instance.attachedElements = portals;
-                containerRef.changeDetectorRef.detectChanges();
+                containerRef.instance.attachedElements.set(portals);
             });
             this.syncExistingOverlays(messageAlertsByPosition, bottomSectionIsOpened, topSectionIsOpened);
         }))
@@ -645,12 +641,16 @@ class MessageStripAlertService {
     /** @hidden */
     syncExistingOverlays(messageAlertsByPosition, bottomSectionIsOpened, topSectionIsOpened) {
         Object.keys(this._overlayRefs).forEach((position) => {
+            const overlayRef = this._overlayRefs[position];
+            if (!overlayRef) {
+                return;
+            }
             if (!messageAlertsByPosition[position]) {
-                this._overlayRefs[position].ref.dispose();
+                overlayRef.ref.dispose();
                 delete this._overlayRefs[position];
             }
             else {
-                const ref = this._overlayRefs[position].ref;
+                const ref = overlayRef.ref;
                 if (position.startsWith('top')) {
                     if (bottomSectionIsOpened) {
                         ref.overlayElement.classList.add('fd-message-strip-alert-overlay--bottom-opened');
@@ -686,6 +686,7 @@ class MessageStripAlertService {
             })));
             this._overlayRefs[position] = { ref: overlayRef, containerRef };
         }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return this._overlayRefs[position];
     }
     /** @hidden */