@js-smart/ng-kit 21.7.1 → 21.9.0

package/fesm2022/js-smart-ng-kit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, input, signal, output, effect, ChangeDetectionStrategy, Component, Pipe, Injectable, HostListener, ViewChild, viewChild, computed, forwardRef, DOCUMENT, Input, Directive, ElementRef, ViewContainerRef, Inject } from '@angular/core';
+import { inject, ChangeDetectorRef, input, signal, output, effect, ChangeDetectionStrategy, Component, Pipe, Injectable, HostListener, ViewChild, viewChild, computed, forwardRef, ElementRef, Renderer2, DestroyRef, Directive, DOCUMENT, Input, ViewContainerRef, Inject } from '@angular/core';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { BehaviorSubject, Subject, throttleTime } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
@@ -8,9 +8,9 @@ import * as i1$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { NgClass } from '@angular/common';
 import * as i1$2 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import * as i2 from '@angular/material/autocomplete';
-import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i1$4 from '@angular/material/button';
 import { MatButtonModule, MatAnchor, MatButton } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -421,6 +421,8 @@ class AutocompleteComponent {
     constructor() {
         /** Gets reference to the MatAutocompleteTrigger to programmatically open/close the panel */
         this.autocompleteTrigger = viewChild.required(MatAutocompleteTrigger);
+        /** MatAutocomplete instance (used to scroll the selected option into view when the panel opens) */
+        this.matAutocomplete = viewChild.required(MatAutocomplete);
         /** Gets reference to the input element for re-focusing after clear */
         this.inputElement = viewChild.required('inputEl');
         /** Label of the autocomplete form field */
@@ -447,8 +449,10 @@ class AutocompleteComponent {
         this.noOptionsText = input('No values found', ...(ngDevMode ? [{ debugName: "noOptionsText" }] : []));
         /** Emits the selected value when an option is picked from the dropdown */
         this.selectionChange = output();
+        /** Emits the raw text in the input on each keystroke (filter text while typing) */
+        this.onInputChange = output();
         /** Internal form control for the autocomplete input */
-        this.control = new FormControl('');
+        this.control = new FormControl(null);
         /** Signal that tracks whether the autocomplete panel is currently open */
         this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
         /** Signal that tracks the current filter text typed by the user */
@@ -468,7 +472,7 @@ class AutocompleteComponent {
          * selected value in the input field. Returns empty string for null/undefined values.
          */
         this.displayFn = (value) => {
-            if (value == null) {
+            if (value == null || value === '') {
                 return '';
             }
             return this.displayWith()(value);
@@ -487,7 +491,9 @@ class AutocompleteComponent {
      * when the form control value is set programmatically.
      */
     writeValue(value) {
-        this.control.setValue(value ?? '', { emitEvent: false });
+        // Use null (not '') so MatAutocompleteTrigger clears mat-option selection and stays in sync with the parent CVA.
+        const internal = value == null ? null : value;
+        this.control.setValue(internal, { emitEvent: false });
     }
     /**
      * Registers a callback function that is called when the control's value
@@ -519,18 +525,38 @@ class AutocompleteComponent {
     onInput(event) {
         const value = event.target.value;
         this.filterText.set(value);
+        this.onInputChange.emit(value);
     }
     /**
      * Clears the input value, resets the filter, notifies the parent form,
      * and re-focuses the input element.
      */
     clearInput(event) {
-        this.control.setValue('');
+        event.preventDefault();
+        event.stopPropagation();
+        this.autocompleteTrigger().closePanel();
+        this.control.setValue(null, { emitEvent: false });
         this.filterText.set('');
         this.onChange(null);
         this.onTouched();
-        event.stopPropagation();
-        this.inputElement().nativeElement.focus();
+        queueMicrotask(() => this.inputElement().nativeElement.focus());
+    }
+    /** Runs when the autocomplete overlay opens: keep expanded state and scroll the selected option into view. */
+    onPanelOpened() {
+        this.isExpanded.set(true);
+        this.scrollSelectedOptionIntoView();
+    }
+    scrollSelectedOptionIntoView() {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                const panelEl = this.matAutocomplete().panel?.nativeElement;
+                if (!panelEl) {
+                    return;
+                }
+                const selected = panelEl.querySelector('.mat-mdc-option.mdc-list-item--selected');
+                selected?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            });
+        });
     }
     /** Opens the autocomplete panel programmatically */
     openPanel() {
@@ -547,13 +573,13 @@ class AutocompleteComponent {
         this.selectionChange.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: AutocompleteComponent, isStandalone: true, selector: "autocomplete, lib-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, noOptionsText: { classPropertyName: "noOptionsText", publicName: "noOptionsText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: AutocompleteComponent, isStandalone: true, selector: "autocomplete, lib-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, noOptionsText: { classPropertyName: "noOptionsText", publicName: "noOptionsText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", onInputChange: "onInputChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }, { propertyName: "inputElement", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\n\t#origin=\"matAutocompleteOrigin\"\n\t[appearance]=\"appearance()\"\n\t[ngClass]=\"classes()\"\n\tmatAutocompleteOrigin\n\tsubscriptSizing=\"dynamic\">\n\t<mat-label>{{ label() }}</mat-label>\n\n\t<input\n\t\t#inputEl\n\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t(click)=\"trigger.openPanel()\"\n\t\t(input)=\"onInput($event)\"\n\t\t[formControl]=\"control\"\n\t\t[matAutocompleteConnectedTo]=\"origin\"\n\t\t[matAutocomplete]=\"auto\"\n\t\t[placeholder]=\"placeholder()\"\n\t\tmatInput\n\t\ttype=\"text\" />\n\n\t<div class=\"autocomplete-suffix\" matSuffix>\n\t\t@if (control.value) {\n\t\t\t<button type=\"button\" (click)=\"clearInput($event)\" class=\"suffix-action-btn\" mat-icon-button>\n\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span aria-hidden=\"true\" class=\"suffix-placeholder\"></span>\n\t\t}\n\t\t<button\n\t\t\t(click)=\"trigger.panelOpen ? trigger.closePanel() : trigger.openPanel(); $event.stopPropagation()\"\n\t\t\t[attr.aria-label]=\"trigger.panelOpen ? 'Close options' : 'Open options'\"\n\t\t\tclass=\"suffix-action-btn\"\n\t\t\tmat-icon-button\n\t\t\ttype=\"button\">\n\t\t\t@if (isExpanded()) {\n\t\t\t\t<mat-icon>arrow_drop_up</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>arrow_drop_down</mat-icon>\n\t\t\t}\n\t\t</button>\n\t</div>\n\n\t<mat-autocomplete\n\t\t#auto=\"matAutocomplete\"\n\t\t(closed)=\"isExpanded.set(false)\"\n\t\t(opened)=\"isExpanded.set(true)\"\n\t\t(optionSelected)=\"onOptionSelected($event.option.value)\"\n\t\t[displayWith]=\"displayFn\">\n\t\t@if (loading()) {\n\t\t\t<mat-option disabled>\n\t\t\t\t<div style=\"display: flex; align-items: center; gap: 8px\">\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t<span>{{ loadingText() }}</span>\n\t\t\t\t</div>\n\t\t\t</mat-option>\n\t\t} @else {\n\t\t\t@for (option of filteredOptions(); track option) {\n\t\t\t\t<mat-option [value]=\"option\">{{ displayWith()(option) }}</mat-option>\n\t\t\t} @empty {\n\t\t\t\t<mat-option disabled>{{ noOptionsText() }}</mat-option>\n\t\t\t}\n\t\t}\n\t</mat-autocomplete>\n</mat-form-field>\n", styles: [".autocomplete-suffix{display:flex;align-items:center}.suffix-action-btn{width:40px;height:40px;padding:0}.suffix-placeholder{display:inline-block;width:40px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i2.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+        ], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }, { propertyName: "matAutocomplete", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }, { propertyName: "inputElement", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\n\t#origin=\"matAutocompleteOrigin\"\n\t[appearance]=\"appearance()\"\n\t[ngClass]=\"classes()\"\n\tmatAutocompleteOrigin\n\tsubscriptSizing=\"dynamic\">\n\t<mat-label>{{ label() }}</mat-label>\n\n\t<input\n\t\t#inputEl\n\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t(click)=\"trigger.openPanel()\"\n\t\t(input)=\"onInput($event)\"\n\t\t[formControl]=\"control\"\n\t\t[matAutocompleteConnectedTo]=\"origin\"\n\t\t[matAutocomplete]=\"auto\"\n\t\t[placeholder]=\"placeholder()\"\n\t\tmatInput\n\t\ttype=\"text\" />\n\n\t<div class=\"autocomplete-suffix\" matSuffix>\n\t\t@if (control.value) {\n\t\t\t<button type=\"button\" (click)=\"clearInput($event)\" class=\"suffix-action-btn\" mat-icon-button>\n\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span aria-hidden=\"true\" class=\"suffix-placeholder\"></span>\n\t\t}\n\t\t<button\n\t\t\t(click)=\"trigger.panelOpen ? trigger.closePanel() : trigger.openPanel(); $event.stopPropagation()\"\n\t\t\t[attr.aria-label]=\"trigger.panelOpen ? 'Close options' : 'Open options'\"\n\t\t\tclass=\"suffix-action-btn\"\n\t\t\tmat-icon-button\n\t\t\ttype=\"button\">\n\t\t\t@if (isExpanded()) {\n\t\t\t\t<mat-icon>arrow_drop_up</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>arrow_drop_down</mat-icon>\n\t\t\t}\n\t\t</button>\n\t</div>\n\n\t<mat-autocomplete\n\t\t#auto=\"matAutocomplete\"\n\t\t(closed)=\"isExpanded.set(false)\"\n\t\t(opened)=\"onPanelOpened()\"\n\t\t(optionSelected)=\"onOptionSelected($event.option.value)\"\n\t\t[displayWith]=\"displayFn\">\n\t\t@if (loading()) {\n\t\t\t<mat-option disabled>\n\t\t\t\t<div style=\"display: flex; align-items: center; gap: 8px\">\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t<span>{{ loadingText() }}</span>\n\t\t\t\t</div>\n\t\t\t</mat-option>\n\t\t} @else {\n\t\t\t@for (option of filteredOptions(); track option) {\n\t\t\t\t<mat-option [value]=\"option\">{{ displayWith()(option) }}</mat-option>\n\t\t\t} @empty {\n\t\t\t\t<mat-option disabled>{{ noOptionsText() }}</mat-option>\n\t\t\t}\n\t\t}\n\t</mat-autocomplete>\n</mat-form-field>\n", styles: [".autocomplete-suffix{display:flex;align-items:center}.suffix-action-btn{width:40px;height:40px;padding:0}.suffix-placeholder{display:inline-block;width:40px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i2.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -572,8 +598,194 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                             useExisting: forwardRef(() => AutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<mat-form-field\n\t#origin=\"matAutocompleteOrigin\"\n\t[appearance]=\"appearance()\"\n\t[ngClass]=\"classes()\"\n\tmatAutocompleteOrigin\n\tsubscriptSizing=\"dynamic\">\n\t<mat-label>{{ label() }}</mat-label>\n\n\t<input\n\t\t#inputEl\n\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t(click)=\"trigger.openPanel()\"\n\t\t(input)=\"onInput($event)\"\n\t\t[formControl]=\"control\"\n\t\t[matAutocompleteConnectedTo]=\"origin\"\n\t\t[matAutocomplete]=\"auto\"\n\t\t[placeholder]=\"placeholder()\"\n\t\tmatInput\n\t\ttype=\"text\" />\n\n\t<div class=\"autocomplete-suffix\" matSuffix>\n\t\t@if (control.value) {\n\t\t\t<button type=\"button\" (click)=\"clearInput($event)\" class=\"suffix-action-btn\" mat-icon-button>\n\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span aria-hidden=\"true\" class=\"suffix-placeholder\"></span>\n\t\t}\n\t\t<button\n\t\t\t(click)=\"trigger.panelOpen ? trigger.closePanel() : trigger.openPanel(); $event.stopPropagation()\"\n\t\t\t[attr.aria-label]=\"trigger.panelOpen ? 'Close options' : 'Open options'\"\n\t\t\tclass=\"suffix-action-btn\"\n\t\t\tmat-icon-button\n\t\t\ttype=\"button\">\n\t\t\t@if (isExpanded()) {\n\t\t\t\t<mat-icon>arrow_drop_up</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>arrow_drop_down</mat-icon>\n\t\t\t}\n\t\t</button>\n\t</div>\n\n\t<mat-autocomplete\n\t\t#auto=\"matAutocomplete\"\n\t\t(closed)=\"isExpanded.set(false)\"\n\t\t(opened)=\"isExpanded.set(true)\"\n\t\t(optionSelected)=\"onOptionSelected($event.option.value)\"\n\t\t[displayWith]=\"displayFn\">\n\t\t@if (loading()) {\n\t\t\t<mat-option disabled>\n\t\t\t\t<div style=\"display: flex; align-items: center; gap: 8px\">\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t<span>{{ loadingText() }}</span>\n\t\t\t\t</div>\n\t\t\t</mat-option>\n\t\t} @else {\n\t\t\t@for (option of filteredOptions(); track option) {\n\t\t\t\t<mat-option [value]=\"option\">{{ displayWith()(option) }}</mat-option>\n\t\t\t} @empty {\n\t\t\t\t<mat-option disabled>{{ noOptionsText() }}</mat-option>\n\t\t\t}\n\t\t}\n\t</mat-autocomplete>\n</mat-form-field>\n", styles: [".autocomplete-suffix{display:flex;align-items:center}.suffix-action-btn{width:40px;height:40px;padding:0}.suffix-placeholder{display:inline-block;width:40px}\n"] }]
-        }], propDecorators: { autocompleteTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocompleteTrigger), { isSignal: true }] }], inputElement: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], noOptionsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+                    ], template: "<mat-form-field\n\t#origin=\"matAutocompleteOrigin\"\n\t[appearance]=\"appearance()\"\n\t[ngClass]=\"classes()\"\n\tmatAutocompleteOrigin\n\tsubscriptSizing=\"dynamic\">\n\t<mat-label>{{ label() }}</mat-label>\n\n\t<input\n\t\t#inputEl\n\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t(click)=\"trigger.openPanel()\"\n\t\t(input)=\"onInput($event)\"\n\t\t[formControl]=\"control\"\n\t\t[matAutocompleteConnectedTo]=\"origin\"\n\t\t[matAutocomplete]=\"auto\"\n\t\t[placeholder]=\"placeholder()\"\n\t\tmatInput\n\t\ttype=\"text\" />\n\n\t<div class=\"autocomplete-suffix\" matSuffix>\n\t\t@if (control.value) {\n\t\t\t<button type=\"button\" (click)=\"clearInput($event)\" class=\"suffix-action-btn\" mat-icon-button>\n\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span aria-hidden=\"true\" class=\"suffix-placeholder\"></span>\n\t\t}\n\t\t<button\n\t\t\t(click)=\"trigger.panelOpen ? trigger.closePanel() : trigger.openPanel(); $event.stopPropagation()\"\n\t\t\t[attr.aria-label]=\"trigger.panelOpen ? 'Close options' : 'Open options'\"\n\t\t\tclass=\"suffix-action-btn\"\n\t\t\tmat-icon-button\n\t\t\ttype=\"button\">\n\t\t\t@if (isExpanded()) {\n\t\t\t\t<mat-icon>arrow_drop_up</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>arrow_drop_down</mat-icon>\n\t\t\t}\n\t\t</button>\n\t</div>\n\n\t<mat-autocomplete\n\t\t#auto=\"matAutocomplete\"\n\t\t(closed)=\"isExpanded.set(false)\"\n\t\t(opened)=\"onPanelOpened()\"\n\t\t(optionSelected)=\"onOptionSelected($event.option.value)\"\n\t\t[displayWith]=\"displayFn\">\n\t\t@if (loading()) {\n\t\t\t<mat-option disabled>\n\t\t\t\t<div style=\"display: flex; align-items: center; gap: 8px\">\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t<span>{{ loadingText() }}</span>\n\t\t\t\t</div>\n\t\t\t</mat-option>\n\t\t} @else {\n\t\t\t@for (option of filteredOptions(); track option) {\n\t\t\t\t<mat-option [value]=\"option\">{{ displayWith()(option) }}</mat-option>\n\t\t\t} @empty {\n\t\t\t\t<mat-option disabled>{{ noOptionsText() }}</mat-option>\n\t\t\t}\n\t\t}\n\t</mat-autocomplete>\n</mat-form-field>\n", styles: [".autocomplete-suffix{display:flex;align-items:center}.suffix-action-btn{width:40px;height:40px;padding:0}.suffix-placeholder{display:inline-block;width:40px}\n"] }]
+        }], propDecorators: { autocompleteTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocompleteTrigger), { isSignal: true }] }], matAutocomplete: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocomplete), { isSignal: true }] }], inputElement: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], noOptionsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onInputChange: [{ type: i0.Output, args: ["onInputChange"] }] } });
+
+/**
+ * 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
+ */
+class AutocompleteSuffixDirective {
+    constructor() {
+        this.trigger = inject(MatAutocompleteTrigger);
+        this.el = inject((ElementRef));
+        this.renderer = inject(Renderer2);
+        this.destroyRef = inject(DestroyRef);
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        this.clearBtn = null;
+        this.clearPlaceholder = null;
+        this.dropdownIconSpan = null;
+        this.isExpanded = false;
+        this.unlisten = [];
+    }
+    ngAfterViewInit() {
+        this.createSuffixElements();
+        this.setupListeners();
+        this.updateClearButtonVisibility();
+    }
+    createSuffixElements() {
+        const formField = this.el.nativeElement.closest('mat-form-field');
+        if (!formField) {
+            return;
+        }
+        const flexContainer = formField.querySelector('.mat-mdc-form-field-flex');
+        if (!flexContainer) {
+            return;
+        }
+        // Find or create the suffix wrapper
+        let suffixWrapper = flexContainer.querySelector('.mat-mdc-form-field-icon-suffix');
+        if (!suffixWrapper) {
+            suffixWrapper = this.renderer.createElement('div');
+            this.renderer.addClass(suffixWrapper, 'mat-mdc-form-field-icon-suffix');
+            this.renderer.setAttribute(suffixWrapper, 'data-mat-icon-type', 'font');
+            this.renderer.appendChild(flexContainer, suffixWrapper);
+        }
+        const container = this.renderer.createElement('div');
+        this.renderer.setStyle(container, 'display', 'flex');
+        this.renderer.setStyle(container, 'align-items', 'center');
+        // Clear button (hidden when input is empty)
+        this.clearBtn = this.createIconButton('close', 'Clear value', (e) => this.clearInput(e));
+        this.renderer.setStyle(this.clearBtn, 'display', 'none');
+        // Placeholder keeps layout stable when clear button is hidden
+        this.clearPlaceholder = this.renderer.createElement('span');
+        this.renderer.setStyle(this.clearPlaceholder, 'display', 'inline-block');
+        this.renderer.setStyle(this.clearPlaceholder, 'width', '35px');
+        // Dropdown toggle button
+        const dropdownBtn = this.createIconButton('arrow_drop_down', 'Open options', (e) => this.togglePanel(e));
+        this.dropdownIconSpan = dropdownBtn.querySelector('.material-icons');
+        this.renderer.appendChild(container, this.clearBtn);
+        this.renderer.appendChild(container, this.clearPlaceholder);
+        this.renderer.appendChild(container, dropdownBtn);
+        this.renderer.appendChild(suffixWrapper, container);
+    }
+    createIconButton(iconName, ariaLabel, handler) {
+        const button = this.renderer.createElement('button');
+        this.renderer.setAttribute(button, 'type', 'button');
+        this.renderer.setAttribute(button, 'aria-label', ariaLabel);
+        this.renderer.setStyle(button, 'width', '35px');
+        this.renderer.setStyle(button, 'height', '35px');
+        this.renderer.setStyle(button, 'padding', '0');
+        this.renderer.setStyle(button, 'border', 'none');
+        this.renderer.setStyle(button, 'background', 'transparent');
+        this.renderer.setStyle(button, 'cursor', 'pointer');
+        this.renderer.setStyle(button, 'display', 'inline-flex');
+        this.renderer.setStyle(button, 'align-items', 'center');
+        this.renderer.setStyle(button, 'justify-content', 'center');
+        this.renderer.setStyle(button, 'border-radius', '50%');
+        this.renderer.setStyle(button, 'color', 'inherit');
+        const icon = this.renderer.createElement('span');
+        this.renderer.addClass(icon, 'material-icons');
+        this.renderer.setStyle(icon, 'font-size', '24px');
+        this.renderer.appendChild(icon, this.renderer.createText(iconName));
+        this.renderer.appendChild(button, icon);
+        this.unlisten.push(this.renderer.listen(button, 'click', handler));
+        return button;
+    }
+    setupListeners() {
+        // Track user typing
+        this.unlisten.push(this.renderer.listen(this.el.nativeElement, 'input', () => this.updateClearButtonVisibility()));
+        const autocomplete = this.trigger.autocomplete;
+        // Track autocomplete panel open/close
+        const openedSub = autocomplete.opened.subscribe(() => {
+            this.isExpanded = true;
+            this.updateDropdownIcon();
+            this.scrollSelectedOptionIntoView();
+        });
+        const closedSub = autocomplete.closed.subscribe(() => {
+            this.isExpanded = false;
+            this.updateDropdownIcon();
+            this.updateClearButtonVisibility();
+        });
+        // Track option selection
+        const selectedSub = autocomplete.optionSelected.subscribe(() => this.updateClearButtonVisibility());
+        // Track programmatic value changes via NgControl
+        let valueChangesSub = null;
+        if (this.ngControl?.control) {
+            valueChangesSub = this.ngControl.control.valueChanges.subscribe(() => this.updateClearButtonVisibility());
+        }
+        this.destroyRef.onDestroy(() => {
+            this.unlisten.forEach((fn) => fn());
+            openedSub.unsubscribe();
+            closedSub.unsubscribe();
+            selectedSub.unsubscribe();
+            valueChangesSub?.unsubscribe();
+        });
+    }
+    clearInput(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.trigger.closePanel();
+        this.el.nativeElement.value = '';
+        if (this.ngControl?.control) {
+            this.ngControl.control.setValue(null, { emitEvent: true });
+            this.ngControl.control.markAsTouched();
+        }
+        this.updateClearButtonVisibility();
+        queueMicrotask(() => this.el.nativeElement.focus());
+    }
+    togglePanel(event) {
+        event.stopPropagation();
+        if (this.trigger.panelOpen) {
+            this.trigger.closePanel();
+        }
+        else {
+            this.trigger.openPanel();
+        }
+    }
+    updateClearButtonVisibility() {
+        const hasValue = !!(this.el.nativeElement.value || this.ngControl?.control?.value);
+        if (this.clearBtn) {
+            this.renderer.setStyle(this.clearBtn, 'display', hasValue ? 'inline-flex' : 'none');
+        }
+        if (this.clearPlaceholder) {
+            this.renderer.setStyle(this.clearPlaceholder, 'display', hasValue ? 'none' : 'inline-block');
+        }
+    }
+    scrollSelectedOptionIntoView() {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                const panelEl = this.trigger.autocomplete.panel?.nativeElement;
+                if (!panelEl) {
+                    return;
+                }
+                const selected = panelEl.querySelector('.mat-mdc-option.mdc-list-item--selected');
+                selected?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            });
+        });
+    }
+    updateDropdownIcon() {
+        if (this.dropdownIconSpan) {
+            this.dropdownIconSpan.textContent = this.isExpanded ? 'arrow_drop_up' : 'arrow_drop_down';
+        }
+        const button = this.dropdownIconSpan?.parentElement;
+        if (button) {
+            this.renderer.setAttribute(button, 'aria-label', this.isExpanded ? 'Close options' : 'Open options');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AutocompleteSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: AutocompleteSuffixDirective, isStandalone: true, selector: "input[matAutocomplete][autocompleteSuffix]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AutocompleteSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[matAutocomplete][autocompleteSuffix]',
+                    standalone: true,
+                }]
+        }] });
 
 class PrintOptions {
     constructor(options) {
@@ -2427,5 +2639,5 @@ const markError = (progressState, message) => {
  * Generated bundle index. Do not edit.
  */
 
-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 };
 //# sourceMappingURL=js-smart-ng-kit.mjs.map