@js-smart/ng-kit 21.4.0 → 21.5.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, forwardRef, Input, Optional, DOCUMENT, Directive, ElementRef, ViewContainerRef, Inject, computed } from '@angular/core';
+import { inject, ChangeDetectorRef, input, signal, output, effect, ChangeDetectionStrategy, Component, Pipe, Injectable, HostListener, ViewChild, DestroyRef, forwardRef, DOCUMENT, Input, Directive, ElementRef, ViewContainerRef, Inject, computed } from '@angular/core';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { BehaviorSubject, Subject, throttleTime } from 'rxjs';
 import { filter, takeUntil, startWith, map } from 'rxjs/operators';
@@ -7,6 +7,7 @@ import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { AsyncPipe } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i3 from '@angular/material/autocomplete';
@@ -420,7 +421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
  */
 class AutocompleteComponent {
     constructor() {
-        this.cdRef = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
         /**
          * Internal form control for the autocomplete
          */
@@ -452,7 +453,7 @@ class AutocompleteComponent {
         /**
          * Function that maps an option's control value to its display value in the trigger.
          */
-        this.displayWith = null;
+        this.displayWith = input(null, ...(ngDevMode ? [{ debugName: "displayWith" }] : []));
         /**
          * Specifies if the autocomplete is required. Default is not required.
          */
@@ -461,6 +462,18 @@ class AutocompleteComponent {
          * Specifies if the autocomplete is disabled. Default is not required.
          */
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        /**
+         * Text displayed when no options match the input. Defaults to 'No options'
+         */
+        this.noOptionsText = input('No options', ...(ngDevMode ? [{ debugName: "noOptionsText" }] : []));
+        /**
+         * Whether the autocomplete is in a loading state. Shows a loading message instead of options
+         */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        /**
+         * Text displayed when the autocomplete is in a loading state. Defaults to 'Loading...'
+         */
+        this.loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
         /**
          * List of Objects that need to be bind and searched for
          */
@@ -470,24 +483,34 @@ class AutocompleteComponent {
          */
         this.onSelectionChange = output();
         /**
-         * BehaviorSubject that shows the current active arrow icon
+         * Signal that tracks the current arrow icon state
          */
-        this.arrowIconSubject = new BehaviorSubject('arrow_drop_down');
-        // ControlValueAccessor implementation
+        this.arrowIcon = signal('arrow_drop_down', ...(ngDevMode ? [{ debugName: "arrowIcon" }] : []));
         this.onChange = () => { };
         this.onTouched = () => { };
     }
+    /**
+     * Writes a new value to the control
+     */
     writeValue(value) {
         this.control.setValue(value, { emitEvent: false });
     }
+    /**
+     * Registers a callback function that is called when the control's value changes
+     */
     registerOnChange(fn) {
         this.onChange = fn;
-        // Forward value changes from internal control to parent form
-        this.control.valueChanges.subscribe((value) => fn(value));
+        this.control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => fn(value));
     }
+    /**
+     * Registers a callback function that is called when the control is touched
+     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /**
+     * Sets the disabled state of the control
+     */
     setDisabledState(isDisabled) {
         if (isDisabled) {
             this.control.disable();
@@ -496,25 +519,44 @@ class AutocompleteComponent {
             this.control.enable();
         }
     }
-    ngAfterContentChecked() {
-        this.cdRef.detectChanges();
-    }
+    /**
+     * Initializes the filtered options observable pipeline
+     */
     ngOnInit() {
-        this.filteredOptions = this.control.valueChanges.pipe(startWith(''), map((value) => (typeof value === 'string' ? value : value !== null ? value[this.bindLabel()] : '')), map((propertyName) => this.data()?.filter((option) => {
-            return typeof option === 'string'
-                ? option?.toLowerCase().startsWith(propertyName.toLowerCase())
-                : option[this.bindLabel()]?.toLowerCase().indexOf(propertyName.toLowerCase()) === 0;
-        }) ?? this.data()?.slice()));
+        this.filteredOptions = this.control.valueChanges.pipe(startWith(''), map((value) => (typeof value === 'string' ? value : '')), map((propertyName) => {
+            if (!propertyName) {
+                return this.data()?.slice();
+            }
+            // If the value exactly matches an existing option, show all options
+            const isSelectedValue = this.data()?.some((option) => typeof option === 'string' && option === propertyName);
+            if (isSelectedValue) {
+                return this.data()?.slice();
+            }
+            return (this.data()?.filter((option) => {
+                return typeof option === 'string'
+                    ? option?.toLowerCase().includes(propertyName.toLowerCase())
+                    : option[this.bindLabel()]?.toLowerCase().includes(propertyName.toLowerCase());
+            }) ?? this.data()?.slice());
+        }));
     }
+    /**
+     * Binds the displayFn to the component context on input changes
+     */
     ngOnChanges(_changes) {
         this.displayFn = this.displayFn.bind(this);
     }
+    /**
+     * Clears the input value, resets the control, and re-focuses the input
+     */
     clearInput(evt) {
         evt.stopPropagation();
         this.control.reset();
         this.onChange(null);
         this.inputAutoComplete?.nativeElement.focus();
     }
+    /**
+     * Toggles the autocomplete panel open or closed
+     */
     openOrClosePanel(evt, trigger) {
         evt.stopPropagation();
         if (trigger.panelOpen) {
@@ -524,49 +566,62 @@ class AutocompleteComponent {
             trigger.openPanel();
         }
     }
+    /**
+     * 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) {
-        if (this.displayWith !== undefined && this.displayWith !== null && typeof this.displayWith === 'function') {
-            this.displayFn = this.displayWith.bind(this);
-            return this.displayWith(object);
+        const customDisplayWith = this.displayWith();
+        if (customDisplayWith) {
+            return customDisplayWith(object);
         }
-        else {
-            if (typeof object === 'string') {
-                return object;
-            }
-            return object?.[this.bindLabel()] ? object[this.bindLabel()] : '';
+        if (typeof object === 'string') {
+            return object;
         }
+        return object?.[this.bindLabel()] ? object[this.bindLabel()] : '';
     }
+    /**
+     * Emits the selected value and notifies the parent form of the selection change
+     */
     emitSelectedValue($event) {
         this.onSelectionChange.emit($event.source.value);
         this.onChange($event.source.value);
         this.onTouched();
     }
+    /**
+     * Updates the arrow icon to point up when the panel opens
+     */
+    onPanelOpened() {
+        this.arrowIcon.set('arrow_drop_up');
+    }
+    /**
+     * Updates the arrow icon to point down when the panel closes
+     */
+    onPanelClosed() {
+        this.arrowIcon.set('arrow_drop_down');
+    }
     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 }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, 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 }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, noOptionsText: { classPropertyName: "noOptionsText", publicName: "noOptionsText", 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 }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputAutoComplete", first: true, predicate: ["inputAutoComplete"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[formControl]=\"control\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (control.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n", dependencies: [{ 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], viewQueries: [{ propertyName: "inputAutoComplete", first: true, predicate: ["inputAutoComplete"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field [appearance]=\"appearance()\" [class]=\"classes()\">\n\t<mat-label>{{ label() }}</mat-label>\n\t<input\n\t\t#inputAutoComplete\n\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t[formControl]=\"control\"\n\t\t[matAutocomplete]=\"auto\"\n\t\t[placeholder]=\"placeHolder()\"\n\t\t[required]=\"required()\"\n\t\tmatInput\n\t\ttype=\"text\" />\n\n\t@if (!control.disabled) {\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t<button\n\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t[style.visibility]=\"control.value ? 'visible' : 'hidden'\"\n\t\t\t\taria-label=\"Clear\"\n\t\t\t\tmat-icon-button\n\t\t\t\ttype=\"button\">\n\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t</button>\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Toggle dropdown\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIcon() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\t}\n\n\t<mat-autocomplete\n\t\t#auto=\"matAutocomplete\"\n\t\t(closed)=\"onPanelClosed()\"\n\t\t(opened)=\"onPanelOpened()\"\n\t\t(optionSelected)=\"onPanelClosed()\"\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 | async; track typeof option === 'string' ? option : option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</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", dependencies: [{ 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'autocomplete, lib-autocomplete', imports: [ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule, MatButtonModule, MatIconModule, AsyncPipe], providers: [
+            args: [{ selector: 'autocomplete, lib-autocomplete', imports: [AsyncPipe, ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div>\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[formControl]=\"control\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (control.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n" }]
+                    ], template: "<mat-form-field [appearance]=\"appearance()\" [class]=\"classes()\">\n\t<mat-label>{{ label() }}</mat-label>\n\t<input\n\t\t#inputAutoComplete\n\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t[formControl]=\"control\"\n\t\t[matAutocomplete]=\"auto\"\n\t\t[placeholder]=\"placeHolder()\"\n\t\t[required]=\"required()\"\n\t\tmatInput\n\t\ttype=\"text\" />\n\n\t@if (!control.disabled) {\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t<button\n\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t[style.visibility]=\"control.value ? 'visible' : 'hidden'\"\n\t\t\t\taria-label=\"Clear\"\n\t\t\t\tmat-icon-button\n\t\t\t\ttype=\"button\">\n\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t</button>\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Toggle dropdown\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIcon() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\t}\n\n\t<mat-autocomplete\n\t\t#auto=\"matAutocomplete\"\n\t\t(closed)=\"onPanelClosed()\"\n\t\t(opened)=\"onPanelOpened()\"\n\t\t(optionSelected)=\"onPanelClosed()\"\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 | async; track typeof option === 'string' ? option : option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</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" }]
         }], propDecorators: { inputAutoComplete: [{
                 type: ViewChild,
                 args: ['inputAutoComplete']
-            }], 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 }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], displayWith: [{
-                type: Input
-            }, {
-                type: Optional
-            }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
+            }], 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 }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], noOptionsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
 
 class PrintOptions {
     constructor(options) {