@js-smart/ng-kit 21.4.0 → 21.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@js-smart/ng-kit",
-  "version": "21.4.0",
+  "version": "21.6.0",
   "license": "MIT",
   "author": "Pavan Kumar Jadda",
   "private": false,
@@ -45,4 +45,4 @@
       "default": "./fesm2022/js-smart-ng-kit.mjs"
     }
   }
-}
+}

package/types/js-smart-ng-kit.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, ChangeDetectorRef, OnDestroy, OnChanges, AfterContentChecked, ElementRef, SimpleChanges, ViewContainerRef, ComponentRef, WritableSignal } from '@angular/core';
+import { OnInit, ChangeDetectorRef, OnDestroy, ElementRef, ViewContainerRef, ComponentRef, WritableSignal } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { ThemePalette, MatOptionSelectionChange } from '@angular/material/core';
+import { ThemePalette } from '@angular/material/core';
 import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatIconRegistry } from '@angular/material/icon';
@@ -263,83 +264,92 @@ declare class SpinnerComponent {
  * @author Pavan Kumar Jadda
  * @since 12.0.0
  */
-declare class AutocompleteComponent implements OnInit, OnChanges, AfterContentChecked, ControlValueAccessor {
-    /**
-     * Gets reference inputAutoComplete HTML attribute
-     */
-    inputAutoComplete: ElementRef;
-    cdRef: ChangeDetectorRef;
-    /**
-     * Internal form control for the autocomplete
-     */
-    control: FormControl<string | null>;
-    /**
-     * Label of the AutoComplete
-     */
+declare class AutocompleteComponent<T = string> implements ControlValueAccessor {
+    /** Gets reference to the MatAutocompleteTrigger to programmatically open/close the panel */
+    autocompleteTrigger: _angular_core.Signal<MatAutocompleteTrigger>;
+    /** Gets reference to the input element for re-focusing after clear */
+    inputElement: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    /** Label of the autocomplete form field */
     label: _angular_core.InputSignal<string>;
-    /**
-     * Placeholder of the AutoComplete
-     */
-    placeHolder: _angular_core.InputSignal<string>;
-    /**
-     * Appearance of the AutoComplete, defaults to `fill`
-     */
-    appearance: _angular_core.InputSignal<string>;
-    /**
-     * List of CSS classes that need to applied to autocomplete
-     */
+    /** Placeholder text displayed inside the input when empty */
+    placeholder: _angular_core.InputSignal<string>;
+    /** Appearance of the form field. Defaults to `outline` */
+    appearance: _angular_core.InputSignal<MatFormFieldAppearance>;
+    /** List of CSS classes to apply to the form field */
     classes: _angular_core.InputSignal<string>;
+    /** List of options to display in the dropdown */
+    options: _angular_core.InputSignal<T[]>;
     /**
-     * Attribute of the Object whose value would be shown when searching for data. Defaults to `ID`
+     * Function that maps an option to its display string.
+     * Used for rendering options in the dropdown and showing the selected value in the input.
+     * Defaults to `String(value)` which works for primitive string options.
      */
-    bindLabel: _angular_core.InputSignal<string>;
+    displayWith: _angular_core.InputSignal<(value: T) => string>;
+    /** Whether the autocomplete is in a loading state. Shows a spinner instead of options */
+    loading: _angular_core.InputSignal<boolean>;
+    /** Text displayed when the autocomplete is in a loading state. Defaults to 'Loading...' */
+    loadingText: _angular_core.InputSignal<string>;
+    /** Text displayed when no options match the filter input. Defaults to 'No values found' */
+    noOptionsText: _angular_core.InputSignal<string>;
+    /** Emits the selected value when an option is picked from the dropdown */
+    selectionChange: _angular_core.OutputEmitterRef<T>;
+    /** Internal form control for the autocomplete input */
+    control: FormControl<string | null>;
+    /** Signal that tracks whether the autocomplete panel is currently open */
+    isExpanded: _angular_core.WritableSignal<boolean>;
+    /** Signal that tracks the current filter text typed by the user */
+    filterText: _angular_core.WritableSignal<string>;
     /**
-     * Attribute of the Object whose value would be used for search
+     * Computed signal that filters options based on the current filter text.
+     * Uses the `displayWith` function to extract searchable text from each option.
+     * Returns all options when filter text is empty.
      */
-    bindValue: _angular_core.InputSignal<string>;
+    filteredOptions: _angular_core.Signal<T[]>;
     /**
-     * Function that maps an option's control value to its display value in the trigger.
+     * Display function passed to mat-autocomplete's [displayWith] to render the
+     * selected value in the input field. Returns empty string for null/undefined values.
      */
-    displayWith: ((value: any) => string) | null;
+    displayFn: (value: T) => string;
     /**
-     * Specifies if the autocomplete is required. Default is not required.
+     * Writes a new value to the internal control. Called by the parent form
+     * when the form control value is set programmatically.
      */
-    required: _angular_core.InputSignal<boolean>;
+    writeValue(value: T | null): void;
     /**
-     * Specifies if the autocomplete is disabled. Default is not required.
+     * Registers a callback function that is called when the control's value
+     * changes in the UI (option selected or input cleared).
      */
-    disabled: _angular_core.InputSignal<boolean>;
+    registerOnChange(fn: (value: T | null) => void): void;
     /**
-     * List of Objects that need to be bind and searched for
+     * Registers a callback function that is called when the control is
+     * first interacted with (blur or selection).
      */
-    data: _angular_core.InputSignal<any[] | string[] | undefined>;
+    registerOnTouched(fn: () => void): void;
     /**
-     * Emit selected value on selection changes
+     * Sets the disabled state of the internal control. Called by the parent form
+     * when `control.disable()` or `control.enable()` is invoked.
      */
-    onSelectionChange: _angular_core.OutputEmitterRef<any>;
+    setDisabledState(isDisabled: boolean): void;
+    /** Updates the filter text signal as the user types in the input */
+    onInput(event: Event): void;
     /**
-     * BehaviorSubject that shows the current active arrow icon
+     * Clears the input value, resets the filter, notifies the parent form,
+     * and re-focuses the input element.
      */
-    arrowIconSubject: BehaviorSubject<string>;
+    clearInput(event: Event): void;
+    /** Opens the autocomplete panel programmatically */
+    openPanel(): void;
     /**
-     * Filtered options when user types
+     * Handles option selection from the dropdown. Resets the filter text,
+     * notifies the parent form of the new value, and emits the selectionChange output.
      */
-    filteredOptions: Observable<any[] | undefined> | undefined;
-    writeValue(value: any): void;
-    registerOnChange(fn: any): void;
-    registerOnTouched(fn: any): void;
-    setDisabledState(isDisabled: boolean): void;
-    ngAfterContentChecked(): void;
-    ngOnInit(): void;
-    ngOnChanges(_changes: SimpleChanges): void;
-    clearInput(evt: any): void;
-    openOrClosePanel(evt: any, trigger: MatAutocompleteTrigger): void;
-    displayFn(object: any): string;
-    emitSelectedValue($event: MatOptionSelectionChange): void;
+    onOptionSelected(value: T): void;
+    /** Callback function registered by the parent form to propagate value changes */
     private onChange;
+    /** Callback function registered by the parent form to propagate touched state */
     private onTouched;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AutocompleteComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutocompleteComponent, "autocomplete, lib-autocomplete", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeHolder": { "alias": "placeHolder"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "classes": { "alias": "classes"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; }, { "onSelectionChange": "onSelectionChange"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AutocompleteComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutocompleteComponent<any>, "autocomplete, lib-autocomplete", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "classes": { "alias": "classes"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "noOptionsText": { "alias": "noOptionsText"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
 }
 
 declare class PrintOptions {