@flusys/ng-ui 9.1.2 → 9.2.0

package/fesm2022/flusys-ng-ui.mjs

@@ -724,6 +724,9 @@ const PRESET_NAMES = [
 function setVar(name, value, root) {
 	root.style.setProperty(name, value);
 }
+function ownEntry(record, key) {
+	return key != null && Object.hasOwn(record, key) ? record[key] : void 0;
+}
 function applyPrimaryPalette(palette, isDark = false, root = document.documentElement) {
 	for (const shade of [
 		"50",
@@ -898,12 +901,12 @@ function getAppliedTheme() {
 function applyTheme(options, root = document.documentElement) {
 	appliedTheme = { ...options };
 	const presetName = options.preset ?? "Aura";
-	const preset = PRESETS[presetName] ?? PRESETS["Aura"];
+	const preset = ownEntry(PRESETS, presetName) ?? PRESETS["Aura"];
 	const primaryName = options.primary ?? "violet";
 	const surfaceName = options.surface;
 	const isDark = options.darkTheme ?? false;
-	const primaryPalette = primaryName === "noir" ? NOIR_PRIMARY : PRIMARY_PALETTES[primaryName] ?? PRIMARY_PALETTES["violet"];
-	const surfacePalette = SURFACE_PALETTES[surfaceName ?? (isDark ? "zinc" : "slate")] ?? SURFACE_PALETTES["slate"];
+	const primaryPalette = primaryName === "noir" ? NOIR_PRIMARY : ownEntry(PRIMARY_PALETTES, primaryName) ?? PRIMARY_PALETTES["violet"];
+	const surfacePalette = ownEntry(SURFACE_PALETTES, surfaceName ?? (isDark ? "zinc" : "slate")) ?? SURFACE_PALETTES["slate"];
 	applyPreset(preset, root);
 	applySurfacePalette(surfacePalette, root);
 	applyPrimaryPalette(primaryPalette, isDark, root);
@@ -950,30 +953,33 @@ function buildBootstrapPreset(envConfig) {
 	};
 }
 function initializeNgUITheme(options, platformId) {
-	if (!isPlatformBrowser(platformId)) return;
+	if (!isPlatformBrowser(platformId)) return null;
 	let themeOptions = {};
 	const themePreset = options?.theme?.preset;
 	if (themePreset && typeof themePreset === "object" && "preset" in themePreset && "options" in themePreset) themeOptions = themePreset.preset;
 	else if (themePreset) themeOptions = themePreset;
 	const darkModeSelector = options?.theme?.options?.darkModeSelector ?? ".app-dark";
-	const isDark = document.documentElement.classList.contains(darkModeSelector.replace(".", "")) || document.documentElement.getAttribute("class")?.includes("app-dark") === true;
+	const isDarkNow = () => document.documentElement.classList.contains(darkModeSelector.replace(".", "")) || document.documentElement.getAttribute("class")?.includes("app-dark") === true;
+	const isDark = isDarkNow();
 	applyTheme({
 		...themeOptions,
 		darkTheme: isDark
 	});
 	let wasDark = isDark;
-	new MutationObserver(() => {
-		const nowDark = document.documentElement.classList.contains("app-dark");
+	const observer = new MutationObserver(() => {
+		const nowDark = isDarkNow();
 		if (nowDark === wasDark) return;
 		wasDark = nowDark;
 		applyTheme({
 			...getAppliedTheme(),
 			darkTheme: nowDark
 		});
-	}).observe(document.documentElement, {
+	});
+	observer.observe(document.documentElement, {
 		attributes: true,
 		attributeFilter: ["class"]
 	});
+	return observer;
 }
 function provideNgUI(options) {
 	const configOptions = {
@@ -988,8 +994,8 @@ function provideNgUI(options) {
 			return config;
 		}
 	}, provideAppInitializer(() => {
-		const platformId = inject(PLATFORM_ID);
-		initializeNgUITheme(options ?? {}, platformId);
+		const observer = initializeNgUITheme(options ?? {}, inject(PLATFORM_ID));
+		if (observer) inject(DestroyRef).onDestroy(() => observer.disconnect());
 	})]);
 }
 const BASE_Z_INDEX = 1e3;
@@ -21021,7 +21027,7 @@ var AccordionComponent = class AccordionComponent {
 			this.value.set(wasOpen ? cur.filter((x) => x !== v) : [...cur, v]);
 			this.emitToggle(v, wasOpen);
 		} else {
-			const wasOpen = current === v;
+			const wasOpen = Array.isArray(current) ? current.includes(v) : current === v;
 			this.value.set(wasOpen ? null : v);
 			this.emitToggle(v, wasOpen);
 		}
@@ -21040,9 +21046,10 @@ var AccordionComponent = class AccordionComponent {
 		if (!headers.length) return;
 		const currentEl = document.activeElement;
 		const currentIndex = headers.findIndex((h) => h.buttonEl() === currentEl);
+		if (currentIndex < 0) return;
 		let nextIndex = null;
-		if (event.key === "ArrowDown") nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % headers.length;
-		else if (event.key === "ArrowUp") nextIndex = currentIndex < 0 ? 0 : (currentIndex - 1 + headers.length) % headers.length;
+		if (event.key === "ArrowDown") nextIndex = (currentIndex + 1) % headers.length;
+		else if (event.key === "ArrowUp") nextIndex = (currentIndex - 1 + headers.length) % headers.length;
 		else if (event.key === "Home") nextIndex = 0;
 		else if (event.key === "End") nextIndex = headers.length - 1;
 		if (nextIndex === null) return;
@@ -27486,6 +27493,10 @@ var AutoCompleteComponent = class AutoCompleteComponent {
 	isDisabled = computed(() => this.disabled() || this._formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
 	constructor() {
 		blockClicksWhileDisabled(this.isDisabled);
+		inject(DestroyRef).onDestroy(() => {
+			clearTimeout(this._debounce);
+			clearTimeout(this._blurTimer);
+		});
 	}
 	dropdown = input(false, {
 		...ngDevMode ? { debugName: "dropdown" } : /* istanbul ignore next */ {},
@@ -27578,6 +27589,7 @@ var AutoCompleteComponent = class AutoCompleteComponent {
 	_onChange = () => {};
 	_onTouched = () => {};
 	_debounce;
+	_blurTimer;
 	itemRef = contentChild("item", ...ngDevMode ? [{ debugName: "itemRef" }] : /* istanbul ignore next */ []);
 	groupRef = contentChild("group", ...ngDevMode ? [{ debugName: "groupRef" }] : /* istanbul ignore next */ []);
 	headerRef = contentChild("header", ...ngDevMode ? [{ debugName: "headerRef" }] : /* istanbul ignore next */ []);
@@ -27660,7 +27672,7 @@ var AutoCompleteComponent = class AutoCompleteComponent {
 		return this.open() ? "border-primary" : "border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)";
 	}, ...ngDevMode ? [{ debugName: "wrapperClass" }] : /* istanbul ignore next */ []);
 	getLabel(item) {
-		if (!item) return "";
+		if (item == null || item === "") return "";
 		if (typeof item !== "object") return String(item);
 		return String(item[this.field()] ?? item);
 	}
@@ -27699,7 +27711,8 @@ var AutoCompleteComponent = class AutoCompleteComponent {
 	}
 	_handleBlur() {
 		this.blurEvent.emit();
-		setTimeout(() => {
+		clearTimeout(this._blurTimer);
+		this._blurTimer = setTimeout(() => {
 			if (this.forceSelection() && this.flatSuggestions().length === 0) this.query = "";
 			this._open.set(false);
 			this._onTouched();
@@ -27716,7 +27729,7 @@ var AutoCompleteComponent = class AutoCompleteComponent {
 		} else if (e.key === "Enter") {
 			e.preventDefault();
 			const idx = this.activeIndex();
-			if (idx >= 0) this.selectItem(e, this.flatSuggestions()[idx]);
+			if (idx >= 0 && idx < len) this.selectItem(e, this.flatSuggestions()[idx]);
 		} else if (e.key === "Escape") this._open.set(false);
 		else if (e.key === "Backspace" && this.multiple() && this.query === "" && this.selectedItems().length) this.removeChip(this.selectedItems().length - 1, e);
 	}
@@ -27780,7 +27793,7 @@ var AutoCompleteComponent = class AutoCompleteComponent {
 		if (this.multiple()) this._selectedItems.set(Array.isArray(val) ? val : []);
 		else {
 			this._value.set(val);
-			this.query = val ? this.getLabel(val) : "";
+			this.query = this.getLabel(val);
 		}
 	}
 	registerOnChange(fn) {
@@ -28157,6 +28170,8 @@ var AutoCompleteComponent = class AutoCompleteComponent {
               class="flex-1 min-w-[6rem] text-sm bg-transparent focus:outline-none text-(--f-form-field-color) placeholder:text-(--f-form-field-placeholder-color)"
               [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
               [attr.aria-label]="ariaLabel() || null"
+              [attr.disabled]="isDisabled() ? '' : null"
+              [disabled]="isDisabled()"
               [(ngModel)]="query"
               (ngModelChange)="onQueryChange($event)"
               (keydown)="onKeyDown($event)"
@@ -28199,6 +28214,8 @@ var AutoCompleteComponent = class AutoCompleteComponent {
             [class.pr-12!]="dropdown() && showClear() && !!query"
             [placeholder]="placeholder()"
             [attr.aria-label]="ariaLabel() || null"
+            [attr.disabled]="isDisabled() ? '' : null"
+            [disabled]="isDisabled()"
             [(ngModel)]="query"
             (ngModelChange)="onQueryChange($event)"
             (keydown)="onKeyDown($event)"
@@ -28522,6 +28539,8 @@ i0.ɵɵngDeclareClassMetadata({
               class="flex-1 min-w-[6rem] text-sm bg-transparent focus:outline-none text-(--f-form-field-color) placeholder:text-(--f-form-field-placeholder-color)"
               [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
               [attr.aria-label]="ariaLabel() || null"
+              [attr.disabled]="isDisabled() ? '' : null"
+              [disabled]="isDisabled()"
               [(ngModel)]="query"
               (ngModelChange)="onQueryChange($event)"
               (keydown)="onKeyDown($event)"
@@ -28564,6 +28583,8 @@ i0.ɵɵngDeclareClassMetadata({
             [class.pr-12!]="dropdown() && showClear() && !!query"
             [placeholder]="placeholder()"
             [attr.aria-label]="ariaLabel() || null"
+            [attr.disabled]="isDisabled() ? '' : null"
+            [disabled]="isDisabled()"
             [(ngModel)]="query"
             (ngModelChange)="onQueryChange($event)"
             (keydown)="onKeyDown($event)"