@coreui/angular 5.7.37 → 5.7.40

package/fesm2022/coreui-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, DOCUMENT, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, Injector, Input, MAX_ANIMATION_TIMEOUT, NgModule, NgZone, PLATFORM_ID, Pipe, Renderer2, RendererFactory2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterEveryRender, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, effect, forwardRef, inject, input, linkedSignal, model, numberAttribute, output, runInInjectionContext, signal, untracked, viewChild } from "@angular/core";
+import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, DOCUMENT, DestroyRef, Directive, ElementRef, HostAttributeToken, HostBinding, HostListener, Injectable, Injector, Input, MAX_ANIMATION_TIMEOUT, NgModule, NgZone, PLATFORM_ID, Pipe, Renderer2, RendererFactory2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterEveryRender, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, effect, forwardRef, inject, input, linkedSignal, model, numberAttribute, output, runInInjectionContext, signal, untracked, viewChild } from "@angular/core";
 import { DOCUMENT as DOCUMENT$1, NgTemplateOutlet, isPlatformBrowser, isPlatformServer } from "@angular/common";
 import { BehaviorSubject, EMPTY, Subject, fromEvent, merge, skipWhile, take, takeWhile } from "rxjs";
 import * as i1$1 from "@angular/router";
@@ -8,7 +8,7 @@ import { takeUntilDestroyed, toObservable, toSignal } from "@angular/core/rxjs-i
 import { debounceTime, filter, finalize, map, switchMap, take as take$1, tap } from "rxjs/operators";
 import { NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgModel } from "@angular/forms";
 import * as i1 from "@angular/cdk/a11y";
-import { A11yModule, CdkTrapFocus, FocusKeyManager, FocusMonitor } from "@angular/cdk/a11y";
+import { A11yModule, CdkTrapFocus, FocusKeyManager, FocusMonitor, addAriaReferencedId, getAriaReferenceIds, removeAriaReferencedId } from "@angular/cdk/a11y";
 import { createPopper } from "@popperjs/core";
 import { BreakpointObserver } from "@angular/cdk/layout";
 import { DomPortal, DomPortalOutlet } from "@angular/cdk/portal";
@@ -2703,67 +2703,74 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
+const afterTransitions = async (element) => {
+	const running = () => element.getAnimations?.().filter((animation) => "transitionProperty" in animation) ?? [];
+	for (let transitions = running(); transitions.length;) transitions = (await Promise.allSettled(transitions.map((transition) => transition.finished))).some(({ status }) => status === "rejected") ? running() : [];
+};
 var BackdropService = class BackdropService {
 	#backdropClick = new Subject();
 	backdropClick$ = this.#backdropClick.asObservable();
 	#document = inject(DOCUMENT);
 	activeBackdrop;
-	#clearBackdropId;
-	#pendingBackdrop;
+	#backdrops = /* @__PURE__ */ new Map();
+	#clickHandler = () => this.onClickHandler();
 	get #scrollbarWidth() {
 		const documentWidth = this.#document.documentElement.clientWidth;
 		return `${Math.abs((this.#document.defaultView?.innerWidth ?? documentWidth) - documentWidth)}px`;
 	}
 	scrollbarWidth = this.#scrollbarWidth;
-	setBackdrop(type = "modal") {
-		this.#flushClearBackdrop();
-		const backdropElement = this.#document.createElement("div");
-		backdropElement.classList.add(`${type}-backdrop`);
-		backdropElement.classList.add("fade");
-		this.#document.body.appendChild(backdropElement);
-		const clickHandler = () => {
-			this.onClickHandler();
+	setBackdrop(type = "modal", fade = true) {
+		const existing = this.#backdrops.get(type);
+		const backdrop = existing?.element.isConnected ? existing : this.#createBackdrop(type);
+		const fading = backdrop.fading;
+		backdrop.users++;
+		backdrop.element.classList.toggle("fade", fade);
+		if (fading) {
+			backdrop.fading = void 0;
+			backdrop.element.addEventListener("click", this.#clickHandler);
+		}
+		if (fading && backdrop.shown || !fade) this.#show(backdrop);
+		this.activeBackdrop = backdrop.element;
+		return backdrop.element;
+	}
+	clearBackdrop(backdropElement) {
+		const backdrop = [...this.#backdrops.values()].find(({ element }) => element === backdropElement);
+		if (backdrop?.users && --backdrop.users === 0) this.#fadeOut(backdrop);
+	}
+	#createBackdrop(type) {
+		const element = this.#document.createElement("div");
+		const backdrop = {
+			type,
+			element,
+			users: 0
 		};
-		backdropElement.__backdropClickHandler = clickHandler;
-		backdropElement.addEventListener("click", clickHandler);
-		this.scrollbarWidth = this.#scrollbarWidth;
+		element.classList.add(`${type}-backdrop`);
+		this.#document.body.appendChild(element);
+		element.addEventListener("click", this.#clickHandler);
+		this.#backdrops.set(type, backdrop);
 		setTimeout(() => {
-			backdropElement.classList.add("show");
+			if (backdrop.users && !backdrop.fading) this.#show(backdrop);
 		});
-		this.activeBackdrop = backdropElement;
-		return backdropElement;
+		return backdrop;
 	}
-	clearBackdrop(backdropElement) {
-		if (backdropElement) {
-			const storedHandler = backdropElement.__backdropClickHandler;
-			if (storedHandler) {
-				backdropElement.removeEventListener("click", storedHandler);
-				delete backdropElement.__backdropClickHandler;
-			}
-			backdropElement.classList.remove("show");
-			this.#flushClearBackdrop();
-			this.#pendingBackdrop = backdropElement;
-			this.#clearBackdropId = setTimeout(() => {
-				this.#clearBackdropId = void 0;
-				this.#pendingBackdrop = void 0;
-				if (this.activeBackdrop === backdropElement) {
-					this.resetScrollbar();
-					this.activeBackdrop = void 0;
-				}
-				this.#removeBackdrop(backdropElement);
-			}, 300);
-		}
+	#show(backdrop) {
+		backdrop.element.classList.add("show");
+		backdrop.shown = true;
 	}
-	#flushClearBackdrop() {
-		if (this.#clearBackdropId === void 0) return;
-		clearTimeout(this.#clearBackdropId);
-		this.#clearBackdropId = void 0;
-		const pending = this.#pendingBackdrop;
-		this.#pendingBackdrop = void 0;
-		if (pending) this.#removeBackdrop(pending);
-	}
-	#removeBackdrop(backdropElement) {
-		if (backdropElement.parentElement === this.#document.body) this.#document.body.removeChild(backdropElement);
+	#fadeOut(backdrop) {
+		const fading = {};
+		backdrop.fading = fading;
+		backdrop.element.removeEventListener("click", this.#clickHandler);
+		queueMicrotask(() => {
+			if (backdrop.fading !== fading) return;
+			backdrop.element.classList.remove("show");
+			afterTransitions(backdrop.element).then(() => {
+				if (backdrop.fading !== fading) return;
+				if (this.#backdrops.get(backdrop.type) === backdrop) this.#backdrops.delete(backdrop.type);
+				backdrop.element.remove();
+				if (this.activeBackdrop === backdrop.element) this.activeBackdrop = void 0;
+			});
+		});
 	}
 	get #isRTL() {
 		return [this.#document.documentElement.dir, this.#document.body.dir].includes("rtl");
@@ -2771,18 +2778,29 @@ var BackdropService = class BackdropService {
 	get #padding() {
 		return `padding-${this.#isRTL ? "left" : "right"}`;
 	}
-	#scrollBarVisible = true;
-	hideScrollbar() {
-		if (this.#scrollBarVisible) {
+	#scrollLockOwners = /* @__PURE__ */ new Set();
+	#lockedPadding = "";
+	lockScroll(owner) {
+		if (this.#scrollLockOwners.has(owner)) return;
+		this.#scrollLockOwners.add(owner);
+		if (this.#scrollLockOwners.size === 1) {
+			this.scrollbarWidth = this.#scrollbarWidth;
+			this.#lockedPadding = this.#padding;
 			this.#document.body.style.setProperty("overflow", "hidden");
-			this.#document.body.style.setProperty(this.#padding, this.scrollbarWidth);
-			this.#scrollBarVisible = false;
+			this.#document.body.style.setProperty(this.#lockedPadding, this.scrollbarWidth);
+		}
+	}
+	unlockScroll(owner) {
+		if (this.#scrollLockOwners.delete(owner) && this.#scrollLockOwners.size === 0) {
+			this.#document.body.style.removeProperty("overflow");
+			this.#document.body.style.removeProperty(this.#lockedPadding);
 		}
 	}
+	hideScrollbar() {
+		this.lockScroll(this);
+	}
 	resetScrollbar() {
-		this.#document.body.style.removeProperty("overflow");
-		this.#document.body.style.removeProperty(this.#padding);
-		this.#scrollBarVisible = true;
+		this.unlockScroll(this);
 	}
 	onClickHandler() {
 		this.#backdropClick.next(true);
@@ -4519,11 +4537,15 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var UIDService = class UIDService {
 	#document = inject(DOCUMENT);
+	#infix = Math.floor(Math.random() * 36 ** 5).toString(36).padStart(5, "0");
+	#counters = /* @__PURE__ */ new Map();
 	getUID(prefix = "random-id") {
-		let uid = prefix;
-		do
-			uid = `${prefix}-${Math.floor(Math.random() * 1e6).toString(10)}`;
-		while (this.#document.getElementById(uid));
+		let uid;
+		do {
+			const count = (this.#counters.get(prefix) ?? 0) + 1;
+			this.#counters.set(prefix, count);
+			uid = `${prefix}-${this.#infix}-${count}`;
+		} while (this.#document.getElementById(uid));
 		return uid;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -8029,6 +8051,17 @@ const isEditableTarget$1 = (target) => {
 };
 const clicksOnEnter = (element) => element instanceof HTMLButtonElement || element instanceof HTMLInputElement && /^(button|image|reset|submit)$/.test(element.type) || element instanceof HTMLAnchorElement && element.hasAttribute("href") || element.tagName === "SUMMARY";
 const clicksOnSpace = (element) => element instanceof HTMLButtonElement || element instanceof HTMLInputElement && /^(button|checkbox|image|radio|reset|submit)$/.test(element.type) || element.tagName === "SUMMARY";
+const restoreFocus = (overlay, candidates, focus = (target) => target.focus({ preventScroll: true })) => {
+	const document = overlay.ownerDocument;
+	const held = overlay.getRootNode().activeElement;
+	const active = document.activeElement;
+	if (!(held && overlay.contains(held)) && active && active !== document.body) return false;
+	for (const target of candidates) if (target?.isConnected && !overlay.contains(target)) {
+		focus(target);
+		if (target.getRootNode().activeElement === target) return true;
+	}
+	return false;
+};
 var DropdownMenuDirective = class DropdownMenuDirective {
 	#destroyRef = inject(DestroyRef);
 	#injector = inject(Injector);
@@ -8209,7 +8242,10 @@ const alignmentClasses = (alignment) => {
 	return Object.fromEntries(Object.entries(alignment).map(([breakpoint, direction]) => [`dropdown-menu${breakpoint === BreakpointInfix.xs ? "" : `-${breakpoint}`}-${direction}`, true]));
 };
 const FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
+const FORM_TAG = /^(form|input|option|select|textarea)$/;
+const TEXT_INPUT_TYPE = /^(email|number|password|search|tel|text|url)$/;
 var DropdownToken = class {};
+var DropdownFocusReturn = class {};
 var DropdownToggleDirective = class DropdownToggleDirective {
 	elementRef = inject(ElementRef);
 	#renderer = inject(Renderer2);
@@ -8248,6 +8284,10 @@ var DropdownToggleDirective = class DropdownToggleDirective {
 	}
 	onKeyDown($event) {
 		if (this.disabled() || isReplayedEvent($event) || isEditableTarget$1($event.target)) return;
+		if ($event.repeat && $event.key === "Enter") {
+			$event.preventDefault();
+			return;
+		}
 		const element = this.elementRef.nativeElement;
 		if ($event.target === element && element.tagName === "A" && ($event.key === " " || $event.key === "Enter" && !clicksOnEnter(element))) {
 			$event.preventDefault();
@@ -8398,6 +8438,10 @@ var DropdownComponent = class DropdownComponent {
 	#destroyRef = inject(DestroyRef);
 	#document = inject(DOCUMENT);
 	#elementRef = inject(ElementRef);
+	#focusReturn = inject(DropdownFocusReturn, {
+		host: true,
+		optional: true
+	});
 	#injector = inject(Injector);
 	#renderer = inject(Renderer2);
 	#rtlService = inject(RtlService);
@@ -8465,10 +8509,12 @@ var DropdownComponent = class DropdownComponent {
 	#visibleEffect = effect(() => {
 		const visible = this.visible();
 		untracked(() => {
+			const closed = this.activeTrap && !visible;
 			this.activeTrap = visible;
 			visible ? this.createPopperInstance() : this.destroyPopperInstance();
 			this.setVisibleState(visible);
 			this.visibleChange?.emit(visible);
+			if (closed) afterNextRender(() => this.#returnFocus(false), { injector: this.#injector });
 		});
 	}, ...ngDevMode ? [{ debugName: "#visibleEffect" }] : /* istanbul ignore next */ []);
 	visibleChange = output();
@@ -8483,6 +8529,7 @@ var DropdownComponent = class DropdownComponent {
 	activeTrap = false;
 	popperInstance;
 	listeners = [];
+	#menuInteraction;
 	hostClasses = computed(() => {
 		const direction = this.direction();
 		const variant = this.variant();
@@ -8497,10 +8544,6 @@ var DropdownComponent = class DropdownComponent {
 	hostStyle = computed(() => {
 		return this.variant() === "input-group" ? { display: "contents" } : {};
 	}, ...ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []);
-	clickedTarget;
-	onHostClick($event) {
-		this.clickedTarget = $event.target;
-	}
 	dropdownStateSubscribe() {
 		this.dropdownService.dropdownState$.pipe(filter((state) => {
 			return this === state.dropdown;
@@ -8553,39 +8596,44 @@ var DropdownComponent = class DropdownComponent {
 		this.#changeDetectorRef.markForCheck();
 	}
 	setListeners() {
+		this.#menuInteraction = void 0;
+		const menu = this._menuElementRef()?.nativeElement;
+		if (menu) this.#ngZone.runOutsideAngular(() => {
+			for (const type of [
+				"focusin",
+				"keydown",
+				"pointerdown"
+			]) this.listeners.push(this.#renderer.listen(menu, type, this.#trackMenuInteraction, { capture: true }));
+		});
 		this.listeners.push(this.#renderer.listen(this.#document, "click", (event) => {
-			const target = event.target;
-			if (this._menuElementRef()?.nativeElement.contains(event.target)) this.clickedTarget = target;
-			if (this.#togglerElement()?.contains(event.target)) return;
+			const part = this.#eventPart(event);
+			if (part === "toggler" || part === "menu" && this.#isFormInteraction(event)) return;
 			const autoClose = this.autoClose();
-			if (autoClose === true) {
-				this.setVisibleState(false);
-				return;
-			}
-			if (this.clickedTarget === target && autoClose === "inside") {
-				this.setVisibleState(false);
-				return;
-			}
-			if (this.clickedTarget !== target && autoClose === "outside") {
-				this.setVisibleState(false);
-				return;
-			}
+			if (autoClose === true || autoClose === "inside" && part === "menu" || autoClose === "outside" && part !== "menu") this.setVisibleState(false);
 		}));
 		this.listeners.push(this.#renderer.listen(this.#elementRef.nativeElement, "keydown", this.#onEscape));
 		const toggler = this.#togglerElement();
 		if (toggler && !this.#elementRef.nativeElement.contains(toggler)) this.listeners.push(this.#renderer.listen(toggler, "keydown", this.#onEscape));
 		this.listeners.push(this.#renderer.listen(this.#document, "keyup", (event) => {
-			const path = event.composedPath();
-			const toggler = this.#togglerElement();
-			if (event.key === "Tab" && this.autoClose() !== false && !path.includes(this.#elementRef.nativeElement) && !(toggler && path.includes(toggler))) this.setVisibleState(false);
+			if (event.key === "Tab" && this.autoClose() !== false && !this.#eventPart(event)) this.setVisibleState(false);
 		}));
 	}
 	#onEscape = (event) => {
 		if (event.key !== "Escape" || event.defaultPrevented || this.autoClose() === false) return;
 		event.preventDefault();
-		const focusInMenu = this._menuElementRef()?.nativeElement.contains(event.target);
 		this.setVisibleState(false);
-		if (focusInMenu) this.#focusToggler();
+		this.#returnFocus(true);
+	};
+	#trackMenuInteraction = (event) => {
+		switch (event.type) {
+			case "pointerdown":
+				this.#menuInteraction = event.pointerType || "pointer";
+				break;
+			case "keydown":
+				this.#menuInteraction = "keyboard";
+				break;
+			default: this.#menuInteraction ??= "focus";
+		}
 	};
 	#directionPlacement() {
 		const rtl = this.#rtlService.isRTL(this.#elementRef.nativeElement);
@@ -8602,16 +8650,35 @@ var DropdownComponent = class DropdownComponent {
 	#togglerElement() {
 		return (this._toggler() ?? this.toggler)?.elementRef.nativeElement;
 	}
-	#focusToggler() {
+	#eventPart(event) {
+		const path = event.composedPath();
 		const toggler = this.#togglerElement();
-		if (!toggler) return;
-		const root = toggler.getRootNode();
-		const candidates = [toggler, ...toggler.querySelectorAll(FOCUSABLE_SELECTOR)].filter((candidate) => candidate === toggler || candidate.tabIndex >= 0 && !candidate.closest("[aria-hidden=\"true\"]"));
-		const focusMonitor = this.#injector.get(FocusMonitor);
-		for (const candidate of candidates) {
-			focusMonitor.focusVia(candidate, "program");
-			if (root.activeElement === candidate) return;
-		}
+		if (toggler && path.includes(toggler)) return "toggler";
+		const menu = this._menuElementRef()?.nativeElement;
+		return menu && path.includes(menu) ? "menu" : void 0;
+	}
+	#isFormInteraction(event) {
+		const path = event.composedPath();
+		return path.slice(0, path.indexOf(this._menuElementRef()?.nativeElement) + 1).some((node) => node instanceof Element && FORM_TAG.test(node.localName));
+	}
+	#returnFocus(escape) {
+		const menu = this._menuElementRef()?.nativeElement;
+		if (!menu || !this.#menuInteraction || !menu.ownerDocument.hasFocus()) return;
+		restoreFocus(menu, this.#focusTargets(escape), (target) => this.#injector.get(FocusMonitor).focusVia(target, "program", { preventScroll: !escape }));
+	}
+	#focusTargets(escape) {
+		const targets = this.#focusReturn?.focusReturnTargets() ?? this.#togglerTargets(escape);
+		return this.#menuInteraction === "touch" || this.#menuInteraction === "pen" ? targets.filter((target) => !target || !this.#opensKeyboard(target)) : targets;
+	}
+	#togglerTargets(escape) {
+		const toggler = this.#togglerElement();
+		if (!toggler || !escape) return toggler ? [toggler] : [];
+		return [toggler, ...toggler.querySelectorAll(FOCUSABLE_SELECTOR)].filter((candidate) => candidate === toggler || candidate.tabIndex >= 0 && !candidate.closest("[aria-hidden=\"true\"]"));
+	}
+	#opensKeyboard(target) {
+		if (target instanceof HTMLInputElement) return TEXT_INPUT_TYPE.test(target.type) && !target.readOnly;
+		if (target instanceof HTMLTextAreaElement) return !target.readOnly;
+		return !(target instanceof HTMLSelectElement) && isEditableTarget$1(target);
 	}
 	clearListeners() {
 		this.listeners.forEach((unListen) => {
@@ -8693,13 +8760,10 @@ var DropdownComponent = class DropdownComponent {
 			}
 		},
 		outputs: { visibleChange: "visibleChange" },
-		host: {
-			listeners: { "click": "onHostClick($event)" },
-			properties: {
-				"class": "hostClasses()",
-				"style": "hostStyle()"
-			}
-		},
+		host: { properties: {
+			"class": "hostClasses()",
+			"style": "hostStyle()"
+		} },
 		providers: [DropdownService],
 		queries: [
 			{
@@ -8754,8 +8818,7 @@ i0.ɵɵngDeclareClassMetadata({
 			}],
 			host: {
 				"[class]": "hostClasses()",
-				"[style]": "hostStyle()",
-				"(click)": "onHostClick($event)"
+				"[style]": "hostStyle()"
 			},
 			styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(.input-group) :host.dropdown:first-child::ng-deep :first-child{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group) :host.dropdown:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host.dropdown:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group) :host.dropdown:last-child::ng-deep :first-child{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host.dropdown:last-child::ng-deep :first-child:not(:only-of-type){border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group) :host.dropdown:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-start-start-radius:0;border-end-start-radius:0}\n"]
 		}]
@@ -8892,7 +8955,7 @@ var DropdownItemDirective = class DropdownItemDirective {
 		};
 	}, ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
 	onClick($event) {
-		this.handleInteraction();
+		if ($event.target === this.elementRef.nativeElement || !isEditableTarget$1($event.target)) this.handleInteraction();
 	}
 	onKeyUp($event) {
 		const target = $event.target;
@@ -8900,7 +8963,7 @@ var DropdownItemDirective = class DropdownItemDirective {
 	}
 	handleInteraction() {
 		if (this.autoClose()) this.#dropdownService.toggle({
-			visible: "toggle",
+			visible: false,
 			dropdown: this.dropdown
 		});
 	}
@@ -9630,6 +9693,31 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const TYPES_WITHOUT_ARIA_INVALID = [
+	"button",
+	"color",
+	"hidden",
+	"image",
+	"reset",
+	"submit"
+];
+const bindAriaInvalid = (valid, type) => {
+	const host = inject(ElementRef).nativeElement;
+	const renderer = inject(Renderer2);
+	const templateValue = inject(new HostAttributeToken("aria-invalid"), { optional: true });
+	let invalidated = false;
+	return effect(() => {
+		if (valid() === false && !TYPES_WITHOUT_ARIA_INVALID.includes(String(type?.() ?? "").toLowerCase())) {
+			const current = host.getAttribute("aria-invalid");
+			if (!current || current.toLowerCase() === "false") renderer.setAttribute(host, "aria-invalid", "true");
+			invalidated = true;
+		} else if (invalidated) {
+			if (templateValue === null) renderer.removeAttribute(host, "aria-invalid");
+			else renderer.setAttribute(host, "aria-invalid", templateValue);
+			invalidated = false;
+		}
+	});
+};
 var FormControlDirective = class FormControlDirective {
 	#hostElement = inject(ElementRef);
 	sizing = input(...ngDevMode ? [void 0, { debugName: "sizing" }] : /* istanbul ignore next */ []);
@@ -9639,6 +9727,7 @@ var FormControlDirective = class FormControlDirective {
 		...ngDevMode ? { debugName: "plaintext" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
+	#ariaInvalidEffect = bindAriaInvalid(this.valid, this.type);
 	hostClasses = computed(() => {
 		const type = this.type();
 		const isRange = type === "range";
@@ -9785,6 +9874,7 @@ var FormCheckInputDirective = class FormCheckInputDirective {
 		return this.#indeterminate();
 	}
 	valid = input(...ngDevMode ? [void 0, { debugName: "valid" }] : /* istanbul ignore next */ []);
+	#ariaInvalidEffect = bindAriaInvalid(this.valid);
 	hostClasses = computed(() => {
 		const valid = this.valid();
 		return {
@@ -10104,6 +10194,7 @@ i0.ɵɵngDeclareClassMetadata({
 var FormSelectDirective = class FormSelectDirective {
 	sizing = input(...ngDevMode ? [void 0, { debugName: "sizing" }] : /* istanbul ignore next */ []);
 	valid = input(...ngDevMode ? [void 0, { debugName: "valid" }] : /* istanbul ignore next */ []);
+	#ariaInvalidEffect = bindAriaInvalid(this.valid);
 	hostClasses = computed(() => {
 		const sizing = this.sizing();
 		const valid = this.valid();
@@ -13600,14 +13691,31 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 var ModalService = class ModalService {
+	#document = inject(DOCUMENT);
 	#modalState = new Subject();
 	modalState$ = this.#modalState.asObservable();
+	#opened = new Subject();
+	opened$ = this.#opened.asObservable();
+	#openClassHolders = /* @__PURE__ */ new Set();
 	toggle(action) {
 		this.#modalState.next({
 			...action,
 			focusFallback: [...action.focusFallback ?? []]
 		});
 	}
+	announceOpened(modal, focusFallback) {
+		this.#opened.next({
+			modal,
+			focusFallback
+		});
+	}
+	addOpenClass(modal) {
+		this.#openClassHolders.add(modal);
+		this.#document.body.classList.add("modal-open");
+	}
+	removeOpenClass(modal) {
+		if (this.#openClassHolders.delete(modal) && this.#openClassHolders.size === 0) this.#document.body.classList.remove("modal-open");
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.3",
@@ -13797,16 +13905,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
-const restoreFocus = (overlay, candidates) => {
-	const document = overlay.ownerDocument;
-	const active = document.activeElement;
-	if (active && active !== document.body && !overlay.contains(active)) return false;
-	for (const target of candidates) if (target?.isConnected && !overlay.contains(target)) {
-		target.focus({ preventScroll: true });
-		if (document.activeElement === target) return true;
-	}
-	return false;
-};
 var ModalComponent = class ModalComponent {
 	#document = inject(DOCUMENT);
 	#renderer = inject(Renderer2);
@@ -13815,6 +13913,7 @@ var ModalComponent = class ModalComponent {
 	#backdropService = inject(BackdropService);
 	#destroyRef = inject(DestroyRef);
 	#platformId = inject(PLATFORM_ID);
+	#generatedId = inject(UIDService).getUID("modal");
 	alignment = input("top", ...ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []);
 	backdrop = input(true, ...ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []);
 	container = input(this.#document.body, ...ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []);
@@ -13828,7 +13927,7 @@ var ModalComponent = class ModalComponent {
 		alias: "id"
 	});
 	get id() {
-		return this.attrId();
+		return this.attrId() || this.#generatedId;
 	}
 	portal = input(false, {
 		...ngDevMode ? { debugName: "portal" } : /* istanbul ignore next */ {},
@@ -13895,7 +13994,7 @@ var ModalComponent = class ModalComponent {
 		untracked(() => {
 			if (visible && afterViewInit) {
 				this.#focusBeforeShow = this.#document.activeElement;
-				setTimeout(() => {
+				if (isPlatformBrowser(this.#platformId)) setTimeout(() => {
 					if (!this.focusTrap()?.focusTrap.focusInitialElement()) this.#hostElement.nativeElement.focus();
 				});
 			} else this.#restoreFocus();
@@ -13911,24 +14010,16 @@ var ModalComponent = class ModalComponent {
 		...ngDevMode ? { debugName: "modalDialogRef" } : /* istanbul ignore next */ {},
 		read: ElementRef
 	});
-	#modalDialogEffect = effect((OnCleanup) => {
-		const modalDialogElement = this.modalDialogRef().nativeElement;
-		const removeEventListeners = () => {
-			modalDialogElement?.removeEventListener("transitionend", this.#handleTransitionEnd);
-		};
-		OnCleanup(removeEventListeners);
-		modalDialogElement?.addEventListener("transitionend", this.#handleTransitionEnd);
-	}, ...ngDevMode ? [{ debugName: "#modalDialogEffect" }] : /* istanbul ignore next */ []);
-	#handleTransitionEnd = (event) => {
-		const modalDialogElement = this.modalDialogRef().nativeElement;
-		if (event.target === modalDialogElement && event.propertyName === "transform") {
-			if (!this.visible()) {
-				this.domPortalCleanup();
-				this.#renderer.setStyle(this.#hostElement.nativeElement, "display", "none");
-			}
-		}
-	};
+	#hideEffect = afterRenderEffect({ read: (onCleanup) => {
+		if (this.visible() || this.#hidden) return;
+		let cancelled = false;
+		onCleanup(() => cancelled = true);
+		Promise.all([afterTransitions(this.#hostElement.nativeElement), afterTransitions(this.modalDialogRef().nativeElement)]).then(() => {
+			if (!cancelled && !this.visible()) this.#completeHide();
+		});
+	} }, ...ngDevMode ? [{ debugName: "#hideEffect" }] : /* istanbul ignore next */ []);
 	#activeBackdrop;
+	#hidden = true;
 	hostClasses = computed(() => {
 		return {
 			modal: true,
@@ -13948,16 +14039,23 @@ var ModalComponent = class ModalComponent {
 	#show = signal(false, ...ngDevMode ? [{ debugName: "#show" }] : /* istanbul ignore next */ []);
 	animateStart() {
 		if (this.visible()) {
-			this.#backdropService.hideScrollbar();
+			this.#hidden = false;
 			this.#renderer.setStyle(this.#hostElement.nativeElement, "display", "block");
-		} else if (!this.transition()) {
-			this.domPortalCleanup();
-			this.#renderer.setStyle(this.#hostElement.nativeElement, "display", "none");
-		}
+		} else if (!this.#hidden && !isPlatformBrowser(this.#platformId)) this.#completeHide();
 		setTimeout(() => {
 			this.show = this.visible();
 		});
 	}
+	#completeHide() {
+		this.#hidden = true;
+		this.domPortalCleanup();
+		this.#renderer.setStyle(this.#hostElement.nativeElement, "display", "none");
+		this.#releaseBody();
+	}
+	#releaseBody() {
+		this.#backdropService.unlockScroll(this);
+		this.#modalService.removeOpenClass(this);
+	}
 	onKeyDownHandler(event) {
 		if (event.key === "Escape" && !event.defaultPrevented && this.keyboard() && this.visible()) {
 			if (this.backdrop() === "static") this.setStaticBackdrop();
@@ -14003,24 +14101,32 @@ var ModalComponent = class ModalComponent {
 		this.#afterViewInit.set(false);
 		this.setBackdrop(false);
 		this.domPortalCleanup();
+		this.#releaseBody();
 	}
 	stateToggleSubscribe() {
 		this.#modalService.modalState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((action) => {
-			if (this === action.modal || this.id === action.id) {
+			if (!action.modal && !action.id) this.#closeFor(action.focusFallback);
+			else if (this === action.modal || this.id === action.id) {
 				if ("show" in action) {
 					const visible = this.visible();
 					const show = action?.show === "toggle" ? !visible : !!action.show;
 					if (show && !visible) {
 						this.#trigger = action.trigger ?? null;
 						this.#openAction = action;
-					}
-					this.visible.set(show);
+						this.visible.set(true);
+						this.#modalService.announceOpened(this, action.focusFallback);
+					} else this.visible.set(show);
 				}
-			} else if (this.visible()) {
-				for (const target of this.#focusCandidates()) if (!action.focusFallback?.includes(target)) action.focusFallback?.push(target);
-				this.visible.set(false);
 			}
 		});
+		this.#modalService.opened$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(({ modal, focusFallback }) => {
+			if (modal !== this) this.#closeFor(focusFallback);
+		});
+	}
+	#closeFor(focusFallback) {
+		if (!this.visible()) return;
+		for (const target of this.#focusCandidates()) if (!focusFallback.includes(target)) focusFallback.push(target);
+		this.visible.set(false);
 	}
 	#focusCandidates() {
 		return [
@@ -14037,12 +14143,14 @@ var ModalComponent = class ModalComponent {
 		if (isPlatformBrowser(this.#platformId)) restoreFocus(this.#hostElement.nativeElement, candidates);
 	}
 	setBackdrop(setBackdrop) {
-		this.#activeBackdrop = setBackdrop ? this.#backdropService.setBackdrop("modal") : this.#backdropService.clearBackdrop(this.#activeBackdrop);
+		if (setBackdrop) this.#activeBackdrop ??= this.#backdropService.setBackdrop("modal", this.transition());
+		else this.#activeBackdrop = this.#backdropService.clearBackdrop(this.#activeBackdrop);
 	}
 	setBodyStyles(open) {
-		if (open) {
-			if (!!this.backdrop()) this.#renderer.addClass(this.#document.body, "modal-open");
-		} else this.#renderer.removeClass(this.#document.body, "modal-open");
+		if (!open) return;
+		this.#backdropService.lockScroll(this);
+		if (this.backdrop() !== false) this.#modalService.addOpenClass(this);
+		else this.#modalService.removeOpenClass(this);
 	}
 	setStaticBackdrop() {
 		if (this.transition()) {
@@ -14172,7 +14280,7 @@ var ModalComponent = class ModalComponent {
 				"class": "hostClasses()",
 				"attr.role": "visible() ? role() : null",
 				"inert": "ariaHidden()",
-				"attr.id": "id",
+				"attr.id": "attrId()",
 				"aria-modal": "ariaModal()",
 				"attr.tabindex": "-1"
 			},
@@ -14257,7 +14365,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class]": "hostClasses()",
 				"[attr.role]": "visible() ? role() : null",
 				"[inert]": "ariaHidden()",
-				"[attr.id]": "id",
+				"[attr.id]": "attrId()",
 				"[aria-modal]": "ariaModal()",
 				"[attr.tabindex]": "-1",
 				"(mousedown)": "onMouseDownHandler($event)",
@@ -14436,7 +14544,6 @@ var ModalModule = class ModalModule {
 		version: "22.2.3",
 		ngImport: i0,
 		type: ModalModule,
-		providers: [ModalService],
 		imports: [ModalComponent]
 	});
 };
@@ -14467,8 +14574,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ModalHeaderComponent,
 				ModalTitleDirective,
 				ModalToggleDirective
-			],
-			providers: [ModalService]
+			]
 		}]
 	}]
 });
@@ -14535,10 +14641,11 @@ var OffcanvasComponent = class OffcanvasComponent {
 	#activeBackdrop;
 	#backdropClickSubscription;
 	#layoutChangeSubscription;
-	#hideFallbackId;
 	#focusBeforeShow = null;
+	#hidden = signal(true, ...ngDevMode ? [{ debugName: "#hidden" }] : /* istanbul ignore next */ []);
 	#isShown = false;
 	#shownAsPanel = false;
+	#transitionWait;
 	#trigger = null;
 	#inPlace = signal(false, ...ngDevMode ? [{ debugName: "#inPlace" }] : /* istanbul ignore next */ []);
 	scroll = input(false, {
@@ -14574,20 +14681,36 @@ var OffcanvasComponent = class OffcanvasComponent {
 	#afterEveryRenderFn = afterEveryRender({ read: () => this.#readPosition() });
 	visibleEffect = effect(() => {
 		const visible = this.visible();
-		const wasShown = this.#isShown;
-		this.animateStart(visible);
-		if (visible) {
-			if (!wasShown) this.#focusBeforeShow = this.#document.activeElement;
-			this.setBackdrop(this.backdrop());
-			this.setFocus();
-		} else {
-			this.#shownAsPanel = false;
-			this.#restoreFocus();
-			this.setBackdrop(false);
-		}
-		this.layoutChangeSubscribe(visible);
-		this.visibleChange?.emit(visible);
+		untracked(() => {
+			const wasShown = this.#isShown;
+			this.animateStart(visible);
+			if (visible) {
+				if (!wasShown) this.#focusBeforeShow = this.#document.activeElement;
+				this.setFocus();
+			} else {
+				this.#shownAsPanel = false;
+				this.#restoreFocus();
+			}
+			this.visibleChange?.emit(visible);
+		});
 	}, ...ngDevMode ? [{ debugName: "visibleEffect" }] : /* istanbul ignore next */ []);
+	#backdropEffect = effect(() => {
+		const backdrop = this.visible() && this.backdrop();
+		untracked(() => this.setBackdrop(backdrop));
+	}, ...ngDevMode ? [{ debugName: "#backdropEffect" }] : /* istanbul ignore next */ []);
+	#scrollLockEffect = effect(() => {
+		const visible = this.visible();
+		const scroll = this.scroll();
+		untracked(() => {
+			if (!visible) return;
+			if (scroll) this.#backdropService.unlockScroll(this);
+			else this.#backdropService.lockScroll(this);
+		});
+	}, ...ngDevMode ? [{ debugName: "#scrollLockEffect" }] : /* istanbul ignore next */ []);
+	#layoutEffect = effect(() => {
+		const breakpoint = this.visible() && this.responsiveBreakpoint;
+		untracked(() => this.layoutChangeSubscribe(breakpoint));
+	}, ...ngDevMode ? [{ debugName: "#layoutEffect" }] : /* istanbul ignore next */ []);
 	visibleChange = output();
 	hostClasses = computed(() => {
 		const responsive = this.responsive();
@@ -14603,6 +14726,9 @@ var OffcanvasComponent = class OffcanvasComponent {
 	ariaHidden = computed(() => {
 		return this.visible() || this.#inPlace() ? null : true;
 	}, ...ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []);
+	hostInert = computed(() => {
+		return this.#hidden() ? this.ariaHidden() : null;
+	}, ...ngDevMode ? [{ debugName: "hostInert" }] : /* istanbul ignore next */ []);
 	get tabIndex() {
 		return "-1";
 	}
@@ -14620,20 +14746,24 @@ var OffcanvasComponent = class OffcanvasComponent {
 		return breakpointValue ? `${parseFloat(breakpointValue.trim()) - .02}px` : false;
 	}
 	animateStart(visible = this.visible()) {
-		const wasShown = this.#isShown;
+		const host = this.#hostElement.nativeElement;
 		this.#isShown = visible;
-		this.#clearHideFallback();
 		if (visible) {
-			if (!this.scroll()) this.#backdropService.hideScrollbar();
-			this.#renderer.removeClass(this.#hostElement.nativeElement, "hiding");
-			this.#renderer.addClass(this.#hostElement.nativeElement, "showing");
+			this.#hidden.set(false);
+			this.#renderer.removeClass(host, "hiding");
+			this.#renderer.addClass(host, "showing");
 		} else {
-			this.#renderer.removeClass(this.#hostElement.nativeElement, "showing");
-			if (wasShown) {
-				this.#renderer.addClass(this.#hostElement.nativeElement, "hiding");
-				this.#scheduleHideFallback();
-			}
+			this.#renderer.removeClass(host, "showing");
+			if (this.#hidden()) return;
+			this.#renderer.addClass(host, "hiding");
 		}
+		const transitionWait = {};
+		this.#transitionWait = transitionWait;
+		afterTransitions(host).then(() => {
+			if (this.#transitionWait !== transitionWait || this.visible() !== visible) return;
+			if (visible) this.#renderer.removeClass(host, "showing");
+			else this.#completeHide();
+		});
 	}
 	onKeyDownHandler(event) {
 		if (event.key === "Escape" && !event.defaultPrevented && this.keyboard() && this.visible() && this.backdrop() !== "static") this.#offcanvasService.toggle({
@@ -14653,7 +14783,6 @@ var OffcanvasComponent = class OffcanvasComponent {
 		setTimeout(() => {
 			this.#renderer.setStyle(this.#hostElement.nativeElement, "display", "flex");
 		});
-		this.#hostElement.nativeElement.addEventListener("transitionend", this.#handleTransitionEnd);
 	}
 	ngOnDestroy() {
 		if (this.#trigger || this.#focusBeforeShow) this.#restoreFocus();
@@ -14661,38 +14790,17 @@ var OffcanvasComponent = class OffcanvasComponent {
 			show: false,
 			id: this.id()
 		});
-		this.#removeEventListeners();
-		this.#clearHideFallback();
+		this.#transitionWait = void 0;
 		this.setBackdrop(false);
+		this.#backdropService.unlockScroll(this);
 		this.domPortalCleanup();
 	}
-	#removeEventListeners = () => {
-		this.#hostElement.nativeElement.removeEventListener("transitionend", this.#handleTransitionEnd);
-	};
-	#handleTransitionEnd = (event) => {
-		const offcanvasElement = this.#hostElement.nativeElement;
-		if (event.target === offcanvasElement && event.propertyName === "transform") {
-			if (this.visible()) this.#renderer.removeClass(offcanvasElement, "showing");
-			else this.#completeHide();
-		}
-	};
 	#completeHide() {
-		this.#clearHideFallback();
+		this.#hidden.set(true);
 		this.#renderer.removeClass(this.#hostElement.nativeElement, "hiding");
-		this.#renderer.removeStyle(this.#document.body, "overflow");
-		this.#renderer.removeStyle(this.#document.body, "paddingRight");
+		this.#backdropService.unlockScroll(this);
 		this.domPortalCleanup();
 	}
-	#scheduleHideFallback() {
-		const style = this.#document.defaultView?.getComputedStyle(this.#hostElement.nativeElement);
-		const duration = Number.parseFloat(style?.transitionDuration ?? "") || 0;
-		const delay = Number.parseFloat(style?.transitionDelay ?? "") || 0;
-		this.#hideFallbackId = setTimeout(() => this.#completeHide(), (duration + delay) * 1e3 + 5);
-	}
-	#clearHideFallback() {
-		clearTimeout(this.#hideFallbackId);
-		this.#hideFallbackId = void 0;
-	}
 	#readPosition() {
 		const position = this.#document.defaultView?.getComputedStyle(this.#hostElement.nativeElement).position;
 		this.#inPlace.set(!!position && position !== "fixed");
@@ -14720,27 +14828,26 @@ var OffcanvasComponent = class OffcanvasComponent {
 		});
 	}
 	backdropClickSubscribe(subscribe = true) {
+		this.#backdropClickSubscription?.unsubscribe();
 		if (subscribe) this.#backdropClickSubscription = this.#backdropService.backdropClick$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((clicked) => {
 			this.#offcanvasService.toggle({
 				show: !clicked,
 				id: this.id()
 			});
 		});
-		else this.#backdropClickSubscription?.unsubscribe();
 	}
 	setBackdrop(setBackdrop) {
-		this.#activeBackdrop = !!setBackdrop ? this.#backdropService.setBackdrop("offcanvas") : this.#backdropService.clearBackdrop(this.#activeBackdrop);
-		setBackdrop === true ? this.backdropClickSubscribe() : this.backdropClickSubscribe(false);
+		if (!setBackdrop) this.#activeBackdrop = this.#backdropService.clearBackdrop(this.#activeBackdrop);
+		else if (!this.#activeBackdrop) this.#activeBackdrop = this.#backdropService.setBackdrop("offcanvas");
+		this.backdropClickSubscribe(setBackdrop === true);
 	}
-	layoutChangeSubscribe(subscribe = true) {
-		if (subscribe) {
-			if (!this.responsiveBreakpoint) return;
-			const responsiveBreakpoint = `(max-width: ${this.responsiveBreakpoint})`;
-			const layoutChanges = this.#breakpointObserver.observe([responsiveBreakpoint]);
-			this.#layoutChangeSubscription = layoutChanges.pipe(filter((breakpointState) => !breakpointState.matches), takeUntilDestroyed(this.#destroyRef)).subscribe((breakpointState) => {
-				this.visible.set(breakpointState.matches);
-			});
-		} else this.#layoutChangeSubscription?.unsubscribe();
+	layoutChangeSubscribe(breakpoint) {
+		this.#layoutChangeSubscription?.unsubscribe();
+		if (!breakpoint) return;
+		const layoutChanges = this.#breakpointObserver.observe([`(max-width: ${breakpoint})`]);
+		this.#layoutChangeSubscription = layoutChanges.pipe(filter((breakpointState) => !breakpointState.matches), takeUntilDestroyed(this.#destroyRef)).subscribe((breakpointState) => {
+			this.visible.set(breakpointState.matches);
+		});
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -14843,10 +14950,10 @@ var OffcanvasComponent = class OffcanvasComponent {
 			},
 			properties: {
 				"attr.id": "id()",
-				"inert": "ariaHidden()",
+				"inert": "hostInert()",
 				"attr.role": "visible() ? role() : null",
 				"aria-modal": "visible() ? ariaModal() : null",
-				"attr.tabindex": "tabIndex",
+				"attr.tabindex": "ariaHidden() ? null : tabIndex",
 				"class": "hostClasses()"
 			}
 		},
@@ -14856,7 +14963,7 @@ var OffcanvasComponent = class OffcanvasComponent {
 			inputs: ["dark", "dark"]
 		}],
 		ngImport: i0,
-		template: "<div [cdkTrapFocus]=\"visible()\">\n  <ng-content />\n</div>\n",
+		template: "<div [cdkTrapFocus]=\"visible()\" [inert]=\"ariaHidden()\">\n  <ng-content />\n</div>\n",
 		styles: [":host{display:none}\n"],
 		dependencies: [{
 			kind: "ngmodule",
@@ -14887,15 +14994,15 @@ i0.ɵɵngDeclareClassMetadata({
 			}],
 			host: {
 				"[attr.id]": "id()",
-				"[inert]": "ariaHidden()",
+				"[inert]": "hostInert()",
 				"[attr.role]": "visible() ? role() : null",
 				"[aria-modal]": "visible() ? ariaModal() : null",
-				"[attr.tabindex]": "tabIndex",
+				"[attr.tabindex]": "ariaHidden() ? null : tabIndex",
 				"[class]": "hostClasses()",
 				"(document:keydown)": "onKeyDownHandler($event)",
 				"(window:resize)": "onResizeHandler()"
 			},
-			template: "<div [cdkTrapFocus]=\"visible()\">\n  <ng-content />\n</div>\n",
+			template: "<div [cdkTrapFocus]=\"visible()\" [inert]=\"ariaHidden()\">\n  <ng-content />\n</div>\n",
 			styles: [":host{display:none}\n"]
 		}]
 	}],
@@ -15193,7 +15300,6 @@ var OffcanvasModule = class OffcanvasModule {
 		version: "22.2.3",
 		ngImport: i0,
 		type: OffcanvasModule,
-		providers: [OffcanvasService, BackdropService],
 		imports: [OffcanvasComponent]
 	});
 };
@@ -15218,8 +15324,7 @@ i0.ɵɵngDeclareClassMetadata({
 				OffcanvasHeaderComponent,
 				OffcanvasTitleDirective,
 				OffcanvasToggleDirective
-			],
-			providers: [OffcanvasService, BackdropService]
+			]
 		}]
 	}]
 });
@@ -15971,10 +16076,11 @@ var PopoverDirective = class PopoverDirective {
 	#hostElement = inject(ElementRef);
 	#viewContainerRef = inject(ViewContainerRef);
 	#listenersService = inject(ListenersService);
-	#changeDetectorRef = inject(ChangeDetectorRef);
 	#intersectionService = inject(IntersectionService);
 	#destroyRef = inject(DestroyRef);
 	#document = inject(DOCUMENT);
+	#isServer = isPlatformServer(inject(PLATFORM_ID));
+	#tooltipId = inject(UIDService).getUID("popover");
 	#timerId1;
 	#timerId2;
 	content = input(void 0, {
@@ -16018,13 +16124,16 @@ var PopoverDirective = class PopoverDirective {
 		...ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {},
 		alias: "cPopoverVisible"
 	});
+	#shown = computed(() => !this.#isServer && this.visible() && !!this.content(), ...ngDevMode ? [{ debugName: "#shown" }] : /* istanbul ignore next */ []);
 	#visibleEffect = afterRenderEffect({ write: () => {
 		this.visible() ? this.addTooltipElement() : this.removeTooltipElement();
 	} }, ...ngDevMode ? [{ debugName: "#visibleEffect" }] : /* istanbul ignore next */ []);
 	#handleEscapeKey = (event) => {
 		if (event.key !== "Escape") return;
-		event.preventDefault();
-		event.stopPropagation();
+		if (this.#shown()) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
 		this.visible.set(false);
 	};
 	#escapeEffect = effect((onCleanup) => {
@@ -16035,27 +16144,36 @@ var PopoverDirective = class PopoverDirective {
 			this.#document.removeEventListener("keydown", this.#handleEscapeKey, useCapture);
 		});
 	}, ...ngDevMode ? [{ debugName: "#escapeEffect" }] : /* istanbul ignore next */ []);
+	#ariaDescribedByEffect = afterRenderEffect(() => this.#syncAriaDescribedBy(this.#shown()), ...ngDevMode ? [{ debugName: "#ariaDescribedByEffect" }] : /* istanbul ignore next */ []);
 	get ariaDescribedBy() {
-		return this.tooltipId ? this.tooltipId : null;
+		return this.#shown() ? this.#tooltipId : null;
 	}
 	tooltip;
-	tooltipId;
 	tooltipRef;
 	popperInstance;
 	_popperOptions = { modifiers: [{
 		name: "offset",
 		options: { offset: [0, 9] }
 	}] };
+	ngAfterViewChecked() {
+		this.#syncAriaDescribedBy(this.#shown());
+	}
 	ngAfterViewInit() {
 		this.intersectionServiceSubscribe();
 	}
 	ngOnDestroy() {
 		this.clearListeners();
 		this.destroyTooltipElement();
+		this.#syncAriaDescribedBy(false);
 	}
 	ngOnInit() {
 		this.setListeners();
 	}
+	#syncAriaDescribedBy(shown) {
+		const host = this.#hostElement.nativeElement;
+		if (shown) addAriaReferencedId(host, "aria-describedby", this.#tooltipId);
+		else if (getAriaReferenceIds(host, "aria-describedby").includes(this.#tooltipId)) removeAriaReferencedId(host, "aria-describedby", this.#tooltipId);
+	}
 	setListeners() {
 		const config = {
 			hostElement: this.#hostElement,
@@ -16083,23 +16201,20 @@ var PopoverDirective = class PopoverDirective {
 			this.visible.set(next.isIntersecting ? this.visible() : false);
 		});
 	}
-	getUID(prefix) {
-		let uid = prefix ?? "random-id";
-		do
-			uid = `${prefix}-${Math.floor(Math.random() * 1e6).toString(10)}`;
-		while (this.#document.getElementById(uid));
-		return uid;
-	}
 	createTooltipElement() {
-		if (!this.tooltipRef) this.tooltipRef = this.#viewContainerRef.createComponent(PopoverComponent);
+		if (!this.tooltipRef) {
+			this.tooltipRef = this.#viewContainerRef.createComponent(PopoverComponent);
+			this.tooltipRef.setInput("id", this.#tooltipId);
+		}
 	}
 	destroyTooltipElement() {
+		clearTimeout(this.#timerId1);
+		clearTimeout(this.#timerId2);
 		this.tooltip?.remove();
 		this.tooltipRef?.destroy();
 		this.tooltipRef = void 0;
 		this.popperInstance?.destroy();
-		this.#viewContainerRef?.detach();
-		this.#viewContainerRef?.clear();
+		this.popperInstance = void 0;
 	}
 	addTooltipElement() {
 		if (!this.content()) {
@@ -16115,33 +16230,27 @@ var PopoverDirective = class PopoverDirective {
 		this.#viewContainerRef.insert(this.tooltipRef.hostView);
 		this.#renderer.appendChild(this.#document.body, this.tooltip);
 		this.popperInstance = createPopper(this.referenceRef().nativeElement, this.tooltip, { ...this.popperOptionsComputed() });
-		if (!this.visible()) {
-			this.removeTooltipElement();
-			return;
-		}
 		clearTimeout(this.#timerId2);
 		clearTimeout(this.#timerId1);
 		this.#timerId1 = setTimeout(() => {
-			this.tooltipId = this.getUID("popover");
-			this.tooltipRef?.setInput("id", this.tooltipId);
 			this.#renderer.removeClass(this.tooltip, "d-none");
 			this.tooltipRef?.setInput("visible", this.visible());
 			this.popperInstance?.forceUpdate();
-			this.#changeDetectorRef?.markForCheck();
 			this.#timerId1 = void 0;
 		}, 150);
 	}
 	removeTooltipElement() {
-		this.tooltipId = "";
+		clearTimeout(this.#timerId1);
 		if (!this.tooltipRef) return;
 		clearTimeout(this.#timerId2);
 		this.#timerId2 = setTimeout(() => {
-			this.#viewContainerRef?.detach();
+			const index = this.#viewContainerRef.indexOf(this.tooltipRef.hostView);
+			if (index >= 0) this.#viewContainerRef.detach(index);
+			this.popperInstance?.destroy();
+			this.popperInstance = void 0;
 			this.#timerId2 = void 0;
 		}, 300);
 		this.tooltipRef.setInput("visible", false);
-		this.tooltipRef.setInput("id", void 0);
-		this.#changeDetectorRef.markForCheck();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -16202,7 +16311,6 @@ var PopoverDirective = class PopoverDirective {
 			}
 		},
 		outputs: { visible: "cPopoverVisibleChange" },
-		host: { properties: { "aria-describedby": "ariaDescribedBy" } },
 		providers: [ListenersService, IntersectionService],
 		exportAs: ["cPopover"],
 		ngImport: i0
@@ -16218,8 +16326,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "[cPopover]",
 			exportAs: "cPopover",
-			providers: [ListenersService, IntersectionService],
-			host: { "[aria-describedby]": "ariaDescribedBy" }
+			providers: [ListenersService, IntersectionService]
 		}]
 	}],
 	propDecorators: {
@@ -22299,10 +22406,11 @@ var TooltipDirective = class TooltipDirective {
 	#hostElement = inject(ElementRef);
 	#viewContainerRef = inject(ViewContainerRef);
 	#listenersService = inject(ListenersService);
-	#changeDetectorRef = inject(ChangeDetectorRef);
 	#intersectionService = inject(IntersectionService);
 	#destroyRef = inject(DestroyRef);
 	#document = inject(DOCUMENT);
+	#isServer = isPlatformServer(inject(PLATFORM_ID));
+	#tooltipId = inject(UIDService).getUID("tooltip");
 	#timerId1;
 	#timerId2;
 	content = input(void 0, {
@@ -22346,13 +22454,16 @@ var TooltipDirective = class TooltipDirective {
 		...ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {},
 		alias: "cTooltipVisible"
 	});
+	#shown = computed(() => !this.#isServer && this.visible() && !!this.content(), ...ngDevMode ? [{ debugName: "#shown" }] : /* istanbul ignore next */ []);
 	#visibleEffect = afterRenderEffect({ write: () => {
 		this.visible() ? this.addTooltipElement() : this.removeTooltipElement();
 	} }, ...ngDevMode ? [{ debugName: "#visibleEffect" }] : /* istanbul ignore next */ []);
 	#handleEscapeKey = (event) => {
 		if (event.key !== "Escape") return;
-		event.preventDefault();
-		event.stopPropagation();
+		if (this.#shown()) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
 		this.visible.set(false);
 	};
 	#escapeEffect = effect((onCleanup) => {
@@ -22361,27 +22472,36 @@ var TooltipDirective = class TooltipDirective {
 		this.#document.addEventListener("keydown", this.#handleEscapeKey, useCapture);
 		onCleanup(() => this.#document.removeEventListener("keydown", this.#handleEscapeKey, useCapture));
 	}, ...ngDevMode ? [{ debugName: "#escapeEffect" }] : /* istanbul ignore next */ []);
+	#ariaDescribedByEffect = afterRenderEffect(() => this.#syncAriaDescribedBy(this.#shown()), ...ngDevMode ? [{ debugName: "#ariaDescribedByEffect" }] : /* istanbul ignore next */ []);
 	get ariaDescribedBy() {
-		return this.tooltipId ? this.tooltipId : null;
+		return this.#shown() ? this.#tooltipId : null;
 	}
 	tooltip;
-	tooltipId;
 	tooltipRef;
 	popperInstance;
 	_popperOptions = { modifiers: [{
 		name: "offset",
 		options: { offset: [0, 5] }
 	}] };
+	ngAfterViewChecked() {
+		this.#syncAriaDescribedBy(this.#shown());
+	}
 	ngAfterViewInit() {
 		this.intersectionServiceSubscribe();
 	}
 	ngOnDestroy() {
 		this.clearListeners();
 		this.destroyTooltipElement();
+		this.#syncAriaDescribedBy(false);
 	}
 	ngOnInit() {
 		this.setListeners();
 	}
+	#syncAriaDescribedBy(shown) {
+		const host = this.#hostElement.nativeElement;
+		if (shown) addAriaReferencedId(host, "aria-describedby", this.#tooltipId);
+		else if (getAriaReferenceIds(host, "aria-describedby").includes(this.#tooltipId)) removeAriaReferencedId(host, "aria-describedby", this.#tooltipId);
+	}
 	setListeners() {
 		const config = {
 			hostElement: this.#hostElement,
@@ -22409,23 +22529,20 @@ var TooltipDirective = class TooltipDirective {
 			this.visible.set(next.isIntersecting ? this.visible() : false);
 		});
 	}
-	getUID(prefix) {
-		let uid = prefix ?? "random-id";
-		do
-			uid = `${prefix}-${Math.floor(Math.random() * 1e6).toString(10)}`;
-		while (this.#document.getElementById(uid));
-		return uid;
-	}
 	createTooltipElement() {
-		if (!this.tooltipRef) this.tooltipRef = this.#viewContainerRef.createComponent(TooltipComponent);
+		if (!this.tooltipRef) {
+			this.tooltipRef = this.#viewContainerRef.createComponent(TooltipComponent);
+			this.tooltipRef.setInput("id", this.#tooltipId);
+		}
 	}
 	destroyTooltipElement() {
+		clearTimeout(this.#timerId1);
+		clearTimeout(this.#timerId2);
 		this.tooltip?.remove();
 		this.tooltipRef?.destroy();
 		this.tooltipRef = void 0;
 		this.popperInstance?.destroy();
-		this.#viewContainerRef?.detach();
-		this.#viewContainerRef?.clear();
+		this.popperInstance = void 0;
 	}
 	addTooltipElement() {
 		if (!this.content()) {
@@ -22441,33 +22558,27 @@ var TooltipDirective = class TooltipDirective {
 		this.#viewContainerRef.insert(this.tooltipRef.hostView);
 		this.#renderer.appendChild(this.#document.body, this.tooltip);
 		this.popperInstance = createPopper(this.referenceRef().nativeElement, this.tooltip, { ...this.popperOptionsComputed() });
-		if (!this.visible()) {
-			this.removeTooltipElement();
-			return;
-		}
 		clearTimeout(this.#timerId2);
 		clearTimeout(this.#timerId1);
 		this.#timerId1 = setTimeout(() => {
-			this.tooltipId = this.getUID("tooltip");
-			this.tooltipRef?.setInput("id", this.tooltipId);
 			this.#renderer.removeClass(this.tooltip, "d-none");
 			this.tooltipRef?.setInput("visible", this.visible());
 			this.popperInstance?.forceUpdate();
-			this.#changeDetectorRef?.markForCheck();
 			this.#timerId1 = void 0;
 		}, 150);
 	}
 	removeTooltipElement() {
-		this.tooltipId = "";
+		clearTimeout(this.#timerId1);
 		if (!this.tooltipRef) return;
 		clearTimeout(this.#timerId2);
 		this.#timerId2 = setTimeout(() => {
-			this.#viewContainerRef?.detach();
+			const index = this.#viewContainerRef.indexOf(this.tooltipRef.hostView);
+			if (index >= 0) this.#viewContainerRef.detach(index);
+			this.popperInstance?.destroy();
+			this.popperInstance = void 0;
 			this.#timerId2 = void 0;
 		}, 300);
 		this.tooltipRef.setInput("visible", false);
-		this.tooltipRef.setInput("id", void 0);
-		this.#changeDetectorRef.markForCheck();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -22528,7 +22639,6 @@ var TooltipDirective = class TooltipDirective {
 			}
 		},
 		outputs: { visible: "cTooltipVisibleChange" },
-		host: { properties: { "aria-describedby": "ariaDescribedBy" } },
 		providers: [ListenersService, IntersectionService],
 		exportAs: ["cTooltip"],
 		ngImport: i0
@@ -22544,8 +22654,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "[cTooltip]",
 			exportAs: "cTooltip",
-			providers: [ListenersService, IntersectionService],
-			host: { "[aria-describedby]": "ariaDescribedBy" }
+			providers: [ListenersService, IntersectionService]
 		}]
 	}],
 	propDecorators: {
@@ -23011,7 +23120,7 @@ var WidgetStatCComponent = class WidgetStatCComponent extends CardComponent {
 		exportAs: ["cWidgetStatC"],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "@let _templates = templates();\n<c-card-body>\n  @if (icon() || _templates?.['widgetIconTemplate']) {\n    <div [class]=\"iconClasses()\">\n      <ng-container *ngTemplateOutlet=\"_templates?.['widgetIconTemplate'] || defaultWidgetIconTemplate\" />\n    </div>\n  }\n  @if (!!value()) {\n    <div [class]=\"valueClasses()\">\n      {{ value() }}\n    </div>\n  }\n  @if (!!title()) {\n    <div [class]=\"titleClasses()\">\n      {{ title() }}\n    </div>\n  }\n  @if (_templates?.['widgetProgressTemplate']) {\n    <ng-container *ngTemplateOutlet=\"_templates?.['widgetProgressTemplate'] || defaultWidgetProgressTemplate\" />\n  }\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n  {{ icon() }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n  <ng-content />\n</ng-template>\n",
+		template: "@let _templates = templates();\n<c-card-body>\n  @if (icon() || _templates?.['widgetIconTemplate']) {\n    <div [class]=\"iconClasses()\">\n      <ng-container *ngTemplateOutlet=\"_templates?.['widgetIconTemplate'] || defaultWidgetIconTemplate\" />\n    </div>\n  }\n  @if (!!value()) {\n    <div [class]=\"valueClasses()\">\n      {{ value() }}\n    </div>\n  }\n  @if (!!title()) {\n    <div [class]=\"titleClasses()\">\n      {{ title() }}\n    </div>\n  }\n  @if (_templates?.['widgetProgressTemplate']) {\n    <ng-container *ngTemplateOutlet=\"_templates?.['widgetProgressTemplate']\" />\n  }\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n  {{ icon() }}\n</ng-template>\n",
 		dependencies: [{
 			kind: "component",
 			type: CardBodyComponent,
@@ -23040,7 +23149,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "cWidgetStatC",
 			imports: [CardBodyComponent, NgTemplateOutlet],
 			host: { "[class]": "hostExtendedClass()" },
-			template: "@let _templates = templates();\n<c-card-body>\n  @if (icon() || _templates?.['widgetIconTemplate']) {\n    <div [class]=\"iconClasses()\">\n      <ng-container *ngTemplateOutlet=\"_templates?.['widgetIconTemplate'] || defaultWidgetIconTemplate\" />\n    </div>\n  }\n  @if (!!value()) {\n    <div [class]=\"valueClasses()\">\n      {{ value() }}\n    </div>\n  }\n  @if (!!title()) {\n    <div [class]=\"titleClasses()\">\n      {{ title() }}\n    </div>\n  }\n  @if (_templates?.['widgetProgressTemplate']) {\n    <ng-container *ngTemplateOutlet=\"_templates?.['widgetProgressTemplate'] || defaultWidgetProgressTemplate\" />\n  }\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n  {{ icon() }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n  <ng-content />\n</ng-template>\n"
+			template: "@let _templates = templates();\n<c-card-body>\n  @if (icon() || _templates?.['widgetIconTemplate']) {\n    <div [class]=\"iconClasses()\">\n      <ng-container *ngTemplateOutlet=\"_templates?.['widgetIconTemplate'] || defaultWidgetIconTemplate\" />\n    </div>\n  }\n  @if (!!value()) {\n    <div [class]=\"valueClasses()\">\n      {{ value() }}\n    </div>\n  }\n  @if (!!title()) {\n    <div [class]=\"titleClasses()\">\n      {{ title() }}\n    </div>\n  }\n  @if (_templates?.['widgetProgressTemplate']) {\n    <ng-container *ngTemplateOutlet=\"_templates?.['widgetProgressTemplate']\" />\n  }\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n  {{ icon() }}\n</ng-template>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -23392,7 +23501,7 @@ var WidgetStatFComponent = class WidgetStatFComponent extends CardComponent {
 			descendants: true,
 			isSignal: true
 		}],
-		exportAs: ["cWidgetStatB"],
+		exportAs: ["cWidgetStatF", "cWidgetStatB"],
 		usesInheritance: true,
 		ngImport: i0,
 		template: "@let _templates = templates();\n<ng-container>\n  <c-card-body [class]=\"cardBodyClasses()\">\n    <div [class]=\"iconClasses()\">\n      <ng-container *ngTemplateOutlet=\"_templates?.['widgetIconTemplate'] || defaultWidgetIconTemplate\" />\n    </div>\n    <div>\n      <div [class]=\"valueClasses()\">{{ value() }}</div>\n      <div [class]=\"titleClasses()\">{{ title() }}</div>\n    </div>\n  </c-card-body>\n  @if (footer() || _templates?.['widgetFooterTemplate']) {\n    <c-card-footer>\n      <ng-container *ngTemplateOutlet=\"_templates?.['widgetFooterTemplate'] || defaultFooterIconTemplate\" />\n    </c-card-footer>\n  }\n</ng-container>\n\n<ng-template #defaultWidgetIconTemplate>\n  <span>{{ icon() }}</span>\n</ng-template>\n\n<ng-template #defaultFooterIconTemplate>\n  <span>{{ footer() }}</span>\n</ng-template>\n",
@@ -23429,7 +23538,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "c-widget-stat-f",
-			exportAs: "cWidgetStatB",
+			exportAs: "cWidgetStatF, cWidgetStatB",
 			imports: [
 				CardBodyComponent,
 				CardFooterComponent,