@coreui/angular 5.7.38 → 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";
@@ -8051,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);
@@ -8232,7 +8243,9 @@ const alignmentClasses = (alignment) => {
 };
 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);
@@ -8271,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();
@@ -8421,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);
@@ -8488,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();
@@ -8506,6 +8529,7 @@ var DropdownComponent = class DropdownComponent {
 	activeTrap = false;
 	popperInstance;
 	listeners = [];
+	#menuInteraction;
 	hostClasses = computed(() => {
 		const direction = this.direction();
 		const variant = this.variant();
@@ -8572,6 +8596,15 @@ 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 part = this.#eventPart(event);
 			if (part === "toggler" || part === "menu" && this.#isFormInteraction(event)) return;
@@ -8588,9 +8621,19 @@ var DropdownComponent = class DropdownComponent {
 	#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);
@@ -8618,16 +8661,24 @@ var DropdownComponent = class DropdownComponent {
 		const path = event.composedPath();
 		return path.slice(0, path.indexOf(this._menuElementRef()?.nativeElement) + 1).some((node) => node instanceof Element && FORM_TAG.test(node.localName));
 	}
-	#focusToggler() {
+	#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) 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 || !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) => {
@@ -9642,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 */ []);
@@ -9651,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";
@@ -9797,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 {
@@ -10116,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();
@@ -13826,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);
@@ -13925,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();