Merge branch 'ng-select:master' into master

Author: pavankjadda

eslint.config.js

@@ -34,6 +34,7 @@ module.exports = defineConfig([
 			'@angular-eslint/no-output-rename': 'off',
 			'@angular-eslint/no-output-native': 'off',
 			'@angular-eslint/prefer-standalone': 'off',
+			"@angular-eslint/no-input-rename": 'off',
 			'@angular-eslint/component-selector': [
 				'error',
 				{

src/ng-select/lib/ng-select.component.spec.ts

@@ -5505,7 +5505,7 @@ describe('User defined keyDown handler', () => {
 	};
 
 	it('should execute user function if any of defined keys was pressed', () => {
-		const spy = spyOn(fixture.componentInstance.select().keyDownFn[SIGNAL], 'value');
+		const spy = spyOn(fixture.componentInstance.select()._keyDownFn[SIGNAL], 'value');
 
 		expectSpyToBeCalledAfterKeyDown(spy, Object.keys(KeyCode).length);
 	});

src/ng-select/lib/ng-select.component.ts

@@ -17,6 +17,7 @@ import {
 	InjectionToken,
 	Injector,
 	input,
+	linkedSignal,
 	model,
 	numberAttribute,
 	OnChanges,
@@ -105,63 +106,161 @@ export class NgSelectComponent implements OnChanges, OnInit, AfterViewInit, Cont
 
 	// signals
 	public readonly _disabled = signal<boolean>(false);
-	// inputs
-	readonly ariaLabelDropdown = input<string>(undefined);
-	readonly ariaLabel = input<string | undefined>(undefined);
-	readonly markFirst = input(true, { transform: booleanAttribute });
-	readonly placeholder = input<string>(this.config.placeholder);
-	readonly fixedPlaceholder = input<boolean>(true);
-	readonly notFoundText = input<string>(undefined);
-	readonly typeToSearchText = input<string>(undefined);
-	readonly preventToggleOnRightClick = input<boolean>(false);
-	readonly addTagText = input<string>(undefined);
-	readonly loadingText = input<string>(undefined);
-	readonly clearAllText = input<string>(undefined);
-	readonly dropdownPosition = input<DropdownPosition>('auto');
-	readonly appendTo = input<string>(undefined);
-	readonly outsideClickEvent = input<'click' | 'mousedown'>(this.config.outsideClickEvent);
-	readonly loading = input(false, { transform: booleanAttribute });
-	readonly closeOnSelect = input(true, { transform: booleanAttribute });
-	readonly hideSelected = input(false, { transform: booleanAttribute });
-	readonly selectOnTab = input(false, { transform: booleanAttribute });
-	readonly openOnEnter = input(undefined, { transform: booleanAttribute });
-	readonly maxSelectedItems = input<number, unknown>(undefined, { transform: numberAttribute });
-	readonly groupBy = input<string | ((value: any) => any)>(undefined);
-	readonly groupValue = input<GroupValueFn>(undefined);
-	readonly bufferAmount = input(4, { transform: numberAttribute });
-	readonly virtualScroll = input<boolean, unknown>(undefined, { transform: booleanAttribute });
-	readonly selectableGroup = input(false, { transform: booleanAttribute });
-	readonly tabFocusOnClearButton = input<boolean | undefined>();
-	readonly selectableGroupAsModel = input(true, { transform: booleanAttribute });
-	readonly searchFn = input(null);
-	readonly trackByFn = input(null);
-	readonly clearOnBackspace = input(true, { transform: booleanAttribute });
-	readonly labelForId = input(null);
-	readonly inputAttrs = input<Record<string, string>>({});
-	readonly tabIndex = input<number, unknown>(undefined, { transform: numberAttribute });
-	readonly readonly = input(false, { transform: booleanAttribute });
-	readonly searchWhileComposing = input(true, { transform: booleanAttribute });
-	readonly minTermLength = input(0, { transform: numberAttribute });
-	readonly editableSearchTerm = input(false, { transform: booleanAttribute });
-	readonly ngClass = input(null);
-	readonly typeahead = input<Subject<string>>(undefined);
-	readonly multiple = input(false, { transform: booleanAttribute });
-	readonly addTag = input<boolean | AddTagFn>(false);
-	readonly searchable = input(true, { transform: booleanAttribute });
-	readonly clearable = input(true, { transform: booleanAttribute });
-	readonly clearKeepsDisabledOptions = input(true, { transform: booleanAttribute });
-	readonly deselectOnClick = input<boolean>();
-	readonly clearSearchOnAdd = input(undefined);
-	readonly compareWith = input(undefined, {
+	// inputs: underscored input() + alias + linkedSignal() for stable public names (back compat)
+	readonly _ariaLabelDropdown = input<string>(undefined, { alias: 'ariaLabelDropdown' });
+	readonly ariaLabelDropdown = linkedSignal(() => this._ariaLabelDropdown());
+
+	readonly _ariaLabel = input<string | undefined>(undefined, { alias: 'ariaLabel' });
+	readonly ariaLabel = linkedSignal(() => this._ariaLabel());
+
+	readonly _markFirst = input(true, { alias: 'markFirst', transform: booleanAttribute });
+	readonly markFirst = linkedSignal(() => this._markFirst());
+
+	readonly _placeholder = input<string>(this.config.placeholder, { alias: 'placeholder' });
+	readonly placeholder = linkedSignal(() => this._placeholder());
+
+	readonly _fixedPlaceholder = input<boolean>(true, { alias: 'fixedPlaceholder' });
+	readonly fixedPlaceholder = linkedSignal(() => this._fixedPlaceholder());
+
+	readonly _notFoundText = input<string>(undefined, { alias: 'notFoundText' });
+	readonly notFoundText = linkedSignal(() => this._notFoundText());
+
+	readonly _typeToSearchText = input<string>(undefined, { alias: 'typeToSearchText' });
+	readonly typeToSearchText = linkedSignal(() => this._typeToSearchText());
+
+	readonly _preventToggleOnRightClick = input<boolean>(false, { alias: 'preventToggleOnRightClick' });
+	readonly preventToggleOnRightClick = linkedSignal(() => this._preventToggleOnRightClick());
+
+	readonly _addTagText = input<string>(undefined, { alias: 'addTagText' });
+	readonly addTagText = linkedSignal(() => this._addTagText());
+
+	readonly _loadingText = input<string>(undefined, { alias: 'loadingText' });
+	readonly loadingText = linkedSignal(() => this._loadingText());
+
+	readonly _clearAllText = input<string>(undefined, { alias: 'clearAllText' });
+	readonly clearAllText = linkedSignal(() => this._clearAllText());
+
+	readonly _dropdownPosition = input<DropdownPosition>('auto', { alias: 'dropdownPosition' });
+	readonly dropdownPosition = linkedSignal(() => this._dropdownPosition());
+
+	readonly _appendTo = input<string>(undefined, { alias: 'appendTo' });
+	readonly appendTo = linkedSignal(() => this._appendTo());
+
+	readonly _outsideClickEvent = input<'click' | 'mousedown'>(this.config.outsideClickEvent, { alias: 'outsideClickEvent' });
+	readonly outsideClickEvent = linkedSignal(() => this._outsideClickEvent());
+
+	readonly _loading = input(false, { alias: 'loading', transform: booleanAttribute });
+	readonly loading = linkedSignal(() => this._loading());
+
+	readonly _closeOnSelect = input(true, { alias: 'closeOnSelect', transform: booleanAttribute });
+	readonly closeOnSelect = linkedSignal(() => this._closeOnSelect());
+
+	readonly _hideSelected = input(false, { alias: 'hideSelected', transform: booleanAttribute });
+	readonly hideSelected = linkedSignal(() => this._hideSelected());
+
+	readonly _selectOnTab = input(false, { alias: 'selectOnTab', transform: booleanAttribute });
+	readonly selectOnTab = linkedSignal(() => this._selectOnTab());
+
+	readonly _openOnEnter = input(undefined, { alias: 'openOnEnter', transform: booleanAttribute });
+	readonly openOnEnter = linkedSignal(() => this._openOnEnter());
+
+	readonly _maxSelectedItems = input<number, unknown>(undefined, { alias: 'maxSelectedItems', transform: numberAttribute });
+	readonly maxSelectedItems = linkedSignal(() => this._maxSelectedItems());
+
+	readonly _groupBy = input<string | ((value: any) => any)>(undefined, { alias: 'groupBy' });
+	readonly groupBy = linkedSignal(() => this._groupBy());
+
+	readonly _groupValue = input<GroupValueFn>(undefined, { alias: 'groupValue' });
+	readonly groupValue = linkedSignal(() => this._groupValue());
+
+	readonly _bufferAmount = input(4, { alias: 'bufferAmount', transform: numberAttribute });
+	readonly bufferAmount = linkedSignal(() => this._bufferAmount());
+
+	readonly _virtualScroll = input<boolean, unknown>(undefined, { alias: 'virtualScroll', transform: booleanAttribute });
+	readonly virtualScroll = linkedSignal(() => this._virtualScroll());
+
+	readonly _selectableGroup = input(false, { alias: 'selectableGroup', transform: booleanAttribute });
+	readonly selectableGroup = linkedSignal(() => this._selectableGroup());
+
+	readonly _tabFocusOnClearButton = input<boolean | undefined>(undefined, { alias: 'tabFocusOnClearButton' });
+	readonly tabFocusOnClearButton = linkedSignal(() => this._tabFocusOnClearButton());
+
+	readonly _selectableGroupAsModel = input(true, { alias: 'selectableGroupAsModel', transform: booleanAttribute });
+	readonly selectableGroupAsModel = linkedSignal(() => this._selectableGroupAsModel());
+
+	readonly _searchFn = input(null, { alias: 'searchFn' });
+	readonly searchFn = linkedSignal(() => this._searchFn());
+
+	readonly _trackByFn = input(null, { alias: 'trackByFn' });
+	readonly trackByFn = linkedSignal(() => this._trackByFn());
+
+	readonly _clearOnBackspace = input(true, { alias: 'clearOnBackspace', transform: booleanAttribute });
+	readonly clearOnBackspace = linkedSignal(() => this._clearOnBackspace());
+
+	readonly _labelForId = input(null, { alias: 'labelForId' });
+	readonly labelForId = linkedSignal(() => this._labelForId());
+
+	readonly _inputAttrs = input<Record<string, string>>({}, { alias: 'inputAttrs' });
+	readonly inputAttrs = linkedSignal(() => this._inputAttrs());
+
+	readonly _tabIndex = input<number, unknown>(undefined, { alias: 'tabIndex', transform: numberAttribute });
+	readonly tabIndex = linkedSignal(() => this._tabIndex());
+
+	readonly _readonly = input(false, { alias: 'readonly', transform: booleanAttribute });
+	readonly readonly = linkedSignal(() => this._readonly());
+
+	readonly _searchWhileComposing = input(true, { alias: 'searchWhileComposing', transform: booleanAttribute });
+	readonly searchWhileComposing = linkedSignal(() => this._searchWhileComposing());
+
+	readonly _minTermLength = input(0, { alias: 'minTermLength', transform: numberAttribute });
+	readonly minTermLength = linkedSignal(() => this._minTermLength());
+
+	readonly _editableSearchTerm = input(false, { alias: 'editableSearchTerm', transform: booleanAttribute });
+	readonly editableSearchTerm = linkedSignal(() => this._editableSearchTerm());
+
+	readonly _ngClass = input(null, { alias: 'ngClass' });
+	readonly ngClass = linkedSignal(() => this._ngClass());
+
+	readonly _typeahead = input<Subject<string>>(undefined, { alias: 'typeahead' });
+	readonly typeahead = linkedSignal(() => this._typeahead());
+
+	readonly _multiple = input(false, { alias: 'multiple', transform: booleanAttribute });
+	readonly multiple = linkedSignal(() => this._multiple());
+
+	readonly _addTag = input<boolean | AddTagFn>(false, { alias: 'addTag' });
+	readonly addTag = linkedSignal(() => this._addTag());
+
+	readonly _searchable = input(true, { alias: 'searchable', transform: booleanAttribute });
+	readonly searchable = linkedSignal(() => this._searchable());
+
+	readonly _clearable = input(true, { alias: 'clearable', transform: booleanAttribute });
+	readonly clearable = linkedSignal(() => this._clearable());
+
+	readonly _clearKeepsDisabledOptions = input(true, { alias: 'clearKeepsDisabledOptions', transform: booleanAttribute });
+	readonly clearKeepsDisabledOptions = linkedSignal(() => this._clearKeepsDisabledOptions());
+
+	readonly _deselectOnClick = input<boolean>(undefined, { alias: 'deselectOnClick' });
+	readonly deselectOnClick = linkedSignal(() => this._deselectOnClick());
+
+	readonly _clearSearchOnAdd = input(undefined, { alias: 'clearSearchOnAdd' });
+	readonly clearSearchOnAdd = linkedSignal(() => this._clearSearchOnAdd());
+
+	readonly _compareWith = input(undefined, {
+		alias: 'compareWith',
 		transform: (fn: CompareWithFn | undefined) => {
 			if (fn !== undefined && fn !== null && !isFunction(fn)) {
 				throw Error('`compareWith` must be a function.');
 			}
 			return fn;
 		},
 	});
-	readonly keyDownFn = input<(_: KeyboardEvent) => boolean>((_: KeyboardEvent) => true);
-	readonly popover = input(false, { transform: booleanAttribute });
+	readonly compareWith = linkedSignal(() => this._compareWith());
+
+	readonly _keyDownFn = input<(_: KeyboardEvent) => boolean>((_: KeyboardEvent) => true, { alias: 'keyDownFn' });
+	readonly keyDownFn = linkedSignal(() => this._keyDownFn());
+
+	readonly _popover = input(false, { alias: 'popover', transform: booleanAttribute });
+	readonly popover = linkedSignal(() => this._popover());
 
 	// models
 	readonly bindLabel = model<string>(undefined);
@@ -241,7 +340,7 @@ export class NgSelectComponent implements OnChanges, OnInit, AfterViewInit, Cont
 	private readonly autoFocus = inject(new HostAttributeToken('autofocus'), { optional: true });
 	// private variables
 	private readonly _defaultLabel = 'label';
-	private readonly _editableSearchTerm = computed(() => this.editableSearchTerm() && !this.multiple());
+	private readonly _editableSearchTermActive = computed(() => this.editableSearchTerm() && !this.multiple());
 	private _focused: boolean;
 	private _injector = inject(Injector);
 	private _isComposing = false;
@@ -482,7 +581,7 @@ export class NgSelectComponent implements OnChanges, OnInit, AfterViewInit, Cont
 	writeValue(value: any | any[]): void {
 		this.itemsList.clearSelected(false);
 		this._handleWriteValue(value);
-		if (this._editableSearchTerm()) {
+		if (this._editableSearchTermActive()) {
 			this._setSearchTermFromItems();
 		}
 		this._cd.markForCheck();
@@ -532,7 +631,7 @@ export class NgSelectComponent implements OnChanges, OnInit, AfterViewInit, Cont
 		}
 		this.isOpen.set(false);
 		this._isComposing = false;
-		if (!this._editableSearchTerm()) {
+		if (!this._editableSearchTermActive()) {
 			this._clearSearch();
 		} else {
 			this.itemsList.resetFilteredItems();
@@ -554,15 +653,15 @@ export class NgSelectComponent implements OnChanges, OnInit, AfterViewInit, Cont
 			this.select(item);
 		}
 
-		if (this._editableSearchTerm()) {
+		if (this._editableSearchTermActive()) {
 			this._setSearchTermFromItems();
 		}
 	}
 
 	select(item: NgOption) {
 		if (!item.selected) {
 			this.itemsList.select(item);
-			if (this.clearSearchOnAddValue() && !this._editableSearchTerm()) {
+			if (this.clearSearchOnAddValue() && !this._editableSearchTermActive()) {
 				this._clearSearch();
 			}
 
@@ -688,7 +787,7 @@ export class NgSelectComponent implements OnChanges, OnInit, AfterViewInit, Cont
 			return;
 		}
 
-		if (this._editableSearchTerm()) {
+		if (this._editableSearchTermActive()) {
 			this._setSearchTermFromItems();
 		}
 
@@ -703,7 +802,7 @@ export class NgSelectComponent implements OnChanges, OnInit, AfterViewInit, Cont
 		if (!this.isOpen() && !this.disabled()) {
 			this._onTouched();
 		}
-		if (this._editableSearchTerm()) {
+		if (this._editableSearchTermActive()) {
 			this._setSearchTermFromItems();
 		}
 		this._focused = false;