@flusys/ng-ui 9.1.1 → 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;
@@ -6927,6 +6933,45 @@ function attachOverlayPosition(anchor, panel, options = {}) {
 		if (placement.width !== null) panel.style.width = `${placement.width}px`;
 	});
 }
+var OverflowTitleDirective = class OverflowTitleDirective {
+	el = inject(ElementRef);
+	sync() {
+		const el = this.el.nativeElement;
+		const text = el.textContent?.trim() ?? "";
+		if (text && el.scrollWidth > el.clientWidth) el.title = text;
+		else el.removeAttribute("title");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OverflowTitleDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: OverflowTitleDirective,
+		isStandalone: true,
+		selector: "[fOverflowTitle]",
+		host: { listeners: { "mouseenter": "sync()" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OverflowTitleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[fOverflowTitle]",
+			host: { "(mouseenter)": "sync()" }
+		}]
+	}]
+});
 var SelectComponent = class SelectComponent {
 	_el = inject(ElementRef);
 	constructor() {
@@ -7765,14 +7810,14 @@ var SelectComponent = class SelectComponent {
             (click)="$event.stopPropagation()"
           />
         } @else if (selectedItemTpl() && selectedOption() != null) {
-          <span class="flex-1 min-w-0 truncate text-left">
+          <span fOverflowTitle class="flex-1 min-w-0 truncate text-left">
             <ng-container
               [ngTemplateOutlet]="selectedItemTpl()"
               [ngTemplateOutletContext]="{ $implicit: selectedOption() }"
             />
           </span>
         } @else {
-          <span
+          <span fOverflowTitle
             data-select-label
             class="flex-1 min-w-0 truncate text-left"
             [class.text-(--f-form-field-placeholder-color)]="!selectedLabel()"
@@ -7921,7 +7966,7 @@ var SelectComponent = class SelectComponent {
           @if (checkmark() && getOptionValue(item.option) === value()) {
             <ui-icon name="check" class="text-xs shrink-0"></ui-icon>
           }
-          <span class="flex-1 truncate">
+          <span fOverflowTitle class="flex-1 truncate">
             @if (itemTpl()) {
               <ng-container
                 [ngTemplateOutlet]="itemTpl()"
@@ -7968,6 +8013,11 @@ var SelectComponent = class SelectComponent {
   `,
 		isInline: true,
 		dependencies: [
+			{
+				kind: "directive",
+				type: OverflowTitleDirective,
+				selector: "[fOverflowTitle]"
+			},
 			{
 				kind: "component",
 				type: UiIconComponent,
@@ -8021,6 +8071,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "f-select",
 			imports: [
+				OverflowTitleDirective,
 				UiIconComponent,
 				NgTemplateOutlet,
 				ScrollerComponent
@@ -8069,14 +8120,14 @@ i0.ɵɵngDeclareClassMetadata({
             (click)="$event.stopPropagation()"
           />
         } @else if (selectedItemTpl() && selectedOption() != null) {
-          <span class="flex-1 min-w-0 truncate text-left">
+          <span fOverflowTitle class="flex-1 min-w-0 truncate text-left">
             <ng-container
               [ngTemplateOutlet]="selectedItemTpl()"
               [ngTemplateOutletContext]="{ $implicit: selectedOption() }"
             />
           </span>
         } @else {
-          <span
+          <span fOverflowTitle
             data-select-label
             class="flex-1 min-w-0 truncate text-left"
             [class.text-(--f-form-field-placeholder-color)]="!selectedLabel()"
@@ -8225,7 +8276,7 @@ i0.ɵɵngDeclareClassMetadata({
           @if (checkmark() && getOptionValue(item.option) === value()) {
             <ui-icon name="check" class="text-xs shrink-0"></ui-icon>
           }
-          <span class="flex-1 truncate">
+          <span fOverflowTitle class="flex-1 truncate">
             @if (itemTpl()) {
               <ng-container
                 [ngTemplateOutlet]="itemTpl()"
@@ -9502,12 +9553,12 @@ var MultiSelectComponent = class MultiSelectComponent {
       >
         @if (selectedLabels().length) {
           @if (display() === 'comma') {
-            <span
+            <span fOverflowTitle
               class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
               >{{ commaLabel() }}</span
             >
           } @else if (selectedLabels().length > maxSelectedLabels()) {
-            <span
+            <span fOverflowTitle
               class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
               >{{ selectedLabels().length }} items selected</span
             >
@@ -9628,7 +9679,7 @@ var MultiSelectComponent = class MultiSelectComponent {
                   ></ui-icon>
                 }
               </div>
-              <span class="flex-1 truncate font-medium">Select All</span>
+              <span fOverflowTitle class="flex-1 truncate font-medium">Select All</span>
             </button>
           }
           <div
@@ -9724,7 +9775,7 @@ var MultiSelectComponent = class MultiSelectComponent {
               ></ui-icon>
             }
           </div>
-          <span class="flex-1 truncate">
+          <span fOverflowTitle class="flex-1 truncate">
             @if (itemTpl()) {
               <ng-container
                 [ngTemplateOutlet]="itemTpl()"
@@ -9768,6 +9819,11 @@ var MultiSelectComponent = class MultiSelectComponent {
   `,
 		isInline: true,
 		dependencies: [
+			{
+				kind: "directive",
+				type: OverflowTitleDirective,
+				selector: "[fOverflowTitle]"
+			},
 			{
 				kind: "component",
 				type: UiIconComponent,
@@ -9821,6 +9877,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "f-multiselect",
 			imports: [
+				OverflowTitleDirective,
 				UiIconComponent,
 				NgTemplateOutlet,
 				ScrollerComponent
@@ -9856,12 +9913,12 @@ i0.ɵɵngDeclareClassMetadata({
       >
         @if (selectedLabels().length) {
           @if (display() === 'comma') {
-            <span
+            <span fOverflowTitle
               class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
               >{{ commaLabel() }}</span
             >
           } @else if (selectedLabels().length > maxSelectedLabels()) {
-            <span
+            <span fOverflowTitle
               class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
               >{{ selectedLabels().length }} items selected</span
             >
@@ -9982,7 +10039,7 @@ i0.ɵɵngDeclareClassMetadata({
                   ></ui-icon>
                 }
               </div>
-              <span class="flex-1 truncate font-medium">Select All</span>
+              <span fOverflowTitle class="flex-1 truncate font-medium">Select All</span>
             </button>
           }
           <div
@@ -10078,7 +10135,7 @@ i0.ɵɵngDeclareClassMetadata({
               ></ui-icon>
             }
           </div>
-          <span class="flex-1 truncate">
+          <span fOverflowTitle class="flex-1 truncate">
             @if (itemTpl()) {
               <ng-container
                 [ngTemplateOutlet]="itemTpl()"
@@ -20970,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);
 		}
@@ -20989,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;
@@ -27435,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 */ {},
@@ -27527,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 */ []);
@@ -27609,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);
 	}
@@ -27648,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();
@@ -27665,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);
 	}
@@ -27729,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) {
@@ -28106,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)"
@@ -28148,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)"
@@ -28256,7 +28324,7 @@ var AutoCompleteComponent = class AutoCompleteComponent {
                       [ngTemplateOutletContext]="{ $implicit: item, index: i }"
                     />
                   } @else {
-                    <span class="flex-1 truncate">{{ getLabel(item) }}</span>
+                    <span fOverflowTitle class="flex-1 truncate">{{ getLabel(item) }}</span>
                   }
                 </div>
               </ng-template>
@@ -28306,7 +28374,7 @@ var AutoCompleteComponent = class AutoCompleteComponent {
                         }"
                       />
                     } @else {
-                      <span class="flex-1 truncate">{{
+                      <span fOverflowTitle class="flex-1 truncate">{{
                         getLabel(row.item)
                       }}</span>
                     }
@@ -28327,6 +28395,11 @@ var AutoCompleteComponent = class AutoCompleteComponent {
   `,
 		isInline: true,
 		dependencies: [
+			{
+				kind: "directive",
+				type: OverflowTitleDirective,
+				selector: "[fOverflowTitle]"
+			},
 			{
 				kind: "component",
 				type: UiIconComponent,
@@ -28407,6 +28480,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "f-autocomplete",
 			imports: [
+				OverflowTitleDirective,
 				UiIconComponent,
 				FormsModule,
 				NgTemplateOutlet,
@@ -28465,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)"
@@ -28507,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)"
@@ -28615,7 +28693,7 @@ i0.ɵɵngDeclareClassMetadata({
                       [ngTemplateOutletContext]="{ $implicit: item, index: i }"
                     />
                   } @else {
-                    <span class="flex-1 truncate">{{ getLabel(item) }}</span>
+                    <span fOverflowTitle class="flex-1 truncate">{{ getLabel(item) }}</span>
                   }
                 </div>
               </ng-template>
@@ -28665,7 +28743,7 @@ i0.ɵɵngDeclareClassMetadata({
                         }"
                       />
                     } @else {
-                      <span class="flex-1 truncate">{{
+                      <span fOverflowTitle class="flex-1 truncate">{{
                         getLabel(row.item)
                       }}</span>
                     }
@@ -30136,7 +30214,7 @@ var ListboxComponent = class ListboxComponent {
               <ui-icon name="check" class="text-[9px] text-primary-contrast"></ui-icon>
             }
           </div>
-          <span class="flex-1 truncate font-medium">Select All</span>
+          <span fOverflowTitle class="flex-1 truncate font-medium">Select All</span>
         </button>
       }
 
@@ -30218,7 +30296,7 @@ var ListboxComponent = class ListboxComponent {
               <span class="w-3 h-3 shrink-0"></span>
             }
           }
-          <span class="flex-1 truncate">
+          <span fOverflowTitle class="flex-1 truncate">
             @if (itemTpl()) {
               <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item.option }" />
             } @else {
@@ -30231,6 +30309,11 @@ var ListboxComponent = class ListboxComponent {
   `,
 		isInline: true,
 		dependencies: [
+			{
+				kind: "directive",
+				type: OverflowTitleDirective,
+				selector: "[fOverflowTitle]"
+			},
 			{
 				kind: "component",
 				type: UiIconComponent,
@@ -30284,6 +30367,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "f-listbox",
 			imports: [
+				OverflowTitleDirective,
 				UiIconComponent,
 				NgTemplateOutlet,
 				ScrollerComponent
@@ -30338,7 +30422,7 @@ i0.ɵɵngDeclareClassMetadata({
               <ui-icon name="check" class="text-[9px] text-primary-contrast"></ui-icon>
             }
           </div>
-          <span class="flex-1 truncate font-medium">Select All</span>
+          <span fOverflowTitle class="flex-1 truncate font-medium">Select All</span>
         </button>
       }
 
@@ -30420,7 +30504,7 @@ i0.ɵɵngDeclareClassMetadata({
               <span class="w-3 h-3 shrink-0"></span>
             }
           }
-          <span class="flex-1 truncate">
+          <span fOverflowTitle class="flex-1 truncate">
             @if (itemTpl()) {
               <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item.option }" />
             } @else {
@@ -31858,7 +31942,7 @@ var TreeSelectComponent = class TreeSelectComponent {
         (keydown)="onTriggerKeyDown($event)"
       >
         @if (valueTpl()) {
-          <span class="flex-1 min-w-0 truncate text-left text-sm">
+          <span fOverflowTitle class="flex-1 min-w-0 truncate text-left text-sm">
             <ng-container
               [ngTemplateOutlet]="valueTpl()"
               [ngTemplateOutletContext]="{
@@ -31868,7 +31952,7 @@ var TreeSelectComponent = class TreeSelectComponent {
             />
           </span>
         } @else if (selectionMode() === 'single') {
-          <span
+          <span fOverflowTitle
             class="truncate text-sm"
             [class.text-(--f-form-field-placeholder-color)]="
               !selectedLabels().length
@@ -31899,7 +31983,7 @@ var TreeSelectComponent = class TreeSelectComponent {
             }
           </div>
         } @else if (selectedLabels().length) {
-          <span class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{
+          <span fOverflowTitle class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{
             selectedLabels().join(', ')
           }}</span>
         } @else {
@@ -32063,12 +32147,17 @@ var TreeSelectComponent = class TreeSelectComponent {
             class="text-xs text-(--f-text-muted-color) shrink-0"
           ></ui-icon>
         }
-        <span class="flex-1 truncate" [class.font-medium]="row.node.selectable === false">{{ row.node.label }}</span>
+        <span fOverflowTitle class="flex-1 truncate" [class.font-medium]="row.node.selectable === false">{{ row.node.label }}</span>
       </div>
     </ng-template>
   `,
 		isInline: true,
 		dependencies: [
+			{
+				kind: "directive",
+				type: OverflowTitleDirective,
+				selector: "[fOverflowTitle]"
+			},
 			{
 				kind: "component",
 				type: UiIconComponent,
@@ -32122,6 +32211,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "f-treeselect",
 			imports: [
+				OverflowTitleDirective,
 				UiIconComponent,
 				NgTemplateOutlet,
 				ScrollerComponent
@@ -32151,7 +32241,7 @@ i0.ɵɵngDeclareClassMetadata({
         (keydown)="onTriggerKeyDown($event)"
       >
         @if (valueTpl()) {
-          <span class="flex-1 min-w-0 truncate text-left text-sm">
+          <span fOverflowTitle class="flex-1 min-w-0 truncate text-left text-sm">
             <ng-container
               [ngTemplateOutlet]="valueTpl()"
               [ngTemplateOutletContext]="{
@@ -32161,7 +32251,7 @@ i0.ɵɵngDeclareClassMetadata({
             />
           </span>
         } @else if (selectionMode() === 'single') {
-          <span
+          <span fOverflowTitle
             class="truncate text-sm"
             [class.text-(--f-form-field-placeholder-color)]="
               !selectedLabels().length
@@ -32192,7 +32282,7 @@ i0.ɵɵngDeclareClassMetadata({
             }
           </div>
         } @else if (selectedLabels().length) {
-          <span class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{
+          <span fOverflowTitle class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{
             selectedLabels().join(', ')
           }}</span>
         } @else {
@@ -32356,7 +32446,7 @@ i0.ɵɵngDeclareClassMetadata({
             class="text-xs text-(--f-text-muted-color) shrink-0"
           ></ui-icon>
         }
-        <span class="flex-1 truncate" [class.font-medium]="row.node.selectable === false">{{ row.node.label }}</span>
+        <span fOverflowTitle class="flex-1 truncate" [class.font-medium]="row.node.selectable === false">{{ row.node.label }}</span>
       </div>
     </ng-template>
   `
@@ -40847,7 +40937,7 @@ var CascadeSelectComponent = class CascadeSelectComponent {
         (keydown)="onKeyDown($event)"
       >
         @if (valueTpl()) {
-          <span class="flex-1 min-w-0 truncate text-left text-sm">
+          <span fOverflowTitle class="flex-1 min-w-0 truncate text-left text-sm">
             <ng-container
               [ngTemplateOutlet]="valueTpl()"
               [ngTemplateOutletContext]="{
@@ -40857,7 +40947,7 @@ var CascadeSelectComponent = class CascadeSelectComponent {
             />
           </span>
         } @else {
-          <span
+          <span fOverflowTitle
             class="flex-1 min-w-0 truncate text-left text-sm"
             [class.text-(--f-form-field-placeholder-color)]="
               !selectedPath().length
@@ -40928,7 +41018,7 @@ var CascadeSelectComponent = class CascadeSelectComponent {
                       (click)="onOptionClick(opt, $index)"
                       (mouseenter)="onOptionHover(opt, $index)"
                     >
-                      <span class="truncate">
+                      <span fOverflowTitle class="truncate">
                         @if (getChildren(opt, $index).length && groupTpl()) {
                           <ng-container
                             [ngTemplateOutlet]="groupTpl()"
@@ -40982,27 +41072,35 @@ var CascadeSelectComponent = class CascadeSelectComponent {
     </div>
   `,
 		isInline: true,
-		dependencies: [{
-			kind: "component",
-			type: UiIconComponent,
-			selector: "ui-icon",
-			inputs: [
-				"name",
-				"size",
-				"spin",
-				"fill",
-				"severity"
-			]
-		}, {
-			kind: "directive",
-			type: NgTemplateOutlet,
-			selector: "[ngTemplateOutlet]",
-			inputs: [
-				"ngTemplateOutletContext",
-				"ngTemplateOutlet",
-				"ngTemplateOutletInjector"
-			]
-		}]
+		dependencies: [
+			{
+				kind: "directive",
+				type: OverflowTitleDirective,
+				selector: "[fOverflowTitle]"
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -41014,7 +41112,11 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "f-cascadeselect",
-			imports: [UiIconComponent, NgTemplateOutlet],
+			imports: [
+				OverflowTitleDirective,
+				UiIconComponent,
+				NgTemplateOutlet
+			],
 			providers: [{
 				provide: NG_VALUE_ACCESSOR,
 				useExisting: forwardRef(() => CascadeSelectComponent),
@@ -41040,7 +41142,7 @@ i0.ɵɵngDeclareClassMetadata({
         (keydown)="onKeyDown($event)"
       >
         @if (valueTpl()) {
-          <span class="flex-1 min-w-0 truncate text-left text-sm">
+          <span fOverflowTitle class="flex-1 min-w-0 truncate text-left text-sm">
             <ng-container
               [ngTemplateOutlet]="valueTpl()"
               [ngTemplateOutletContext]="{
@@ -41050,7 +41152,7 @@ i0.ɵɵngDeclareClassMetadata({
             />
           </span>
         } @else {
-          <span
+          <span fOverflowTitle
             class="flex-1 min-w-0 truncate text-left text-sm"
             [class.text-(--f-form-field-placeholder-color)]="
               !selectedPath().length
@@ -41121,7 +41223,7 @@ i0.ɵɵngDeclareClassMetadata({
                       (click)="onOptionClick(opt, $index)"
                       (mouseenter)="onOptionHover(opt, $index)"
                     >
-                      <span class="truncate">
+                      <span fOverflowTitle class="truncate">
                         @if (getChildren(opt, $index).length && groupTpl()) {
                           <ng-container
                             [ngTemplateOutlet]="groupTpl()"
@@ -49488,6 +49590,6 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => []
 });
-export { AURA_PRESET, AccordionComponent, AccordionContentComponent, AccordionContext, AccordionHeaderComponent, AccordionPanelComponent, AnimateOnScrollDirective, AutoCompleteComponent, AutoFocusDirective, AvatarComponent, AvatarGroupComponent, BadgeComponent, BlockUiComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CarouselComponent, CascadeSelectComponent, ChartComponent, CheckboxComponent, ChipComponent, ColorPickerComponent, ConfirmDialog, ConfirmPopupComponent, ConfirmationService, ContextMenuComponent, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_REF, DataViewComponent, DatePickerComponent, DialogComponent, DividerComponent, DockComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, EditorComponent, FButtonDirective, FTemplateDirective, FieldsetComponent, FileUploadComponent, FloatLabelComponent, FluidComponent, GalleriaComponent, IconFieldComponent, IftaLabelComponent, ImageCompareComponent, ImageComponent, InplaceComponent, InputGroupAddonComponent, InputGroupComponent, InputIconComponent, InputMaskDirective, InputNumberComponent, InputOtpComponent, InputPasswordDirective, InputTextDirective, KeyFilterDirective, KnobComponent, LARA_PRESET, ListboxComponent, MegaMenuComponent, MenuComponent, MenubarComponent, MessageComponent, MessageService, MeterGroupComponent, MultiSelectComponent, NOIR_PRIMARY, NORA_PRESET, NgUIConfig, OrderListComponent, OrganizationChartComponent, OverlayBadgeComponent, OverlayStackService, PRESETS, PRESET_NAMES, PRIMARY_PALETTES, PaginatorComponent, PanelComponent, PanelMenuComponent, PasswordComponent, PickListComponent, PopoverComponent, ProgressSpinnerComponent, ProgressbarComponent, RadioButtonComponent, RatingComponent, RippleDirective, SURFACE_PALETTES, ScrollPanelComponent, ScrollTopComponent, ScrollerComponent, SelectButtonComponent, SelectComponent, SkeletonComponent, SliderComponent, SortIconComponent, SortableColumnDirective, SpeedDialComponent, SplitButtonComponent, SplitterComponent, SplitterPanelComponent, StepsComponent, StyleClassDirective, TabComponent, TabListComponent, TabPanelComponent, TabPanelsComponent, TableComponent, TabsComponent, TabsContext, TagComponent, TerminalComponent, TextareaDirective, TieredMenuComponent, TimelineComponent, ToastComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolbarComponent, TooltipDirective, TreeComponent, TreeSelectComponent, TreeTableComponent, TreeTableService, TreeTableTogglerComponent, UiIconComponent, applyDarkSemantics, applyLightSemantics, applyPreset, applyPrimaryPalette, applySurfacePalette, applyTheme, attachOverlayPosition, buildBootstrapPreset, computeOverlayPlacement, overlayPlacementStyle, overlayPosition, provideNgUI };
+export { AURA_PRESET, AccordionComponent, AccordionContentComponent, AccordionContext, AccordionHeaderComponent, AccordionPanelComponent, AnimateOnScrollDirective, AutoCompleteComponent, AutoFocusDirective, AvatarComponent, AvatarGroupComponent, BadgeComponent, BlockUiComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CarouselComponent, CascadeSelectComponent, ChartComponent, CheckboxComponent, ChipComponent, ColorPickerComponent, ConfirmDialog, ConfirmPopupComponent, ConfirmationService, ContextMenuComponent, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_REF, DataViewComponent, DatePickerComponent, DialogComponent, DividerComponent, DockComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, EditorComponent, FButtonDirective, FTemplateDirective, FieldsetComponent, FileUploadComponent, FloatLabelComponent, FluidComponent, GalleriaComponent, IconFieldComponent, IftaLabelComponent, ImageCompareComponent, ImageComponent, InplaceComponent, InputGroupAddonComponent, InputGroupComponent, InputIconComponent, InputMaskDirective, InputNumberComponent, InputOtpComponent, InputPasswordDirective, InputTextDirective, KeyFilterDirective, KnobComponent, LARA_PRESET, ListboxComponent, MegaMenuComponent, MenuComponent, MenubarComponent, MessageComponent, MessageService, MeterGroupComponent, MultiSelectComponent, NOIR_PRIMARY, NORA_PRESET, NgUIConfig, OrderListComponent, OrganizationChartComponent, OverflowTitleDirective, OverlayBadgeComponent, OverlayStackService, PRESETS, PRESET_NAMES, PRIMARY_PALETTES, PaginatorComponent, PanelComponent, PanelMenuComponent, PasswordComponent, PickListComponent, PopoverComponent, ProgressSpinnerComponent, ProgressbarComponent, RadioButtonComponent, RatingComponent, RippleDirective, SURFACE_PALETTES, ScrollPanelComponent, ScrollTopComponent, ScrollerComponent, SelectButtonComponent, SelectComponent, SkeletonComponent, SliderComponent, SortIconComponent, SortableColumnDirective, SpeedDialComponent, SplitButtonComponent, SplitterComponent, SplitterPanelComponent, StepsComponent, StyleClassDirective, TabComponent, TabListComponent, TabPanelComponent, TabPanelsComponent, TableComponent, TabsComponent, TabsContext, TagComponent, TerminalComponent, TextareaDirective, TieredMenuComponent, TimelineComponent, ToastComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolbarComponent, TooltipDirective, TreeComponent, TreeSelectComponent, TreeTableComponent, TreeTableService, TreeTableTogglerComponent, UiIconComponent, applyDarkSemantics, applyLightSemantics, applyPreset, applyPrimaryPalette, applySurfacePalette, applyTheme, attachOverlayPosition, buildBootstrapPreset, computeOverlayPlacement, overlayPlacementStyle, overlayPosition, provideNgUI };
 
 //# sourceMappingURL=flusys-ng-ui.mjs.map