@js-smart/ng-kit 21.7.1 → 21.9.0

package/package.json

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

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

@@ -1,9 +1,9 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, ChangeDetectorRef, OnDestroy, ElementRef, ViewContainerRef, ComponentRef, WritableSignal } from '@angular/core';
+import { OnInit, ChangeDetectorRef, OnDestroy, ElementRef, AfterViewInit, ViewContainerRef, ComponentRef, WritableSignal } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { ThemePalette } from '@angular/material/core';
 import { ControlValueAccessor, FormControl } from '@angular/forms';
-import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
@@ -267,6 +267,8 @@ declare class SpinnerComponent {
 declare class AutocompleteComponent<T = string> implements ControlValueAccessor {
     /** Gets reference to the MatAutocompleteTrigger to programmatically open/close the panel */
     autocompleteTrigger: _angular_core.Signal<MatAutocompleteTrigger>;
+    /** MatAutocomplete instance (used to scroll the selected option into view when the panel opens) */
+    matAutocomplete: _angular_core.Signal<MatAutocomplete>;
     /** Gets reference to the input element for re-focusing after clear */
     inputElement: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     /** Label of the autocomplete form field */
@@ -293,8 +295,10 @@ declare class AutocompleteComponent<T = string> implements ControlValueAccessor
     noOptionsText: _angular_core.InputSignal<string>;
     /** Emits the selected value when an option is picked from the dropdown */
     selectionChange: _angular_core.OutputEmitterRef<T>;
+    /** Emits the raw text in the input on each keystroke (filter text while typing) */
+    onInputChange: _angular_core.OutputEmitterRef<string>;
     /** Internal form control for the autocomplete input */
-    control: FormControl<string | null>;
+    control: FormControl<string | T | 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 */
@@ -337,6 +341,9 @@ declare class AutocompleteComponent<T = string> implements ControlValueAccessor
      * and re-focuses the input element.
      */
     clearInput(event: Event): void;
+    /** Runs when the autocomplete overlay opens: keep expanded state and scroll the selected option into view. */
+    onPanelOpened(): void;
+    private scrollSelectedOptionIntoView;
     /** Opens the autocomplete panel programmatically */
     openPanel(): void;
     /**
@@ -349,7 +356,49 @@ declare class AutocompleteComponent<T = string> implements ControlValueAccessor
     /** Callback function registered by the parent form to propagate touched state */
     private onTouched;
     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>;
+    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"; "onInputChange": "onInputChange"; }, never, never, true, never>;
+}
+
+/**
+ * Single directive that adds clear and dropdown-toggle icon buttons to a
+ * Material autocomplete input. Unlike {@link LibAutocompleteActionsDirective},
+ * this directive is applied directly to the `input` element and does not require
+ * an anchor directive or a separate suffix component.
+ *
+ * Usage:
+ * ```html
+ * <mat-form-field appearance="outline">
+ *   <mat-label>City</mat-label>
+ *   <input matInput [matAutocomplete]="auto" formControlName="city" autocompleteSuffix />
+ *   <mat-autocomplete #auto="matAutocomplete"> … </mat-autocomplete>
+ * </mat-form-field>
+ * ```
+ *
+ * @author Pavan Kumar Jadda
+ * @since 21.8.0
+ */
+declare class AutocompleteSuffixDirective implements AfterViewInit {
+    private readonly trigger;
+    private readonly el;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly ngControl;
+    private clearBtn;
+    private clearPlaceholder;
+    private dropdownIconSpan;
+    private isExpanded;
+    private readonly unlisten;
+    ngAfterViewInit(): void;
+    private createSuffixElements;
+    private createIconButton;
+    private setupListeners;
+    private clearInput;
+    private togglePanel;
+    private updateClearButtonVisibility;
+    private scrollSelectedOptionIntoView;
+    private updateDropdownIcon;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AutocompleteSuffixDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AutocompleteSuffixDirective, "input[matAutocomplete][autocompleteSuffix]", never, {}, {}, never, never, true, never>;
 }
 
 declare class PrintOptions {
@@ -1089,5 +1138,5 @@ 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 { AlertComponent, AutocompleteComponent, AutocompleteSuffixDirective, 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, ConfirmDialogData, MatSnackBarOptions, ProgressState };