@coreui/angular 4.7.7 → 4.7.8

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, DestroyRef, Inject, 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') {
@@ -1760,37 +1761,6 @@ 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.defaultObserverOptions = {
-            root: null,
-            rootMargin: '0px',
-            threshold: 0.2
-        };
-    }
-    createIntersectionObserver(hostElement, observerOptions = this.defaultObserverOptions) {
-        const options = { ...this.defaultObserverOptions, ...observerOptions };
-        this.hostElement = hostElement;
-        const handleIntersect = (entries, observer) => {
-            entries.forEach((entry) => {
-                this.intersecting.next(entry.isIntersecting);
-            });
-        };
-        this.intersectionObserver = new IntersectionObserver(handleIntersect, options);
-        this.intersectionObserver.observe(hostElement.nativeElement);
-    }
-    ngOnDestroy() {
-        this.intersectionObserver?.unobserve(this.hostElement?.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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IntersectionService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 class ListenersService {
     constructor(renderer) {
         this.renderer = renderer;
@@ -1939,6 +1909,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             type: Injectable
         }] });
 
+class IntersectionService {
+    constructor() {
+        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 };
+        const handleIntersect = (entries, observer) => {
+            entries.forEach((entry) => {
+                this.#intersecting.next({ isIntersecting: entry.isIntersecting, hostElement });
+            });
+        };
+        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.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, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IntersectionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class CarouselComponent {
     get hostClasses() {
         return {
@@ -1948,6 +1965,7 @@ class CarouselComponent {
             'carousel-fade': this.transition === 'crossfade'
         };
     }
+    #destroyRef;
     constructor(config, hostElement, carouselService, carouselState, intersectionService, listenersService) {
         this.config = config;
         this.hostElement = hostElement;
@@ -2004,7 +2022,9 @@ class CarouselComponent {
          * @type number
          */
         this.itemChange = new EventEmitter();
+        this.timerId = undefined;
         this.activeItemInterval = 0;
+        this.#destroyRef = inject(DestroyRef);
         this._visible = true;
         Object.assign(this, config);
     }
@@ -2012,13 +2032,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 +2076,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 +2107,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 +2123,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 +4736,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 +5633,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 +5732,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 +5756,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]
@@ -6319,6 +6335,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 +6369,9 @@ class PopoverDirective {
                 }
             ]
         };
+        this.#destroyRef = inject(DestroyRef);
     }
     ngAfterViewInit() {
-        this.intersectionService.createIntersectionObserver(this.hostElement);
         this.intersectionServiceSubscribe();
     }
     ngOnChanges(changes) {
@@ -6365,7 +6382,6 @@ class PopoverDirective {
     ngOnDestroy() {
         this.clearListeners();
         this.destroyPopoverElement();
-        this.intersectionServiceSubscribe(false);
     }
     ngOnInit() {
         this.setListeners();
@@ -6392,18 +6408,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 +6481,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 +6922,7 @@ class SidebarComponent {
         }
         this.state = {
             ...this.state,
-            ...newState,
+            ...newState
         };
         this.state.mobile && this.state.visible
             ? this.backdropService.setBackdrop(this)
@@ -6919,9 +6933,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 +6949,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 +6978,7 @@ class SidebarComponent {
             'sidebar-overlaid': this.overlaid,
             [`sidebar-${this.size}`]: !!this.size,
             show: visible && this.#onMobile,
-            hide: !visible,
+            hide: !visible
         };
     }
     ngOnInit() {
@@ -7001,11 +7014,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 +7047,7 @@ class SidebarComponent {
                         mobile: isOnMobile,
                         unfoldable: isUnfoldable,
                         visible: isOnMobile ? !isOnMobile : this.#stateInitial.visible,
-                        sidebar: this,
+                        sidebar: this
                     });
                 }
             });
@@ -8946,6 +8959,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 +8993,9 @@ class TooltipDirective {
                 }
             ]
         };
+        this.#destroyRef = inject(DestroyRef);
     }
     ngAfterViewInit() {
-        this.intersectionService.createIntersectionObserver(this.hostElement);
         this.intersectionServiceSubscribe();
     }
     ngOnChanges(changes) {
@@ -8992,7 +9006,6 @@ class TooltipDirective {
     ngOnDestroy() {
         this.clearListeners();
         this.destroyTooltipElement();
-        this.intersectionServiceSubscribe(false);
     }
     ngOnInit() {
         this.setListeners();
@@ -9019,18 +9032,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';