primeng 22.1.4 → 22.1.5

package/fesm2022/primeng-select.mjs

@@ -6,7 +6,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { ChevronDown } from "@primeicons/angular/chevron-down";
 import { Search } from "@primeicons/angular/search";
 import { Times } from "@primeicons/angular/times";
-import { deepEquals, equals, findLastIndex, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, isEmpty, isNotEmpty, isPrintableCharacter, isScalar, resolveFieldData, scrollInView } from "@primeuix/utils";
+import { deepEquals, equals, findLastIndex, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, isEmpty, isNotEmpty, isObject, isPrintableCharacter, isScalar, resolveFieldData, scrollInView } from "@primeuix/utils";
 import { FilterService, SharedModule, TranslationKeys } from "primeng/api";
 import { AutoFocus } from "primeng/autofocus";
 import { BaseComponent, PARENT_INSTANCE } from "primeng/basecomponent";
@@ -71,7 +71,7 @@ var SelectStyle = class SelectStyle extends BaseStyle {
 	classes = classes;
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectStyle,
 		deps: null,
@@ -79,14 +79,14 @@ var SelectStyle = class SelectStyle extends BaseStyle {
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectStyle
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.5",
 	ngImport: i0,
 	type: SelectStyle,
 	decorators: [{ type: Injectable }]
@@ -164,7 +164,7 @@ var SelectItem = class SelectItem extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectItem,
 		deps: null,
@@ -172,7 +172,7 @@ var SelectItem = class SelectItem extends BaseComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		type: SelectItem,
 		isStandalone: true,
 		selector: "p-select-item",
@@ -350,7 +350,7 @@ var SelectItem = class SelectItem extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.5",
 	ngImport: i0,
 	type: SelectItem,
 	decorators: [{
@@ -739,7 +739,8 @@ var Select = class Select extends BaseInput {
 	emptyFilterMessageText = computed(() => this.emptyFilterMessage() || this.translation()?.emptySearchMessage || this.translation()?.emptyFilterMessage || "", ...ngDevMode ? [{ debugName: "emptyFilterMessageText" }] : /* istanbul ignore next */ []);
 	filterResultMessageText = computed(() => {
 		const count = this.visibleOptions()?.filter((option) => !this.isOptionGroup(option)).length ?? 0;
-		return count ? this.filterMessageText().replaceAll("{0}", String(count)) : this.emptyFilterMessageText();
+		if (count) return this.filterMessageText().replaceAll("{0}", String(count));
+		return this._filterValue() ? this.emptyFilterMessageText() : this.emptyMessageLabel() || this.emptyFilterMessageText();
 	}, ...ngDevMode ? [{ debugName: "filterResultMessageText" }] : /* istanbul ignore next */ []);
 	selectionMessageText = computed(() => this.selectionMessage() || this.translation()?.selectionMessage || "", ...ngDevMode ? [{ debugName: "selectionMessageText" }] : /* istanbul ignore next */ []);
 	emptySelectionMessageText = computed(() => this.emptySelectionMessage() || this.translation()?.emptySelectionMessage || "", ...ngDevMode ? [{ debugName: "emptySelectionMessageText" }] : /* istanbul ignore next */ []);
@@ -788,9 +789,16 @@ var Select = class Select extends BaseInput {
 			const currentValue = this.modelValue();
 			if (!Array.isArray(currentValue) || currentValue.length === 0) return this.placeholder() || "p-emptylabel";
 			const options = this.getAllVisibleAndNonVisibleOptions();
+			const optionsByValue = /* @__PURE__ */ new Map();
+			options.forEach((option) => {
+				if (this.isOptionGroup(option)) return;
+				const value = this.getOptionValue(option);
+				if (!optionsByValue.has(value)) optionsByValue.set(value, option);
+			});
 			return currentValue.map((val) => {
-				const opt = options.find((o) => !this.isOptionGroup(o) && equals(val, this.getOptionValue(o), this.equalityKey()));
-				return opt ? this.getOptionLabel(opt) : String(val);
+				const opt = optionsByValue.get(val) ?? options.find((o) => !this.isOptionGroup(o) && equals(val, this.getOptionValue(o), this.equalityKey()));
+				if (opt) return this.getOptionLabel(opt);
+				return isObject(val) ? this.getOptionLabel(val) : String(val);
 			}).filter(Boolean).join(", ");
 		}
 		const options = this.getAllVisibleAndNonVisibleOptions();
@@ -807,8 +815,7 @@ var Select = class Select extends BaseInput {
 	$ariaMultiselectable = computed(() => this.multiple() || void 0, ...ngDevMode ? [{ debugName: "$ariaMultiselectable" }] : /* istanbul ignore next */ []);
 	$ariaReadonly = computed(() => this.readonly() || void 0, ...ngDevMode ? [{ debugName: "$ariaReadonly" }] : /* istanbul ignore next */ []);
 	$placeholder = computed(() => {
-		const modelVal = this.modelValue();
-		return modelVal === void 0 || modelVal === null ? this.placeholder() : void 0;
+		return (this.modelValue() ?? "") === "" ? this.placeholder() : void 0;
 	}, ...ngDevMode ? [{ debugName: "$placeholder" }] : /* istanbul ignore next */ []);
 	$required = computed(() => this.required() ? "" : void 0, ...ngDevMode ? [{ debugName: "$required" }] : /* istanbul ignore next */ []);
 	$readonly = computed(() => this.readonly() ? "" : void 0, ...ngDevMode ? [{ debugName: "$readonly" }] : /* istanbul ignore next */ []);
@@ -834,7 +841,14 @@ var Select = class Select extends BaseInput {
 		$implicit: this.visibleOptions(),
 		options: {}
 	}), ...ngDevMode ? [{ debugName: "defaultBuildInItemsContext" }] : /* istanbul ignore next */ []);
-	ariaSetSize = computed(() => this.visibleOptions().filter((option) => !this.isOptionGroup(option)).length, ...ngDevMode ? [{ debugName: "ariaSetSize" }] : /* istanbul ignore next */ []);
+	ariaSetSize = computed(() => this.visibleOptions().length - this.groupIndexes().length, ...ngDevMode ? [{ debugName: "ariaSetSize" }] : /* istanbul ignore next */ []);
+	groupIndexes = computed(() => {
+		const indexes = [];
+		this.visibleOptions().forEach((option, index) => {
+			if (this.isOptionGroup(option)) indexes.push(index);
+		});
+		return indexes;
+	}, ...ngDevMode ? [{ debugName: "groupIndexes" }] : /* istanbul ignore next */ []);
 	containerDataP = computed(() => this.cn({
 		invalid: this.invalid(),
 		disabled: this.$disabled(),
@@ -860,10 +874,11 @@ var Select = class Select extends BaseInput {
 			const visibleOptions = this.visibleOptions();
 			if (visibleOptions && isNotEmpty(visibleOptions)) {
 				const selectedOptionIndex = this.findSelectedOptionIndex();
-				if (selectedOptionIndex !== -1 || modelValue === void 0 || typeof modelValue === "string" && modelValue.length === 0 || this.isModelValueNotSet() || this.editable()) this.selectedOption.set(visibleOptions[selectedOptionIndex]);
+				if (selectedOptionIndex !== -1 || modelValue === void 0 || typeof modelValue === "string" && modelValue.length === 0 || this.isModelValueNotSet()) this.selectedOption.set(visibleOptions[selectedOptionIndex]);
 				else {
 					const disabledSelectedIndex = visibleOptions.findIndex((option) => this.isSelected(option));
 					if (disabledSelectedIndex !== -1) this.selectedOption.set(visibleOptions[disabledSelectedIndex]);
+					else if (this.editable()) this.selectedOption.set(this.getAllVisibleAndNonVisibleOptions().find((option) => this.isSelected(option)));
 				}
 			}
 			if (isEmpty(visibleOptions) && (modelValue === void 0 || this.isModelValueNotSet()) && isNotEmpty(this.selectedOption())) this.selectedOption.set(null);
@@ -978,7 +993,8 @@ var Select = class Select extends BaseInput {
 			this.focusedOptionIndex.set(this.findSelectedOptionIndex());
 			if (preventChange === false) this.onChange.emit({
 				originalEvent: event,
-				value
+				value,
+				option
 			});
 		}
 		if (isHide) this.hide(true);
@@ -1019,7 +1035,12 @@ var Select = class Select extends BaseInput {
 		if (this.editable()) this.updateEditableLabel();
 	}
 	updateEditableLabel() {
-		if (this.editableInputViewChild()) this.editableInputViewChild().nativeElement.value = this.getOptionLabel(this.selectedOption()) || this.getValueLabel(this.modelValue()) || this.modelValue() || "";
+		if (this.editableInputViewChild()) {
+			const modelValue = this.modelValue();
+			const optionLabel = this.getOptionLabel(this.selectedOption());
+			const valueLabel = this.getValueLabel(modelValue);
+			this.editableInputViewChild().nativeElement.value = optionLabel || valueLabel || (isObject(modelValue) ? "" : modelValue) || "";
+		}
 	}
 	clearEditableLabel() {
 		if (this.editableInputViewChild()) this.editableInputViewChild().nativeElement.value = "";
@@ -1064,7 +1085,7 @@ var Select = class Select extends BaseInput {
 		return this.optionGroupChildren() !== void 0 && this.optionGroupChildren() !== null ? resolveFieldData(optionGroup, this.optionGroupChildren()) : optionGroup.items;
 	}
 	getAriaPosInset(index) {
-		return (this.optionGroupLabel() ? index - this.visibleOptions().slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
+		return index - this.groupIndexes().filter((groupIndex) => groupIndex < index).length + 1;
 	}
 	resetFilter() {
 		this._filterValue.set(null);
@@ -1089,10 +1110,14 @@ var Select = class Select extends BaseInput {
 		this.searchValue = "";
 		if (!this.searchOptions(event, value, false)) this.focusedOptionIndex.set(-1);
 		this.updateModel(value || null, event);
+		const selectedIndex = this.findSelectedOptionIndex();
+		const option = selectedIndex !== -1 ? this.visibleOptions()[selectedIndex] : null;
+		clearTimeout(this.changeTimeout);
 		this.changeTimeout = setTimeout(() => {
 			this.onChange.emit({
 				originalEvent: event,
-				value
+				value,
+				option
 			});
 		}, 1);
 		if (!this.overlayVisible() && isNotEmpty(value)) this.show();
@@ -1476,10 +1501,10 @@ var Select = class Select extends BaseInput {
 		return matched;
 	}
 	isOptionExactMatched(option) {
-		return this.isValidOption(option) && this.getOptionLabel(option).toString().toLocaleLowerCase(this.filterLocale()) === (this.searchValue ?? "").toLocaleLowerCase(this.filterLocale());
+		return this.isValidOption(option) && this.getOptionLabel(option)?.toString().toLocaleLowerCase(this.filterLocale()) === (this.searchValue ?? "").toLocaleLowerCase(this.filterLocale());
 	}
 	isOptionMatched(option) {
-		return this.isValidOption(option) && this.getOptionLabel(option).toString().toLocaleLowerCase(this.filterLocale()).startsWith((this.searchValue ?? "").toLocaleLowerCase(this.filterLocale()));
+		return this.isValidOption(option) && this.getOptionLabel(option)?.toString().toLocaleLowerCase(this.filterLocale()).startsWith((this.searchValue ?? "").toLocaleLowerCase(this.filterLocale()));
 	}
 	onFilterInputChange(event) {
 		let value = event.target.value;
@@ -1524,7 +1549,8 @@ var Select = class Select extends BaseInput {
 		this.onModelTouched();
 		this.onChange.emit({
 			originalEvent: event,
-			value: this.value
+			value: this.value,
+			option: null
 		});
 		this.onClear.emit(event);
 		this.resetFilter();
@@ -1537,7 +1563,7 @@ var Select = class Select extends BaseInput {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: Select,
 		deps: [],
@@ -1545,7 +1571,7 @@ var Select = class Select extends BaseInput {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		type: Select,
 		isStandalone: true,
 		selector: "p-select",
@@ -2178,7 +2204,7 @@ var Select = class Select extends BaseInput {
                 [attr.aria-haspopup]="'listbox'"
                 [attr.aria-expanded]="$ariaExpanded"
                 [attr.aria-controls]="$ariaControls()"
-                [attr.placeholder]="$placeholder()"
+                [attr.placeholder]="placeholder()"
                 [attr.aria-label]="ariaLabel()"
                 [attr.aria-labelledby]="ariaLabelledBy()"
                 (input)="onEditableInput($event)"
@@ -2334,6 +2360,8 @@ var Select = class Select extends BaseInput {
                         }
 
                         <ng-template #buildInItems let-items let-scrollerOptions="options">
+                            @let itemTemplateRef = itemTemplate();
+                            @let groupTemplateRef = groupTemplate();
                             <ul
                                 #items
                                 [attr.id]="$id() + '_list'"
@@ -2347,10 +2375,10 @@ var Select = class Select extends BaseInput {
                                 @for (option of items; track trackOption(option, i); let i = $index) {
                                     @if (isOptionGroup(option)) {
                                         <li [class]="cx('optionGroup')" [attr.id]="$id() + '_' + getOptionIndex(i, scrollerOptions)" [style]="getItemSizeStyle(scrollerOptions)" role="presentation" [pBind]="ptm('optionGroup')">
-                                            @if (!groupTemplate()) {
+                                            @if (!groupTemplateRef) {
                                                 <span [class]="cx('optionGroupLabel')" [pBind]="ptm('optionGroupLabel')">{{ getOptionGroupLabel(option.optionGroup) }}</span>
                                             }
-                                            <ng-container *ngTemplateOutlet="groupTemplate(); context: getGroupContext(option.optionGroup)"></ng-container>
+                                            <ng-container *ngTemplateOutlet="groupTemplateRef; context: getGroupContext(option.optionGroup)"></ng-container>
                                         </li>
                                     } @else {
                                         <p-select-item
@@ -2360,7 +2388,7 @@ var Select = class Select extends BaseInput {
                                             [selected]="isSelected(option)"
                                             [label]="getOptionLabel(option)"
                                             [disabled]="isOptionDisabled(option)"
-                                            [template]="itemTemplate()"
+                                            [template]="itemTemplateRef"
                                             [focused]="isOptionFocused(i, scrollerOptions)"
                                             [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
                                             [ariaSetSize]="ariaSetSize()"
@@ -2620,7 +2648,7 @@ var Select = class Select extends BaseInput {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.5",
 	ngImport: i0,
 	type: Select,
 	decorators: [{
@@ -2696,7 +2724,7 @@ i0.ɵɵngDeclareClassMetadata({
                 [attr.aria-haspopup]="'listbox'"
                 [attr.aria-expanded]="$ariaExpanded"
                 [attr.aria-controls]="$ariaControls()"
-                [attr.placeholder]="$placeholder()"
+                [attr.placeholder]="placeholder()"
                 [attr.aria-label]="ariaLabel()"
                 [attr.aria-labelledby]="ariaLabelledBy()"
                 (input)="onEditableInput($event)"
@@ -2852,6 +2880,8 @@ i0.ɵɵngDeclareClassMetadata({
                         }
 
                         <ng-template #buildInItems let-items let-scrollerOptions="options">
+                            @let itemTemplateRef = itemTemplate();
+                            @let groupTemplateRef = groupTemplate();
                             <ul
                                 #items
                                 [attr.id]="$id() + '_list'"
@@ -2865,10 +2895,10 @@ i0.ɵɵngDeclareClassMetadata({
                                 @for (option of items; track trackOption(option, i); let i = $index) {
                                     @if (isOptionGroup(option)) {
                                         <li [class]="cx('optionGroup')" [attr.id]="$id() + '_' + getOptionIndex(i, scrollerOptions)" [style]="getItemSizeStyle(scrollerOptions)" role="presentation" [pBind]="ptm('optionGroup')">
-                                            @if (!groupTemplate()) {
+                                            @if (!groupTemplateRef) {
                                                 <span [class]="cx('optionGroupLabel')" [pBind]="ptm('optionGroupLabel')">{{ getOptionGroupLabel(option.optionGroup) }}</span>
                                             }
-                                            <ng-container *ngTemplateOutlet="groupTemplate(); context: getGroupContext(option.optionGroup)"></ng-container>
+                                            <ng-container *ngTemplateOutlet="groupTemplateRef; context: getGroupContext(option.optionGroup)"></ng-container>
                                         </li>
                                     } @else {
                                         <p-select-item
@@ -2878,7 +2908,7 @@ i0.ɵɵngDeclareClassMetadata({
                                             [selected]="isSelected(option)"
                                             [label]="getOptionLabel(option)"
                                             [disabled]="isOptionDisabled(option)"
-                                            [template]="itemTemplate()"
+                                            [template]="itemTemplateRef"
                                             [focused]="isOptionFocused(i, scrollerOptions)"
                                             [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
                                             [ariaSetSize]="ariaSetSize()"
@@ -3583,7 +3613,7 @@ i0.ɵɵngDeclareClassMetadata({
 var SelectModule = class SelectModule {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectModule,
 		deps: [],
@@ -3591,7 +3621,7 @@ var SelectModule = class SelectModule {
 	});
 	static ɵmod = i0.ɵɵngDeclareNgModule({
 		minVersion: "14.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectModule,
 		imports: [Select, SharedModule],
@@ -3599,7 +3629,7 @@ var SelectModule = class SelectModule {
 	});
 	static ɵinj = i0.ɵɵngDeclareInjector({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectModule,
 		imports: [
@@ -3611,7 +3641,7 @@ var SelectModule = class SelectModule {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.5",
 	ngImport: i0,
 	type: SelectModule,
 	decorators: [{

package/fesm2022/primeng-selectbutton.mjs

@@ -23,7 +23,7 @@ var SelectButtonStyle = class SelectButtonStyle extends BaseStyle {
 	classes = classes;
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectButtonStyle,
 		deps: null,
@@ -31,14 +31,14 @@ var SelectButtonStyle = class SelectButtonStyle extends BaseStyle {
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectButtonStyle
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.5",
 	ngImport: i0,
 	type: SelectButtonStyle,
 	decorators: [{ type: Injectable }]
@@ -204,7 +204,7 @@ var SelectButton = class SelectButton extends BaseEditableHolder {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectButton,
 		deps: null,
@@ -212,7 +212,7 @@ var SelectButton = class SelectButton extends BaseEditableHolder {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		type: SelectButton,
 		isStandalone: true,
 		selector: "p-selectbutton, p-select-button",
@@ -353,6 +353,7 @@ var SelectButton = class SelectButton extends BaseEditableHolder {
                 [autofocus]="autofocus()"
                 [class]="styleClass()"
                 [ngModel]="isSelected(option)"
+                [ngModelOptions]="{ standalone: true }"
                 [onLabel]="getOptionLabel(option)"
                 [offLabel]="getOptionLabel(option)"
                 [ariaLabel]="getOptionLabel(option)"
@@ -442,7 +443,7 @@ var SelectButton = class SelectButton extends BaseEditableHolder {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.5",
 	ngImport: i0,
 	type: SelectButton,
 	decorators: [{
@@ -463,6 +464,7 @@ i0.ɵɵngDeclareClassMetadata({
                 [autofocus]="autofocus()"
                 [class]="styleClass()"
                 [ngModel]="isSelected(option)"
+                [ngModelOptions]="{ standalone: true }"
                 [onLabel]="getOptionLabel(option)"
                 [offLabel]="getOptionLabel(option)"
                 [ariaLabel]="getOptionLabel(option)"
@@ -638,7 +640,7 @@ i0.ɵɵngDeclareClassMetadata({
 var SelectButtonModule = class SelectButtonModule {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectButtonModule,
 		deps: [],
@@ -646,7 +648,7 @@ var SelectButtonModule = class SelectButtonModule {
 	});
 	static ɵmod = i0.ɵɵngDeclareNgModule({
 		minVersion: "14.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectButtonModule,
 		imports: [SelectButton, SharedModule],
@@ -654,7 +656,7 @@ var SelectButtonModule = class SelectButtonModule {
 	});
 	static ɵinj = i0.ɵɵngDeclareInjector({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: SelectButtonModule,
 		imports: [
@@ -666,7 +668,7 @@ var SelectButtonModule = class SelectButtonModule {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.5",
 	ngImport: i0,
 	type: SelectButtonModule,
 	decorators: [{