@coreui/angular-pro 4.7.7 → 4.7.9

package/fesm2022/coreui-angular-pro.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, Pipe, ViewChildren, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, DestroyRef, ChangeDetectionStrategy, signal, computed, NgZone, numberAttribute, effect, PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, booleanAttribute, ContentChildren, HostListener, inject, RendererFactory2, Pipe, ViewChildren, PLATFORM_ID, DestroyRef, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, ChangeDetectionStrategy, signal, computed, NgZone, numberAttribute, effect, TemplateRef, ViewContainerRef } from '@angular/core';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1$2 from '@angular/common';
-import { NgTemplateOutlet, NgIf, NgClass, DOCUMENT, NgForOf, AsyncPipe, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, CommonModule, formatDate, I18nPluralPipe, isPlatformBrowser } from '@angular/common';
+import { NgTemplateOutlet, NgIf, NgClass, DOCUMENT, NgForOf, AsyncPipe, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, isPlatformServer, CommonModule, formatDate, I18nPluralPipe, isPlatformBrowser } 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, skip, distinctUntilChanged as distinctUntilChanged$1, map as map$1, debounceTime as debounceTime$1 } from 'rxjs';
+import { Subject, BehaviorSubject, Observable, fromEvent, skip, distinctUntilChanged as distinctUntilChanged$1, map as map$1, debounceTime as debounceTime$1 } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { filter, tap, distinctUntilChanged, debounceTime, map, delay, combineLatestWith, take } from 'rxjs/operators';
+import { filter, finalize, withLatestFrom, zipWith, tap, distinctUntilChanged, debounceTime, map, delay, combineLatestWith, take } from 'rxjs/operators';
 import * as i1$3 from '@angular/forms';
 import { Validators, FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { createPopper } from '@popperjs/core';
@@ -1087,7 +1087,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') {
@@ -3162,37 +3163,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;
@@ -3341,6 +3311,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 {
@@ -3350,6 +3367,7 @@ class CarouselComponent {
             'carousel-fade': this.transition === 'crossfade'
         };
     }
+    #destroyRef;
     constructor(config, hostElement, carouselService, carouselState, intersectionService, listenersService) {
         this.config = config;
         this.hostElement = hostElement;
@@ -3406,7 +3424,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);
     }
@@ -3414,13 +3434,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();
@@ -3460,32 +3478,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.createIntersectionObserver(this.hostElement);
+        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();
+        });
     }
     swipeSubscribe(subscribe = true) {
         if (this.touch && subscribe) {
@@ -3493,7 +3509,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();
@@ -3509,11 +3525,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]
@@ -7114,7 +7130,7 @@ class DateRangePickerComponent {
         this.endDate = time ?? this.endDate;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DateRangePickerComponent, isStandalone: true, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: "calendars", cleaner: "cleaner", closeOnSelect: "closeOnSelect", format: "format", indicator: "indicator", inputReadOnly: "inputReadOnly", navYearFirst: "navYearFirst", placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: "separator", size: "size", timepicker: "timepicker", valid: "valid", visible: "visible", startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", range: "range", dateFilter: "dateFilter", disabled: "disabled", value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"], selectAdjacentDays: "selectAdjacentDays", showAdjacentDays: "showAdjacentDays" }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DateRangePickerComponent, isStandalone: true, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: "calendars", cleaner: "cleaner", closeOnSelect: "closeOnSelect", format: "format", indicator: "indicator", inputReadOnly: "inputReadOnly", navYearFirst: "navYearFirst", placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: "separator", size: "size", timepicker: "timepicker", valid: "valid", visible: "visible", startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", range: "range", dateFilter: "dateFilter", disabled: "disabled", value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"], selectAdjacentDays: "selectAdjacentDays", showAdjacentDays: "showAdjacentDays" }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class": "this.datePickerClasses" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangePickerComponent),
@@ -7239,7 +7255,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 args: [TemplateIdDirective, { descendants: true }]
             }], onBlur: [{
                 type: HostListener,
-                args: ['blur']
+                args: ['focusout']
+            }], datePickerClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class DateRangePickerModule {
@@ -8982,10 +9001,10 @@ const observeReferenceModifier = {
             instance.update();
         });
         // @ts-ignore
-        reference[RO_PROP].observe(reference);
+        reference[RO_PROP]?.observe(reference);
         return () => {
             // @ts-ignore
-            reference[RO_PROP].disconnect();
+            reference[RO_PROP]?.disconnect();
             // @ts-ignore
             delete reference[RO_PROP];
         };
@@ -9913,8 +9932,8 @@ class MultiSelectComponent {
                 this.scrollViewport = scrollViewport;
                 const cdkVirtualScrollContentWrapper = this.scrollViewport.getElementRef().nativeElement?.firstElementChild;
                 if (cdkVirtualScrollContentWrapper) {
-                    const style = getComputedStyle(cdkVirtualScrollContentWrapper, null);
-                    const padding = parseInt(style.getPropertyValue('padding-left') ?? '12px') * 3;
+                    const style = getComputedStyle(cdkVirtualScrollContentWrapper, null) ?? undefined;
+                    const padding = parseInt(style?.getPropertyValue('padding-left') ?? '12px') * 3;
                     const observer = new MutationObserver((mutationRecords) => {
                         mutationRecords.forEach(child => {
                             child.addedNodes.forEach(node => {
@@ -9927,9 +9946,9 @@ class MultiSelectComponent {
                             });
                         });
                     });
-                    observer.observe(cdkVirtualScrollContentWrapper, { childList: true });
+                    observer?.observe(cdkVirtualScrollContentWrapper, { childList: true });
                     this.#destroy$.subscribe(() => {
-                        observer.disconnect();
+                        observer?.disconnect();
                     });
                 }
             }
@@ -10355,7 +10374,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;
     }
@@ -11252,7 +11271,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) {
@@ -11351,7 +11370,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$4.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: i1$5.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: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
             trigger('showHide', [
                 state('visible', style({
                 // visibility: 'visible'
@@ -11375,7 +11394,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]
@@ -11954,6 +11973,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;
@@ -11987,9 +12007,9 @@ class PopoverDirective {
                 }
             ]
         };
+        this.#destroyRef = inject(DestroyRef);
     }
     ngAfterViewInit() {
-        this.intersectionService.createIntersectionObserver(this.hostElement);
         this.intersectionServiceSubscribe();
     }
     ngOnChanges(changes) {
@@ -12000,7 +12020,6 @@ class PopoverDirective {
     ngOnDestroy() {
         this.clearListeners();
         this.destroyPopoverElement();
-        this.intersectionServiceSubscribe(false);
     }
     ngOnInit() {
         this.setListeners();
@@ -12027,18 +12046,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';
@@ -12102,18 +12119,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: [{
@@ -12479,7 +12496,7 @@ class SidebarComponent {
         }
         this.state = {
             ...this.state,
-            ...newState,
+            ...newState
         };
         this.state.mobile && this.state.visible
             ? this.backdropService.setBackdrop(this)
@@ -12490,9 +12507,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) {
@@ -12507,12 +12523,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]
@@ -12538,7 +12554,7 @@ class SidebarComponent {
             [`sidebar-${this.colorScheme}`]: !!this.colorScheme,
             [`sidebar-${this.size}`]: !!this.size,
             show: visible && this.#onMobile,
-            hide: !visible,
+            hide: !visible
         };
     }
     ngOnInit() {
@@ -12574,11 +12590,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) {
@@ -12607,7 +12623,7 @@ class SidebarComponent {
                         mobile: isOnMobile,
                         unfoldable: isUnfoldable,
                         visible: isOnMobile ? !isOnMobile : this.#stateInitial.visible,
-                        sidebar: this,
+                        sidebar: this
                     });
                 }
             });
@@ -15948,6 +15964,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;
@@ -15981,9 +15998,9 @@ class TooltipDirective {
                 }
             ]
         };
+        this.#destroyRef = inject(DestroyRef);
     }
     ngAfterViewInit() {
-        this.intersectionService.createIntersectionObserver(this.hostElement);
         this.intersectionServiceSubscribe();
     }
     ngOnChanges(changes) {
@@ -15994,7 +16011,6 @@ class TooltipDirective {
     ngOnDestroy() {
         this.clearListeners();
         this.destroyTooltipElement();
-        this.intersectionServiceSubscribe(false);
     }
     ngOnInit() {
         this.setListeners();
@@ -16021,18 +16037,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';