@bootkit/ng0 0.0.0-alpha.26 → 0.0.0-alpha.28

package/common/index.d.ts

@@ -3,14 +3,6 @@ import { InjectionToken, TrackByFunction } from '@angular/core';
 import { Observable } from 'rxjs';
 
 declare const RTL: InjectionToken<boolean>;
-/**
- * List item interface.
- */
-interface SelectOption {
-    id: string;
-    value: any;
-    show?: boolean;
-}
 
 /**
  * Represents a claim object that can contain multiple claims.
@@ -129,7 +121,7 @@ type CssClassGetter = (obj: any) => CssClass;
 /**
  * A type that represents a CSS class or a function that returns a CSS class.
  */
-type CssClassLike = CssClass | CssClassGetter | null | undefined;
+type CssClassLike = CssClass | CssClassGetter;
 /**
  * Converts a CssClassLike to a CssClassGetter function.
  * @param v The CssClassLike to convert.
@@ -162,20 +154,6 @@ declare function defaultEqualityComparer(a: any, b: any): boolean;
  * @returns The converted EqualityComparer.
  */
 declare function equalityComparerAttribute(e: EqualityComparerLike): EqualityComparer;
-/**
- * @private
- * @param items
- * @param value
- * @param comparer
- */
-declare function findValueByComparer(items: any[], value: any, comparer: EqualityComparer): any;
-/**
- * @private
- * @param items
- * @param values
- * @param comparer
- */
-declare function findValuesByComparer(items: any[], values: any[], comparer: EqualityComparer): any[];
 
 /**
  * Value writer function type.
@@ -231,19 +209,27 @@ declare function comparerAttribute(v: ComparerLike): Comparer;
 /**
  * Filter predicate function type.
  * @param item The item to test against the filter.
+ * @param params Additional parameters to pass to the filter.
  * @returns True if the item matches the filter, false otherwise.
  */
-type FilterPredicate = (item: any) => boolean;
+type FilterPredicate = (item: any, ...params: any[]) => boolean;
 /**
  * Filter predicate can be a function or a string representing the property name to filter.
  */
 type FilterPredicateLike = FilterPredicate | string;
 /**
- *
- * @param item
- * @returns
+ * No-op filter predicate that always returns true.
+ * @param item The item to test against the filter.
+ * @returns true
  */
 declare const noopFilter: FilterPredicate;
+/**
+ * A simple filter predicate that checks if the item's string representation includes the match string.
+ * @param item The item to test against the filter.
+ * @param match The string to match.
+ * @returns True if the item matches the filter, false otherwise.
+ */
+declare const defaultFilter: FilterPredicate;
 /**
  * Converts a FilterPredicateLike to a FilterPredicate function.
  * If the input is a string, it creates a predicate that checks the property with that name.
@@ -286,5 +272,5 @@ declare class IfDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<IfDirective, "[ng0If]", ["ng0If"], { "show": { "alias": "ng0If"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { CssClassAttribute, IdGeneratorAttribute, IfDirective, RTL, TrackByAttribute, comparerAttribute, defaultComparer, defaultEqualityComparer, defaultValueWriter, deleteEntries, equalityComparerAttribute, filterPredicateAttribute, findValueByComparer, findValuesByComparer, flipPlacement, formatString, getEnumValues, noopFilter, numberArray, sequentialIdGenerator, toObservable, trackByIndex, trackByItem, valueWriterAttribute };
-export type { Alignment, ClaimLike, ClaimObject, Comparer, ComparerLike, CssClass, CssClassGetter, CssClassLike, EqualityComparer, EqualityComparerLike, FilterPredicate, FilterPredicateLike, IdGenerator, IdGeneratorLike, MenuItem, Placement, SelectOption, TrackByLike, ValueWriter, ValueWriterLike };
+export { CssClassAttribute, IdGeneratorAttribute, IfDirective, RTL, TrackByAttribute, comparerAttribute, defaultComparer, defaultEqualityComparer, defaultFilter, defaultValueWriter, deleteEntries, equalityComparerAttribute, filterPredicateAttribute, flipPlacement, formatString, getEnumValues, noopFilter, numberArray, sequentialIdGenerator, toObservable, trackByIndex, trackByItem, valueWriterAttribute };
+export type { Alignment, ClaimLike, ClaimObject, Comparer, ComparerLike, CssClass, CssClassGetter, CssClassLike, EqualityComparer, EqualityComparerLike, FilterPredicate, FilterPredicateLike, IdGenerator, IdGeneratorLike, MenuItem, Placement, TrackByLike, ValueWriter, ValueWriterLike };

package/components/form-field/index.d.ts

@@ -1,66 +1,49 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, AfterContentInit, OnDestroy, Renderer2, DestroyRef } from '@angular/core';
-import { NgForm } from '@angular/forms';
-import { LocalizationService } from '@bootkit/ng0/localization';
+import { AfterContentInit } from '@angular/core';
+import { NgControl } from '@angular/forms';
 import * as i1 from '@angular/common';
 
-declare class FormFieldComponent implements OnInit, AfterContentInit, OnDestroy {
-    private _renderer;
+declare class FormFieldComponent implements AfterContentInit {
+    private _ngControlElement?;
     private _destroyRef;
-    private _form;
-    private _ls;
+    private _renderer;
+    private _localizationService;
+    protected _ngControl?: NgControl;
+    protected _status: _angular_core.WritableSignal<string>;
+    protected _hasRequiredControl: _angular_core.WritableSignal<boolean>;
+    protected _errorText: _angular_core.Signal<string | undefined>;
     /**
      * The label text for the form field.
      */
-    label: _angular_core.InputSignal<string | undefined>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
     /**
      * The hint text to display below the form field.
-     * This is typically used to provide additional information or instructions to the user.
      */
-    hint: _angular_core.InputSignal<string | undefined>;
+    readonly hint: _angular_core.InputSignal<string | undefined>;
     /**
      * If true, the form-field will show validation errors.
-     * This is useful for displaying validation messages when the form control is invalid.
      */
-    showErrors: _angular_core.InputSignal<boolean>;
+    readonly showErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * If true, the form-field will show a red asterisk for required fields.
-     * This is only a visual indicator and does not enforce validation.
+     * If undefined, the indicator will be shown based on the control's required state.
+     * If true, the form-field will show a required indicator (*) next to the label (regardless of the control's required state).
+     * If false, the required indicator will not be shown (regardless of the control's required state).
      */
-    showRequiredIndicator: _angular_core.InputSignal<boolean>;
+    readonly showRequired: _angular_core.InputSignal<boolean | undefined>;
     /**
      * If true, the form-field will show subscripts (e.g. hints, errors) for the field label.
-     * This is useful for displaying additional information or validation messages.
      */
-    showSubscripts: _angular_core.InputSignal<boolean>;
+    readonly showSubscripts: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * If true, the form-field will be rendered inside a ".input-group" element.
      */
-    inputGroup: _angular_core.InputSignal<boolean>;
-    /**
-     * Returns the first localized error of the control
-     */
-    get errorText(): string | undefined;
-    /** Reports whether the control is touched. */
-    get touched(): boolean | null | undefined;
-    /** Reports whether the control is dirty. */
-    get dirty(): boolean | null | undefined;
-    /** Returns true if this form-field is required, otherwise returns false. */
-    get isRequired(): boolean;
-    private _onFocusOut;
-    private _ngControl?;
-    private _ngControlElement?;
-    private _isRequired;
-    private _locale?;
-    private _errorText?;
-    constructor(_renderer: Renderer2, _destroyRef: DestroyRef, _form: NgForm, _ls: LocalizationService);
-    ngOnInit(): void;
+    readonly inputGroup: _angular_core.InputSignalWithTransform<boolean, unknown>;
     ngAfterContentInit(): void;
-    private _validate;
-    private _isRequiredField;
-    ngOnDestroy(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormFieldComponent, [null, null, { optional: true; }, null]>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormFieldComponent, "ng0-form-field, ng0-field", ["ng0FormField"], { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; "showRequiredIndicator": { "alias": "showRequiredIndicator"; "required": false; "isSignal": true; }; "showSubscripts": { "alias": "showSubscripts"; "required": false; "isSignal": true; }; "inputGroup": { "alias": "inputGroup"; "required": false; "isSignal": true; }; }, {}, ["_ngControl", "_ngControlElement"], ["*"], true, never>;
+    private _isControlRequired;
+    private _updateControlStyles;
+    private _onFocusOut;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormFieldComponent, "ng0-form-field, ng0-field", ["ng0FormField"], { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; "showRequired": { "alias": "showRequired"; "required": false; "isSignal": true; }; "showSubscripts": { "alias": "showSubscripts"; "required": false; "isSignal": true; }; "inputGroup": { "alias": "inputGroup"; "required": false; "isSignal": true; }; }, {}, ["_ngControlElement", "_ngControl"], ["*"], true, never>;
 }
 
 declare class FormFieldModule {

package/components/list/index.d.ts

@@ -1,14 +1,14 @@
 import * as _bootkit_ng0_localization from '@bootkit/ng0/localization';
 import * as _bootkit_ng0_common from '@bootkit/ng0/common';
 import * as _angular_core from '@angular/core';
-import { ElementRef, TemplateRef, EventEmitter } from '@angular/core';
+import { ElementRef, TemplateRef, QueryList, EventEmitter } from '@angular/core';
 import { DataSource, DataSourceLike } from '@bootkit/ng0/data';
 import { ControlValueAccessor } from '@angular/forms';
 
 /**
- * ListItemComponent represents an individual item within a ListComponent.
+ * ListItem represents an individual item within a ListComponent.
  */
-declare class ListItemComponent {
+declare class ListItem {
     /**
      * The value associated with the item. This can be of any type.
      */
@@ -63,8 +63,8 @@ declare class ListItemComponent {
      */
     focus(): void;
     private _getTabIndex;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListItemComponent, "ng0-list-item", ["ng0ListItem"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListItem, "ng0-list-item", ["ng0ListItem"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -74,15 +74,19 @@ declare class ListItemComponent {
 declare class ListComponent implements ControlValueAccessor {
     private _localizationService;
     private _changeDetector;
-    private _value;
     private _changeCallback?;
     private _touchCallback?;
+    private readonly _selectedItems;
     protected readonly _sourceItems: _angular_core.WritableSignal<any[]>;
-    private readonly _selectedValues;
-    protected readonly _activeItem: _angular_core.WritableSignal<ListItemComponent | undefined>;
-    private readonly _visibleItems;
+    protected _itemTemplate?: TemplateRef<any>;
+    protected readonly _activeItem: _angular_core.WritableSignal<ListItem | undefined>;
     protected readonly _isDisabled: _angular_core.WritableSignal<boolean>;
-    itemTemplate?: TemplateRef<any>;
+    private readonly _value;
+    private _renderer;
+    /**
+     * A list of all visible list items.
+     */
+    readonly listItems?: QueryList<ListItem>;
     /**
      * Reference to the host element
      */
@@ -103,22 +107,22 @@ declare class ListComponent implements ControlValueAccessor {
      */
     readonly showSelectionIndicator: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-    * A custom comparer function or the name of a field for comparing two objects.
+    * A comparer to compare items for selection.
+    * Default uses strict equality (===).
     */
     readonly compareBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.EqualityComparer, _bootkit_ng0_common.EqualityComparerLike>;
     /**
-     * Custom format function to convert an item to a string for display.
+     * A fromatter to convert each item to a string for display.
      * Default converts the item to a string using its toString method.
      */
     readonly formatBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_localization.ObjectFormatter, _bootkit_ng0_localization.ObjectFormatterLike>;
     /**
-     * Custom value extractor function to extract the value of any object while writing values.
+     * Custom value writer to extract the value of any object while writing values.
      */
     readonly writeBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.ValueWriter, _bootkit_ng0_common.ValueWriterLike>;
     /**
-     * A custom filter predicate function to filter items based on a search string.
-     * Default checks if the item's string representation contains the filter string (case-insensitive).
-     * The filter predicate can be a function or a string representing the property name to filter.
+     * Custom filter function to filter items.
+     * Default is a noop filter that does not filter any items.
      */
     readonly filterBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.FilterPredicate, _bootkit_ng0_common.FilterPredicateLike>;
     /**
@@ -140,7 +144,7 @@ declare class ListComponent implements ControlValueAccessor {
      * CSS class or classes to apply to the list container.
      * Default is undefined.
      */
-    readonly itemClass: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.CssClassGetter, _bootkit_ng0_common.CssClassLike>;
+    readonly itemClass: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.CssClassGetter | undefined, _bootkit_ng0_common.CssClassLike>;
     /**
      * Defines the focus behavior of the list component.
      * - 'none': No keyboard interaction is possible. The list cannot be focused.
@@ -148,7 +152,7 @@ declare class ListComponent implements ControlValueAccessor {
      * - 'activeDescendant': The list can be focused, but no item is tabbable. The active item is indicated using aria-activedescendant.
      * @default 'activeDescendant'.
      */
-    readonly focus: _angular_core.InputSignal<"none" | "roving" | "activeDescendant">;
+    readonly focusMode: _angular_core.InputSignal<"none" | "roving" | "activeDescendant">;
     /**
      * A function that generates unique ids for each item in the list.
      * If set to a function, it will be called with the item as an argument to generate the id.
@@ -159,15 +163,18 @@ declare class ListComponent implements ControlValueAccessor {
     /**
      * Event emitted when the selection state of an item changes by user interaction.
      */
-    readonly selectionChange: EventEmitter<ListSelectionChangeEvent>;
-    _uuid: number;
+    readonly itemSelect: EventEmitter<ListItemSelectEvent>;
+    /**
+     * The template to use for each item in the list.
+     */
+    readonly itemTemplate: _angular_core.InputSignal<TemplateRef<any> | undefined>;
     constructor();
     /**
      * Indicates whether an item is active.
      * @param item
      * @returns
      */
-    isActive(item: ListItemComponent): boolean;
+    isActive(item: ListItem): boolean;
     /**
      * Indicates whether the given value is selected.
      * @param item
@@ -197,30 +204,42 @@ declare class ListComponent implements ControlValueAccessor {
      * Selects all items in the list. Only applicable in multiple selection mode.
      */
     selectAll(): void;
+    /**
+     * Gets the current value(s) of the list.
+     */
+    get value(): ReadonlyArray<any | any[]>;
+    /**
+     * Gets the current items in the list.
+     */
+    get items(): ReadonlyArray<any[]>;
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState?(isDisabled: boolean): void;
-    protected _handleUserSelection(item: ListItemComponent): void;
+    protected _handleUserSelection(item: ListItem, index: number): void;
     protected _showLoadingSppiner: _angular_core.Signal<boolean>;
-    private _findAndSelectItems;
+    private _updateSelectedItems;
+    private _activateFirstSelectedItem;
     private _updateValue;
     private _hostAriaActiveDescendant;
     private _hostTabIndex;
-    private _onHostClick;
     private _onHostBlur;
     private _onKeydown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "ng0-list", ["ng0List"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "showSelectionIndicator": { "alias": "showSelectionIndicator"; "required": false; "isSignal": true; }; "compareBy": { "alias": "compareBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "writeBy": { "alias": "writeBy"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "itemClass": { "alias": "itemClass"; "required": false; "isSignal": true; }; "focus": { "alias": "focus"; "required": false; "isSignal": true; }; "idGenerator": { "alias": "idGenerator"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, ["itemTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "ng0-list, ng0-select-list", ["ng0List"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "showSelectionIndicator": { "alias": "showSelectionIndicator"; "required": false; "isSignal": true; }; "compareBy": { "alias": "compareBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "writeBy": { "alias": "writeBy"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "itemClass": { "alias": "itemClass"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "idGenerator": { "alias": "idGenerator"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, ["_itemTemplate"], never, true, never>;
 }
 /**
  * Event emitted when the selection state of the list changes by user interaction.
  */
-interface ListSelectionChangeEvent {
+interface ListItemSelectEvent {
+    /**
+     * The value of the item that was selected or deselected.
+     */
+    value: any;
     /**
      * The item that was selected or deselected.
      */
-    readonly item: ListItemComponent;
+    readonly item: ListItem;
     /**
      * The list component that emitted the event.
      */
@@ -237,4 +256,4 @@ declare class ListModule {
 }
 
 export { ListComponent, ListModule };
-export type { ListSelectionChangeEvent };
+export type { ListItemSelectEvent };

package/components/select/index.d.ts

@@ -1,114 +1,149 @@
 import * as _bootkit_ng0_localization from '@bootkit/ng0/localization';
 import * as _bootkit_ng0_common from '@bootkit/ng0/common';
-import { SelectOption, FilterPredicate, IdGenerator } from '@bootkit/ng0/common';
 import * as _angular_core from '@angular/core';
-import { OnInit, TemplateRef, ElementRef } from '@angular/core';
+import { ElementRef, TemplateRef, EventEmitter } from '@angular/core';
 import { DataSource, DataSourceLike } from '@bootkit/ng0/data';
 import { ControlValueAccessor } from '@angular/forms';
 import { FlexibleConnectedPositionStrategy, ScrollStrategy } from '@angular/cdk/overlay';
-import { ListSelectionChangeEvent } from '@bootkit/ng0/components/list';
+import { ListItemSelectEvent } from '@bootkit/ng0/components/list';
 
 /**
  * Select component that allows users to choose an option from a dropdown list.
  */
-declare class SelectComponent implements OnInit, ControlValueAccessor {
-    private _resizeObserver?;
-    private _resizeObserverInitialized;
+declare class SelectComponent implements ControlValueAccessor {
     private _viewpoerRulerSubscription?;
     private _filterElementRef?;
     private _listComponent?;
     private _changeCallback;
     private _touchCallback;
-    protected readonly _options: _angular_core.WritableSignal<SelectOption[]>;
+    protected readonly _sourceItems: _angular_core.WritableSignal<any[] | undefined>;
+    protected readonly _selectedItems: Set<any>;
     protected readonly _isDisabled: _angular_core.WritableSignal<boolean>;
-    protected readonly _activeOptionIndex: _angular_core.WritableSignal<number>;
-    protected _optionTemplate?: TemplateRef<any>;
     protected _positionStrategy: FlexibleConnectedPositionStrategy;
     protected _scrollStrategy: ScrollStrategy;
     private _overlay;
-    private _document;
-    private _ls;
-    private _destroyRef;
-    protected _el: ElementRef<any>;
+    private _localizationService;
+    protected _elementRef: ElementRef<any>;
+    protected readonly _filterValue: _angular_core.WritableSignal<string>;
     private _renderer;
     private _viewportRuler;
-    private _changeDetector;
-    private _activateSlectedItemEffectRef;
+    private _changeDetectorRef;
+    private readonly _value;
+    /**
+     * Template for rendering each item in the select component.
+     */
+    itemTemplate?: TemplateRef<any>;
     /**
      * The data source for the select component.
      * This can be an array of data, a function that returns an observable of data,
      * or an instance of DataSource.
      */
     readonly source: _angular_core.InputSignalWithTransform<DataSource<any>, DataSourceLike<any>>;
-    /**
-     * Value of the select component.
-     */
-    value: _angular_core.ModelSignal<any>;
     /**
      * Indicates whether multi selection is enabled or not.
      */
     readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Indicates whether to show selection indicator (checkbox/radio) next to each item.
+     * Default is false.
+     */
+    readonly showSelectionIndicator: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Indicates whether the dropdown is open or closed.
      */
     readonly open: _angular_core.ModelSignal<boolean>;
     /**
-    * A custom comparer function or the name of a field for comparing two objects.
+    * A comparer to compare items for selection.
     */
     readonly compareBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.EqualityComparer, _bootkit_ng0_common.EqualityComparerLike>;
     /**
-     * Custom format function to convert an item to a string for display.
-     * Default converts the item to a string using its toString method.
+     * A fromatter to convert each item to a string for display.
      */
     readonly formatBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_localization.ObjectFormatter, _bootkit_ng0_localization.ObjectFormatterLike>;
     /**
-     * Custom value writer function to extract the value of any object while writing values.
+     * Custom value writer to extract the value of any object while writing values.
      */
     readonly writeBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.ValueWriter, _bootkit_ng0_common.ValueWriterLike>;
     /**
      * Indicates whether the select component is filterable.
      */
     readonly filterable: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /**
-     * Placeholder text for the filter input field.
-     */
-    readonly filterPlaceholder: _angular_core.InputSignal<string>;
     /**
      * Custom filter function to filter items based on a filter value.
      * Default checks if the item contains the filter value (case-insensitive).
      */
-    readonly filterBy: _angular_core.InputSignal<FilterPredicate>;
+    readonly filterBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.FilterPredicate, _bootkit_ng0_common.FilterPredicateLike>;
+    /**
+     * Placeholder text for the filter input field.
+     */
+    readonly filterPlaceholder: _angular_core.InputSignal<string | undefined>;
     /**
      * CSS class or classes to apply to the items.
      */
-    readonly itemClass: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.CssClassGetter, _bootkit_ng0_common.CssClassLike>;
+    readonly itemClass: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.CssClassGetter | undefined, _bootkit_ng0_common.CssClassLike>;
     /**
-     * Custom id generator function to generate unique ids for each item.
-     * Default generates sequential ids with the prefix 'ng0-select-item-'.
-     * If set to undefined, no ids will be generated.
+     * A function that generates unique ids for each item in the list.
+     * If set to a function, it will be called with the item as an argument to generate the id.
+     * If set to undefined, no ids will be generated for the items.
+     * @default undefined
      */
-    readonly idGenerator: _angular_core.InputSignal<IdGenerator>;
+    readonly idGenerator: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.IdGenerator | undefined, _bootkit_ng0_common.IdGeneratorLike>;
+    /**
+     * Event emitted when the selected value changes.
+     */
+    readonly valueChange: EventEmitter<SelectItemEvent>;
     constructor();
-    ngOnInit(): void;
+    /**
+     * Indicates whether the given value is selected.
+     * @param item
+     * @returns
+     */
+    isSelected(value: any): boolean;
+    /**
+     * Selects the given value.
+     * @param item
+     */
+    select(value: any): void;
+    /**
+     * Deselects the given value.
+     * @param item
+     */
+    deselect(value: any): void;
+    /**
+     * Toggles the selection state of the given value.
+     * @param item
+    */
+    toggle(value: any): void;
     writeValue(obj: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState?(isDisabled: boolean): void;
-    protected _onFilterBlur(): void;
+    private _findAndSelectItems;
+    private _updateValue;
     protected _onOverlayAttach(): void;
     protected _onOverlayDetach(): void;
-    protected _onListSelectionChange(e: ListSelectionChangeEvent): void;
-    protected _mappedValue: _angular_core.Signal<any>;
+    protected _onListSelectionChange(e: ListItemSelectEvent): void;
+    protected _filterPredicate: _angular_core.Signal<(item: any) => boolean>;
+    protected _onFilterKeydown(e: KeyboardEvent): void;
     private _listenToResizeEvents;
     private _unlistenFromResizeEvents;
-    private _selectFirst;
-    private _selectLast;
-    private _selectNext;
-    private _selectPrevious;
     private _onHostKeydown;
     private _onHostClick;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ng0-select", ["ng0Select"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "compareBy": { "alias": "compareBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "writeBy": { "alias": "writeBy"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "itemClass": { "alias": "itemClass"; "required": false; "isSignal": true; }; "idGenerator": { "alias": "idGenerator"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "open": "openChange"; }, ["_optionTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ng0-select", ["ng0Select"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "showSelectionIndicator": { "alias": "showSelectionIndicator"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "compareBy": { "alias": "compareBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "writeBy": { "alias": "writeBy"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "itemClass": { "alias": "itemClass"; "required": false; "isSignal": true; }; "idGenerator": { "alias": "idGenerator"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "valueChange": "valueChange"; }, ["itemTemplate"], never, true, never>;
+}
+/**
+ * Event emitted when the selection state of the select component changes by user interaction.
+ */
+interface SelectItemEvent {
+    /**
+     * The value of the item that was selected or deselected.
+     */
+    value: any;
+    /**
+     * The select component that emitted the event.
+     */
+    readonly select: SelectComponent;
 }
 
 /**
@@ -121,3 +156,4 @@ declare class SelectModule {
 }
 
 export { SelectComponent, SelectModule };
+export type { SelectItemEvent };

package/components/sidenav/index.d.ts

@@ -15,7 +15,7 @@ declare class SidenavComponent implements OnInit, OnDestroy {
     private _renderer;
     open: _angular_core.InputSignalWithTransform<boolean, unknown>;
     mode: _angular_core.InputSignal<SidenavMode>;
-    hasBackdrop: _angular_core.InputSignal<boolean>;
+    hasBackdrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
     zIndex: _angular_core.InputSignal<number | undefined>;
     position: _angular_core.InputSignal<SidenavPosition>;
     sidenavWidth: _angular_core.InputSignal<number>;

package/fesm2022/bootkit-ng0-common.mjs

@@ -157,37 +157,6 @@ function equalityComparerAttribute(e) {
     }
     throw Error('invalid equality comparer');
 }
-/**
- * @private
- * @param items
- * @param value
- * @param comparer
- */
-function findValueByComparer(items, value, comparer) {
-    if (!items || items.length === 0 || value === undefined || value === null) {
-        return undefined;
-    }
-    return items.find(i => comparer(i, value));
-}
-/**
- * @private
- * @param items
- * @param values
- * @param comparer
- */
-function findValuesByComparer(items, values, comparer) {
-    if (!items || items.length === 0 || !values || values.length === 0) {
-        return [];
-    }
-    const result = [];
-    for (let v of values) {
-        const item = items.find(i => comparer(i, v));
-        if (item) {
-            result.push(item);
-        }
-    }
-    return result;
-}
 
 /**
  * Default value writer function.
@@ -235,11 +204,26 @@ function comparerAttribute(v) {
 }
 
 /**
- *
- * @param item
- * @returns
+ * No-op filter predicate that always returns true.
+ * @param item The item to test against the filter.
+ * @returns true
  */
-const noopFilter = (item) => true;
+const noopFilter = (item, ...params) => true;
+/**
+ * A simple filter predicate that checks if the item's string representation includes the match string.
+ * @param item The item to test against the filter.
+ * @param match The string to match.
+ * @returns True if the item matches the filter, false otherwise.
+ */
+const defaultFilter = (item, match) => {
+    if (match == undefined || match == '') {
+        return true;
+    }
+    if (item == undefined) {
+        return false;
+    }
+    return item.toString().toLowerCase().includes(match.toLowerCase());
+};
 /**
  * Converts a FilterPredicateLike to a FilterPredicate function.
  * If the input is a string, it creates a predicate that checks the property with that name.
@@ -249,6 +233,9 @@ const noopFilter = (item) => true;
 function filterPredicateAttribute(v) {
     if (typeof v === 'function')
         return v;
+    else if (typeof v === 'string') {
+        return (item, match) => item != null && Object.hasOwn(item, v) ? defaultFilter(item[v], match) : false;
+    }
     throw Error('invalid filter predicate');
 }
 
@@ -325,5 +312,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CssClassAttribute, IdGeneratorAttribute, IfDirective, RTL, TrackByAttribute, comparerAttribute, defaultComparer, defaultEqualityComparer, defaultValueWriter, deleteEntries, equalityComparerAttribute, filterPredicateAttribute, findValueByComparer, findValuesByComparer, flipPlacement, formatString, getEnumValues, noopFilter, numberArray, sequentialIdGenerator, toObservable, trackByIndex, trackByItem, valueWriterAttribute };
+export { CssClassAttribute, IdGeneratorAttribute, IfDirective, RTL, TrackByAttribute, comparerAttribute, defaultComparer, defaultEqualityComparer, defaultFilter, defaultValueWriter, deleteEntries, equalityComparerAttribute, filterPredicateAttribute, flipPlacement, formatString, getEnumValues, noopFilter, numberArray, sequentialIdGenerator, toObservable, trackByIndex, trackByItem, valueWriterAttribute };
 //# sourceMappingURL=bootkit-ng0-common.mjs.map