@js-smart/ng-kit 21.5.0 → 21.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@js-smart/ng-kit",
-  "version": "21.5.0",
+  "version": "21.7.0",
   "license": "MIT",
   "author": "Pavan Kumar Jadda",
   "private": false,

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

@@ -1,9 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, ChangeDetectorRef, OnDestroy, OnChanges, 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';
@@ -257,140 +258,98 @@ declare class SpinnerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpinnerComponent, "spinner,lib-spinner", never, { "bootstrapSpinner": { "alias": "bootstrapSpinner"; "required": false; "isSignal": true; }; "diameter": { "alias": "diameter"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type AutocompleteOption = Record<string, any>;
 /**
  * Reusable Auto Complete component that extends MatAutoComplete to show Clear icon and Arrow buttons
  *
  * @author Pavan Kumar Jadda
  * @since 12.0.0
  */
-declare class AutocompleteComponent implements OnInit, OnChanges, ControlValueAccessor {
-    /**
-     * Gets reference inputAutoComplete HTML attribute
-     */
-    inputAutoComplete: ElementRef;
-    private destroyRef;
-    /**
-     * Internal form control for the autocomplete
-     */
-    control: FormControl<string | AutocompleteOption | 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<"fill" | "outline">;
-    /**
-     * 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`
-     */
-    bindLabel: _angular_core.InputSignal<string>;
-    /**
-     * Attribute of the Object whose value would be used for search
-     */
-    bindValue: _angular_core.InputSignal<string>;
-    /**
-     * Function that maps an option's control value to its display value in the trigger.
-     */
-    displayWith: _angular_core.InputSignal<((value: string | AutocompleteOption) => string) | null>;
-    /**
-     * Specifies if the autocomplete is required. Default is not required.
-     */
-    required: _angular_core.InputSignal<boolean>;
-    /**
-     * Specifies if the autocomplete is disabled. Default is not required.
-     */
-    disabled: _angular_core.InputSignal<boolean>;
-    /**
-     * Text displayed when no options match the input. Defaults to 'No options'
-     */
-    noOptionsText: _angular_core.InputSignal<string>;
-    /**
-     * Whether the autocomplete is in a loading state. Shows a loading message instead of options
+     * 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.
      */
+    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...'
-     */
+    /** 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>;
     /**
-     * List of Objects that need to be bind and searched for
-     */
-    data: _angular_core.InputSignal<(string | AutocompleteOption)[] | undefined>;
-    /**
-     * Emit selected value on selection changes
-     */
-    onSelectionChange: _angular_core.OutputEmitterRef<string | AutocompleteOption>;
-    /**
-     * Signal that tracks the current arrow icon state
+     * 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.
      */
-    arrowIcon: _angular_core.WritableSignal<string>;
+    filteredOptions: _angular_core.Signal<T[]>;
     /**
-     * Filtered options when user types
+     * Display function passed to mat-autocomplete's [displayWith] to render the
+     * selected value in the input field. Returns empty string for null/undefined values.
      */
-    filteredOptions: Observable<(string | AutocompleteOption)[] | undefined> | undefined;
+    displayFn: (value: T) => string;
     /**
-     * Writes a new value to the control
+     * Writes a new value to the internal control. Called by the parent form
+     * when the form control value is set programmatically.
      */
-    writeValue(value: string | AutocompleteOption): void;
+    writeValue(value: T | null): void;
     /**
-     * Registers a callback function that is called when the control's value changes
+     * Registers a callback function that is called when the control's value
+     * changes in the UI (option selected or input cleared).
      */
-    registerOnChange(fn: (value: string | AutocompleteOption | null) => void): void;
+    registerOnChange(fn: (value: T | null) => void): void;
     /**
-     * Registers a callback function that is called when the control is touched
+     * Registers a callback function that is called when the control is
+     * first interacted with (blur or selection).
      */
     registerOnTouched(fn: () => void): void;
     /**
-     * Sets the disabled state of the control
+     * Sets the disabled state of the internal control. Called by the parent form
+     * when `control.disable()` or `control.enable()` is invoked.
      */
     setDisabledState(isDisabled: boolean): void;
+    /** Updates the filter text signal as the user types in the input */
+    onInput(event: Event): void;
     /**
-     * Initializes the filtered options observable pipeline
-     */
-    ngOnInit(): void;
-    /**
-     * Binds the displayFn to the component context on input changes
-     */
-    ngOnChanges(_changes: SimpleChanges): void;
-    /**
-     * Clears the input value, resets the control, and re-focuses the input
-     */
-    clearInput(evt: Event): void;
-    /**
-     * Toggles the autocomplete panel open or closed
-     */
-    openOrClosePanel(evt: Event, trigger: MatAutocompleteTrigger): void;
-    /**
-     * Returns the display value for the given option. Uses custom displayWith function if provided,
-     * otherwise falls back to the bindLabel property or the string value itself.
-     */
-    displayFn(object: string | AutocompleteOption): string;
-    /**
-     * Emits the selected value and notifies the parent form of the selection change
-     */
-    emitSelectedValue($event: MatOptionSelectionChange): void;
-    /**
-     * Updates the arrow icon to point up when the panel opens
+     * Clears the input value, resets the filter, notifies the parent form,
+     * and re-focuses the input element.
      */
-    onPanelOpened(): void;
+    clearInput(event: Event): void;
+    /** Opens the autocomplete panel programmatically */
+    openPanel(): void;
     /**
-     * Updates the arrow icon to point down when the panel closes
+     * Handles option selection from the dropdown. Resets the filter text,
+     * notifies the parent form of the new value, and emits the selectionChange output.
      */
-    onPanelClosed(): 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; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "noOptionsText": { "alias": "noOptionsText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "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 {
@@ -1131,4 +1090,4 @@ declare const markSuccess: (progressState: WritableSignal<ProgressState>, messag
 declare const markError: (progressState: WritableSignal<ProgressState>, message?: string) => void;
 
 export { AlertComponent, AutocompleteComponent, BaseButtonDirective, BsLinkButtonComponent, BsLinkButtonDirective, CloseButtonDirective, ConfirmDialogComponent, DeleteButtonComponent, DeleteButtonDirective, EditBsButtonComponent, EditBsButtonDirective, EditButtonComponent, EditButtonDirective, EditSolidSvgComponent, EditSvgIconButtonComponent, EditSvgIconButtonDirective, EntityStore, ExcelExportButtonComponent, ExcelExportButtonDirective, ManageButtonComponent, ManageButtonDirective, MatSnackBarService, NgxPrintDirective, NgxSpinnerComponent, NgxSpinnerService, PdfExportButtonComponent, PdfExportButtonDirective, PreventMultipleClicksDirective, PrimaryButtonComponent, PrimaryButtonDirective, SavePrimaryButtonComponent, SavePrimaryButtonDirective, SearchButtonComponent, SpinnerComponent, Store, SuccessButtonComponent, SuccessButtonDirective, ViewButtonComponent, ViewButtonDirective, ViewPrimaryButtonComponent, ViewPrimaryButtonDirective, initializeState, markError, markLoading, markSuccess };
-export type { AlertType, AutocompleteOption, ConfirmDialogData, MatSnackBarOptions, ProgressState };
+export type { AlertType, ConfirmDialogData, MatSnackBarOptions, ProgressState };