@almoamendev/ngx-md3 0.8.0 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almoamendev/ngx-md3",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "MD3-style Angular components & style library",
   "author": "Murtadha (Hussain) Almoamen",
   "license": "MIT",

package/types/almoamendev-ngx-md3.d.ts

@@ -1884,6 +1884,11 @@ declare class SelectField implements ControlValueAccessor {
     private readonly ngControl;
     options: _angular_core.InputSignal<SelectOption[]>;
     multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Lets the user type in the field to filter the options. While the field has focus it
+     * acts as a search box; the selected options are shown again as soon as it loses focus.
+     */
+    searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     label: _angular_core.InputSignal<string | null>;
     /**
      * Formats the text shown in the field. The default joins the labels of the selected
@@ -1897,6 +1902,7 @@ declare class SelectField implements ControlValueAccessor {
      */
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     menuColors: _angular_core.InputSignal<"standard" | "vibrant">;
+    scrollStrategy: _angular_core.InputSignal<MenuScrollStrategy | undefined>;
     fieldType: _angular_core.InputSignal<"filled" | "outlined">;
     /**
      * Control passed explicitly, mirroring md3-text-field. Takes precedence over a form
@@ -1922,11 +1928,31 @@ declare class SelectField implements ControlValueAccessor {
     private onTouched;
     /** Selection is kept by value so it survives options arriving or being replaced later. */
     private selectedValues;
+    private searchQuery;
+    private isInputFocused;
     formControl: _angular_core.Signal<AbstractControl<any, any, any> | undefined>;
     isDisabled: _angular_core.Signal<boolean>;
     selectedOptions: _angular_core.Signal<SelectOption[]>;
     selectedText: _angular_core.Signal<string | null>;
+    /** True while the field acts as a search box instead of showing the selection. */
+    isSearching: _angular_core.Signal<boolean>;
+    /** What the input element shows: the search query while searching, the selection otherwise. */
+    displayText: _angular_core.Signal<string | null>;
+    /**
+     * Each option paired with the text the search runs against. It is rebuilt only when the
+     * options array changes, so typing does not normalize the same text again and again.
+     * The fields are joined with a character the query can never contain, which stops a query
+     * from matching across two fields.
+     */
+    private searchIndex;
+    /** The options the menu shows. Options that do not match the query are hidden. */
+    filteredOptions: _angular_core.Signal<SelectOption[]>;
     constructor(menuService: MenuService, viewContainerRef: ViewContainerRef);
+    onSearchFocus(): void;
+    onSearchBlur(): void;
+    onSearchInput(event: Event): void;
+    /** Lower-cases the text and removes everything that is not a letter or a digit. */
+    private normalizeSearchText;
     writeValue(value: SelectFieldValue): void;
     registerOnChange(fn: (value: SelectFieldValue) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -1949,7 +1975,7 @@ declare class SelectField implements ControlValueAccessor {
     private normalizeValues;
     private valuesAreEqual;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectField, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectField, "md3-select-field", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "displayWith": { "alias": "display-with"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "menuColors": { "alias": "menu-colors"; "required": false; "isSignal": true; }; "fieldType": { "alias": "field-type"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; }, {}, ["iconElements"], ["[md3-icon-element=leading]", "[md3-icon-element=arrow]", "[md3-supporting-text]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectField, "md3-select-field", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "displayWith": { "alias": "display-with"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "menuColors": { "alias": "menu-colors"; "required": false; "isSignal": true; }; "scrollStrategy": { "alias": "menu-scroll-strategy"; "required": false; "isSignal": true; }; "fieldType": { "alias": "field-type"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; }, {}, ["iconElements"], ["[md3-icon-element=leading]", "[md3-icon-element=arrow]", "[md3-supporting-text]"], true, never>;
 }
 
 /**