@coreui/angular 4.7.7 → 4.7.10

package/fesm2022/coreui-angular.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, booleanAttribute, ContentChildren, HostListener, inject, RendererFactory2, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, DestroyRef, signal, effect, PLATFORM_ID, TemplateRef, ViewContainerRef, numberAttribute, Pipe, ChangeDetectionStrategy } from '@angular/core';
+import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, booleanAttribute, ContentChildren, HostListener, inject, RendererFactory2, PLATFORM_ID, Inject, DestroyRef, ViewChild, forwardRef, Optional, ElementRef, ContentChild, signal, effect, TemplateRef, ViewContainerRef, numberAttribute, Pipe, ChangeDetectionStrategy } from '@angular/core';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i3$1 from '@angular/common';
-import { NgTemplateOutlet, NgIf, NgClass, DOCUMENT, NgForOf, AsyncPipe, isPlatformBrowser, CommonModule, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+import { NgTemplateOutlet, NgIf, NgClass, DOCUMENT, NgForOf, AsyncPipe, isPlatformServer, isPlatformBrowser, CommonModule, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import * as i1 from '@angular/animations';
 import { animate, animation, style, useAnimation, state, transition, trigger, query, group } from '@angular/animations';
-import { Subject, BehaviorSubject, Observable, fromEvent, withLatestFrom, zipWith } from 'rxjs';
+import { Subject, BehaviorSubject, Observable, fromEvent } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { filter, debounceTime } from 'rxjs/operators';
+import { filter, finalize, withLatestFrom, zipWith, debounceTime } from 'rxjs/operators';
 import { createPopper } from '@popperjs/core';
 import * as i1$2 from '@angular/cdk/layout';
 import * as i3 from '@angular/cdk/a11y';
@@ -1083,7 +1083,8 @@ class BackdropService {
     get #scrollbarWidth() {
         // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
         const documentWidth = this.#document.documentElement.clientWidth;
-        const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
+        // const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
+        const scrollbarWidth = Math.abs((this.#document.defaultView?.innerWidth ?? documentWidth) - documentWidth);
         return `${scrollbarWidth}px`;
     }
     setBackdrop(type = 'modal') {
@@ -1762,34 +1763,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 
 class IntersectionService {
     constructor() {
-        this.intersecting = new BehaviorSubject(false);
-        this.intersecting$ = this.intersecting.asObservable();
+        this.platformId = inject(PLATFORM_ID);
+        this.#intersecting = new BehaviorSubject({ isIntersecting: false });
+        this.intersecting$ = this.#intersecting.asObservable();
         this.defaultObserverOptions = {
             root: null,
             rootMargin: '0px',
             threshold: 0.2
         };
+        this.hostElementRefs = new Map();
     }
+    #intersecting;
     createIntersectionObserver(hostElement, observerOptions = this.defaultObserverOptions) {
+        if (isPlatformServer(this.platformId)) {
+            this.#intersecting.next({ isIntersecting: true, hostElement });
+            return;
+        }
         const options = { ...this.defaultObserverOptions, ...observerOptions };
-        this.hostElement = hostElement;
         const handleIntersect = (entries, observer) => {
             entries.forEach((entry) => {
-                this.intersecting.next(entry.isIntersecting);
+                this.#intersecting.next({ isIntersecting: entry.isIntersecting, hostElement });
             });
         };
-        this.intersectionObserver = new IntersectionObserver(handleIntersect, options);
-        this.intersectionObserver.observe(hostElement.nativeElement);
+        this.hostElementRefs.set(hostElement, new IntersectionObserver(handleIntersect, options));
+        this.hostElementRefs.get(hostElement)?.observe(hostElement.nativeElement);
+    }
+    unobserve(elementRef) {
+        this.hostElementRefs.get(elementRef)?.unobserve(elementRef.nativeElement);
+        this.hostElementRefs.set(elementRef, null);
+        this.hostElementRefs.delete(elementRef);
     }
     ngOnDestroy() {
-        this.intersectionObserver?.unobserve(this.hostElement?.nativeElement);
+        this.hostElementRefs.forEach((observer, elementRef) => {
+            observer?.unobserve(elementRef.nativeElement);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IntersectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IntersectionService }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IntersectionService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IntersectionService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 class ListenersService {
     constructor(renderer) {
@@ -1830,6 +1847,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Renderer2 }] });
 
+class ClassToggleService {
+    constructor(document, rendererFactory) {
+        this.document = document;
+        this.rendererFactory = rendererFactory;
+        this.renderer = rendererFactory.createRenderer(null, null);
+    }
+    toggle(selector, className) {
+        const element = document.querySelector(selector);
+        if (element) {
+            element.classList.contains(className) ?
+                this.renderer.removeClass(element, className) :
+                this.renderer.addClass(element, className);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassToggleService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassToggleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassToggleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.RendererFactory2 }] });
+
 class CarouselService {
     constructor() {
         this.carouselIndex = new BehaviorSubject({});
@@ -1948,6 +1992,7 @@ class CarouselComponent {
             'carousel-fade': this.transition === 'crossfade'
         };
     }
+    #destroyRef;
     constructor(config, hostElement, carouselService, carouselState, intersectionService, listenersService) {
         this.config = config;
         this.hostElement = hostElement;
@@ -2005,6 +2050,7 @@ class CarouselComponent {
          */
         this.itemChange = new EventEmitter();
         this.activeItemInterval = 0;
+        this.#destroyRef = inject(DestroyRef);
         this._visible = true;
         Object.assign(this, config);
     }
@@ -2012,13 +2058,11 @@ class CarouselComponent {
         this.carouselStateSubscribe();
     }
     ngOnDestroy() {
+        this.resetTimer();
         this.clearListeners();
-        this.carouselStateSubscribe(false);
-        this.intersectionServiceSubscribe(false);
         this.swipeSubscribe(false);
     }
     ngAfterContentInit() {
-        this.intersectionService.createIntersectionObserver(this.hostElement);
         this.intersectionServiceSubscribe();
         this.carouselState.state = { activeItemIndex: this.activeIndex, animate: this.animate };
         this.setListeners();
@@ -2058,32 +2102,30 @@ class CarouselComponent {
     }
     resetTimer() {
         clearTimeout(this.timerId);
+        this.timerId = undefined;
     }
-    carouselStateSubscribe(subscribe = true) {
-        if (subscribe) {
-            this.carouselIndexSubscription = this.carouselService.carouselIndex$.subscribe((nextItem) => {
-                if ('active' in nextItem) {
-                    this.itemChange.emit(nextItem.active);
-                }
-                this.activeItemInterval = typeof nextItem.interval === 'number' && nextItem.interval > -1 ? nextItem.interval : this.interval;
-                const isLastItem = ((nextItem.active === nextItem.lastItemIndex) && this.direction === 'next') || ((nextItem.active === 0) && this.direction === 'prev');
-                !this.wrap && isLastItem ? this.resetTimer() : this.setTimer();
-            });
-        }
-        else {
-            this.carouselIndexSubscription?.unsubscribe();
-        }
+    carouselStateSubscribe() {
+        this.carouselService.carouselIndex$
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((nextItem) => {
+            if ('active' in nextItem) {
+                this.itemChange.emit(nextItem.active);
+            }
+            this.activeItemInterval = typeof nextItem.interval === 'number' && nextItem.interval > -1 ? nextItem.interval : this.interval;
+            const isLastItem = ((nextItem.active === nextItem.lastItemIndex) && this.direction === 'next') || ((nextItem.active === 0) && this.direction === 'prev');
+            !this.wrap && isLastItem ? this.resetTimer() : this.setTimer();
+        });
     }
-    intersectionServiceSubscribe(subscribe = true) {
-        if (subscribe) {
-            this.intersectingSubscription = this.intersectionService.intersecting$.subscribe(isIntersecting => {
-                this.visible = isIntersecting;
-                isIntersecting ? this.setTimer() : this.resetTimer();
-            });
-        }
-        else {
-            this.intersectingSubscription?.unsubscribe();
-        }
+    intersectionServiceSubscribe() {
+        this.intersectionService.intersecting$
+            .pipe(filter(next => next.hostElement === this.hostElement), finalize(() => {
+            this.intersectionService.unobserve(this.hostElement);
+        }), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(next => {
+            this.visible = next.isIntersecting;
+            next.isIntersecting ? this.setTimer() : this.resetTimer();
+        });
+        this.intersectionService.createIntersectionObserver(this.hostElement);
     }
     swipeSubscribe(subscribe = true) {
         if (this.touch && subscribe) {
@@ -2091,7 +2133,7 @@ class CarouselComponent {
             const touchStart$ = fromEvent(carouselElement, 'touchstart');
             const touchEnd$ = fromEvent(carouselElement, 'touchend');
             const touchMove$ = fromEvent(carouselElement, 'touchmove');
-            this.swipeSubscription = touchStart$.pipe(zipWith(touchEnd$.pipe(withLatestFrom(touchMove$))))
+            this.swipeSubscription = touchStart$.pipe(zipWith(touchEnd$.pipe(withLatestFrom(touchMove$))), takeUntilDestroyed(this.#destroyRef))
                 .subscribe(([touchstart, [touchend, touchmove]]) => {
                 touchstart.stopPropagation();
                 touchmove.stopPropagation();
@@ -2107,11 +2149,11 @@ class CarouselComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CarouselComponent, deps: [{ token: CarouselConfig }, { token: i0.ElementRef }, { token: CarouselService }, { token: CarouselState }, { token: IntersectionService }, { token: ListenersService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CarouselComponent, isStandalone: true, selector: "c-carousel", inputs: { activeIndex: "activeIndex", animate: "animate", dark: "dark", direction: "direction", interval: "interval", pause: "pause", touch: "touch", transition: "transition", wrap: "wrap" }, outputs: { itemChange: "itemChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [CarouselService, CarouselState, CarouselConfig, IntersectionService, ListenersService], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CarouselComponent, isStandalone: true, selector: "c-carousel", inputs: { activeIndex: "activeIndex", animate: "animate", dark: "dark", direction: "direction", interval: "interval", pause: "pause", touch: "touch", transition: "transition", wrap: "wrap" }, outputs: { itemChange: "itemChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [CarouselService, CarouselState, CarouselConfig, ListenersService], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel', template: '<ng-content></ng-content>', providers: [CarouselService, CarouselState, CarouselConfig, IntersectionService, ListenersService], standalone: true, styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-carousel', template: '<ng-content></ng-content>', providers: [CarouselService, CarouselState, CarouselConfig, ListenersService], standalone: true, styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: CarouselConfig, decorators: [{
                     type: Inject,
                     args: [CarouselConfig]
@@ -4720,7 +4762,7 @@ class NavbarComponent {
     }
     get breakpoint() {
         if (typeof this.expand === 'string') {
-            return getComputedStyle(this.hostElement.nativeElement).getPropertyValue(`--cui-breakpoint-${this.expand}`);
+            return getComputedStyle(this.hostElement.nativeElement)?.getPropertyValue(`--cui-breakpoint-${this.expand}`) ?? false;
         }
         return false;
     }
@@ -5617,7 +5659,7 @@ class OffcanvasComponent {
         }
         const element = this.document.documentElement;
         const responsiveBreakpoint = this.responsive;
-        const breakpointValue = getComputedStyle(element).getPropertyValue(`--cui-breakpoint-${responsiveBreakpoint.trim()}`) || false;
+        const breakpointValue = getComputedStyle(element)?.getPropertyValue(`--cui-breakpoint-${responsiveBreakpoint.trim()}`) ?? false;
         return breakpointValue ? `${parseFloat(breakpointValue.trim()) - 0.02}px` : false;
     }
     animateStart(event) {
@@ -5716,7 +5758,7 @@ class OffcanvasComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: OffcanvasComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OffcanvasService }, { token: BackdropService }, { token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.8", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: ["keyboard", "keyboard", booleanAttribute], placement: "placement", responsive: "responsive", id: "id", role: "role", ariaModal: ["ariaModal", "ariaModal", booleanAttribute], scroll: ["scroll", "scroll", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, exportAs: ["cOffcanvas"], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.8", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: ["keyboard", "keyboard", booleanAttribute], placement: "placement", responsive: "responsive", id: "id", role: "role", ariaModal: ["ariaModal", "ariaModal", booleanAttribute], scroll: ["scroll", "scroll", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, exportAs: ["cOffcanvas"], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
             trigger('showHide', [
                 state('visible', style({
                 // visibility: 'visible'
@@ -5740,7 +5782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                             })),
                             transition('visible <=> *', [animate('300ms')])
                         ])
-                    ], exportAs: 'cOffcanvas', standalone: true, imports: [A11yModule], template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"] }]
+                    ], exportAs: 'cOffcanvas', standalone: true, imports: [A11yModule], host: { ngSkipHydration: 'true' }, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -6268,33 +6310,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 args: ['class']
             }] } });
 
-class ClassToggleService {
-    constructor(document, rendererFactory) {
-        this.document = document;
-        this.rendererFactory = rendererFactory;
-        this.renderer = rendererFactory.createRenderer(null, null);
-    }
-    toggle(selector, className) {
-        const element = document.querySelector(selector);
-        if (element) {
-            element.classList.contains(className) ?
-                this.renderer.removeClass(element, className) :
-                this.renderer.addClass(element, className);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassToggleService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassToggleService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassToggleService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.RendererFactory2 }] });
-
 class PopoverDirective {
     /**
      * Optional popper Options object, takes precedence over cPopoverPlacement prop
@@ -6319,6 +6334,7 @@ class PopoverDirective {
     get ariaDescribedBy() {
         return this.popoverId ? this.popoverId : null;
     }
+    #destroyRef;
     constructor(document, renderer, hostElement, viewContainerRef, listenersService, changeDetectorRef, intersectionService) {
         this.document = document;
         this.renderer = renderer;
@@ -6352,9 +6368,9 @@ class PopoverDirective {
                 }
             ]
         };
+        this.#destroyRef = inject(DestroyRef);
     }
     ngAfterViewInit() {
-        this.intersectionService.createIntersectionObserver(this.hostElement);
         this.intersectionServiceSubscribe();
     }
     ngOnChanges(changes) {
@@ -6365,7 +6381,6 @@ class PopoverDirective {
     ngOnDestroy() {
         this.clearListeners();
         this.destroyPopoverElement();
-        this.intersectionServiceSubscribe(false);
     }
     ngOnInit() {
         this.setListeners();
@@ -6392,18 +6407,16 @@ class PopoverDirective {
     clearListeners() {
         this.listenersService.clearListeners();
     }
-    intersectionServiceSubscribe(subscribe = true) {
-        if (subscribe) {
-            this.intersectingSubscription = this.intersectionService.intersecting$
-                .pipe(debounceTime(100))
-                .subscribe(isIntersecting => {
-                this.visible = isIntersecting ? this.visible : false;
-                !this.visible && this.removePopoverElement();
-            });
-        }
-        else {
-            this.intersectingSubscription?.unsubscribe();
-        }
+    intersectionServiceSubscribe() {
+        this.intersectionService.createIntersectionObserver(this.hostElement);
+        this.intersectionService.intersecting$
+            .pipe(filter(next => next.hostElement === this.hostElement), debounceTime(100), finalize(() => {
+            this.intersectionService.unobserve(this.hostElement);
+        }), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(next => {
+            this.visible = next.isIntersecting ? this.visible : false;
+            !this.visible && this.removePopoverElement();
+        });
     }
     getUID(prefix) {
         let uid = prefix ?? 'random-id';
@@ -6467,18 +6480,18 @@ class PopoverDirective {
         this.popoverRef.instance.id = undefined;
         this.changeDetectorRef.markForCheck();
         setTimeout(() => {
-            this.viewContainerRef.detach();
+            this.viewContainerRef?.detach();
         }, 300);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverDirective, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: ListenersService }, { token: i0.ChangeDetectorRef }, { token: IntersectionService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: PopoverDirective, isStandalone: true, selector: "[cPopover]", inputs: { content: ["cPopover", "content"], popperOptions: ["cPopoverOptions", "popperOptions"], placement: ["cPopoverPlacement", "placement"], trigger: ["cPopoverTrigger", "trigger"], visible: ["cPopoverVisible", "visible"] }, host: { properties: { "attr.aria-describedby": "this.ariaDescribedBy" } }, providers: [ListenersService, IntersectionService], exportAs: ["cPopover"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: PopoverDirective, isStandalone: true, selector: "[cPopover]", inputs: { content: ["cPopover", "content"], popperOptions: ["cPopoverOptions", "popperOptions"], placement: ["cPopoverPlacement", "placement"], trigger: ["cPopoverTrigger", "trigger"], visible: ["cPopoverVisible", "visible"] }, host: { properties: { "attr.aria-describedby": "this.ariaDescribedBy" } }, providers: [ListenersService], exportAs: ["cPopover"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PopoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cPopover]',
                     exportAs: 'cPopover',
-                    providers: [ListenersService, IntersectionService],
+                    providers: [ListenersService],
                     standalone: true
                 }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
@@ -6908,7 +6921,7 @@ class SidebarComponent {
         }
         this.state = {
             ...this.state,
-            ...newState,
+            ...newState
         };
         this.state.mobile && this.state.visible
             ? this.backdropService.setBackdrop(this)
@@ -6919,9 +6932,8 @@ class SidebarComponent {
     }
     get getMobileBreakpoint() {
         const element = this.document.documentElement;
-        const mobileBreakpoint = getComputedStyle(element).getPropertyValue('--cui-mobile-breakpoint') ||
-            'md';
-        const breakpointValue = getComputedStyle(element).getPropertyValue(`--cui-breakpoint-${mobileBreakpoint.trim()}`) || '768px';
+        const mobileBreakpoint = this.document.defaultView?.getComputedStyle(element)?.getPropertyValue('--cui-mobile-breakpoint') ?? 'md';
+        const breakpointValue = this.document.defaultView?.getComputedStyle(element)?.getPropertyValue(`--cui-breakpoint-${mobileBreakpoint.trim()}`) ?? '768px';
         return `${parseFloat(breakpointValue.trim()) - 0.02}px` || '767.98px';
     }
     constructor(document, renderer, breakpointObserver, sidebarService, backdropService) {
@@ -6936,12 +6948,12 @@ class SidebarComponent {
         this.#visible = false;
         this.#onMobile = false;
         this.state = {
-            sidebar: this,
+            sidebar: this
         };
         this.#stateInitial = {
             narrow: false,
             visible: false,
-            unfoldable: false,
+            unfoldable: false
         };
         /**
          * Place sidebar in non-static positions. [docs]
@@ -6965,7 +6977,7 @@ class SidebarComponent {
             'sidebar-overlaid': this.overlaid,
             [`sidebar-${this.size}`]: !!this.size,
             show: visible && this.#onMobile,
-            hide: !visible,
+            hide: !visible
         };
     }
     ngOnInit() {
@@ -7001,11 +7013,11 @@ class SidebarComponent {
         this.#stateInitial = {
             narrow: this.narrow,
             visible: this.visible,
-            unfoldable: this.unfoldable,
+            unfoldable: this.unfoldable
         };
         this.sidebarService.toggle({
             ...this.#stateInitial,
-            sidebar: this,
+            sidebar: this
         });
     }
     stateToggleSubscribe(subscribe = true) {
@@ -7034,7 +7046,7 @@ class SidebarComponent {
                         mobile: isOnMobile,
                         unfoldable: isUnfoldable,
                         visible: isOnMobile ? !isOnMobile : this.#stateInitial.visible,
-                        sidebar: this,
+                        sidebar: this
                     });
                 }
             });
@@ -8413,7 +8425,7 @@ class ToastComponent {
         this._visible = false;
         /**
          * Event emitted on visibility change. [docs]
-         * @type boolean
+         * @type EventEmitter<boolean>
          */
         this.visibleChange = new EventEmitter();
         /**
@@ -8483,14 +8495,14 @@ class ToastComponent {
     setTimer() {
         this.clearTimer();
         if (this.autohide && this.visible) {
-            this.timerId = this.delay > 0 ? setTimeout(() => this.onClose(), this.delay) : null;
+            this.timerId = this.delay > 0 ? setTimeout(() => this.onClose(), this.delay) : undefined;
             this.setClock();
         }
     }
     clearTimer() {
         this.clearClock();
         clearTimeout(this.timerId);
-        this.timerId = null;
+        this.timerId = undefined;
     }
     onClose() {
         this.clearTimer();
@@ -8514,7 +8526,7 @@ class ToastComponent {
     clearClock() {
         clearTimeout(this.clockTimerId);
         clearInterval(this.clockId);
-        this.clockId = null;
+        this.clockId = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ToasterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ToastComponent, isStandalone: true, selector: "c-toast", inputs: { autohide: "autohide", color: "color", delay: "delay", fade: "fade", visible: "visible", index: "index" }, outputs: { visibleChange: "visibleChange", timer: "timer" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" }, properties: { "@.disabled": "this.animationDisabled", "@fadeInOut": "this.animateType", "class": "this.hostClasses" } }, exportAs: ["cToast"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;overflow:hidden}\n"], animations: [
@@ -8946,6 +8958,7 @@ class TooltipDirective {
     get ariaDescribedBy() {
         return this.tooltipId ? this.tooltipId : null;
     }
+    #destroyRef;
     constructor(document, renderer, hostElement, viewContainerRef, listenersService, changeDetectorRef, intersectionService) {
         this.document = document;
         this.renderer = renderer;
@@ -8979,9 +8992,9 @@ class TooltipDirective {
                 }
             ]
         };
+        this.#destroyRef = inject(DestroyRef);
     }
     ngAfterViewInit() {
-        this.intersectionService.createIntersectionObserver(this.hostElement);
         this.intersectionServiceSubscribe();
     }
     ngOnChanges(changes) {
@@ -8992,7 +9005,6 @@ class TooltipDirective {
     ngOnDestroy() {
         this.clearListeners();
         this.destroyTooltipElement();
-        this.intersectionServiceSubscribe(false);
     }
     ngOnInit() {
         this.setListeners();
@@ -9019,18 +9031,16 @@ class TooltipDirective {
     clearListeners() {
         this.listenersService.clearListeners();
     }
-    intersectionServiceSubscribe(subscribe = true) {
-        if (subscribe) {
-            this.intersectingSubscription = this.intersectionService.intersecting$
-                .pipe(debounceTime(100))
-                .subscribe(isIntersecting => {
-                this.visible = isIntersecting ? this.visible : false;
-                !this.visible && this.removeTooltipElement();
-            });
-        }
-        else {
-            this.intersectingSubscription?.unsubscribe();
-        }
+    intersectionServiceSubscribe() {
+        this.intersectionService.createIntersectionObserver(this.hostElement);
+        this.intersectionService.intersecting$
+            .pipe(filter(next => next.hostElement === this.hostElement), debounceTime(100), finalize(() => {
+            this.intersectionService.unobserve(this.hostElement);
+        }), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(next => {
+            this.visible = next.isIntersecting ? this.visible : false;
+            !this.visible && this.removeTooltipElement();
+        });
     }
     getUID(prefix) {
         let uid = prefix ?? 'random-id';
@@ -9729,5 +9739,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
+export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarNavHelper, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
 //# sourceMappingURL=coreui-angular.mjs.map