@yoozsoft/yoozsoft-ng 5.3.5 → 7.1.1

package/fesm2022/yoozsoft-yoozsoft-ng-autocomplete.mjs

@@ -1,276 +1,336 @@
-import * as i2 from '@angular/cdk/scrolling';
+import * as i1 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import { NgTemplateOutlet, NgClass } from '@angular/common';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, TemplateRef, forwardRef, HostListener, ViewChild, Output, Input, ContentChild, Component } from '@angular/core';
-import * as i1 from '@angular/forms';
+import { input, output, signal, computed, viewChild, inject, DestroyRef, ElementRef, PLATFORM_ID, TemplateRef, forwardRef, ContentChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subject, debounceTime, distinctUntilChanged, switchMap, catchError, of } from 'rxjs';
+import { fromEvent, debounceTime, distinctUntilChanged, switchMap, of, catchError, finalize } from 'rxjs';
 
-class YsAutocompleteComponent {
-    elRef;
-    searchTerm = '';
-    filteredOptions = [];
-    selectedOptions = [];
-    showDropdown = false;
-    activeIndex = -1;
-    error = null;
-    /** Array or async function */
-    options;
-    /** Label display field */
-    optionLabel = 'label';
-    /** placeholder */
-    placeholder = '';
-    /** Multiple choice mode */
-    multiple = false;
-    /** Button to clear selection */
-    showClear = false;
-    disabled = false;
+class YsAutocomplete {
+    /********************* Inputs */
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    loadingMessage = input('Loading...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingMessage" }] : /* istanbul ignore next */ []));
+    noResultMessage = input('No results found.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noResultMessage" }] : /* istanbul ignore next */ []));
+    optionLabel = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    showClear = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    selectionStyleClass = input('text-bg-light', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionStyleClass" }] : /* istanbul ignore next */ []));
+    clearIconClass = input('fa fa-times', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearIconClass" }] : /* istanbul ignore next */ []));
+    searchIconClass = input('fa fa-search', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchIconClass" }] : /* istanbul ignore next */ []));
+    loadingIconClass = input('fa fa-spinner fa-spin', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingIconClass" }] : /* istanbul ignore next */ []));
+    multipleCheckIconClass = input('fa fa-check', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multipleCheckIconClass" }] : /* istanbul ignore next */ []));
+    infiniteScroll = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "infiniteScroll" }] : /* istanbul ignore next */ []));
+    virtualScroll = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualScroll" }] : /* istanbul ignore next */ []));
+    virtualScrollItemSize = input(36, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : /* istanbul ignore next */ []));
+    virtualScrollThreshold = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualScrollThreshold" }] : /* istanbul ignore next */ []));
+    trackBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    compareWith = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    /********************* Outputs */
+    /** Event to request more items */
+    loadMore = output();
+    /** Return selected options */
+    selectionChange = output();
+    /********************* Signals */
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    filteredOptions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    selectedOptions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    showDropdown = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDropdown" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    error = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    internalLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalLoading" }] : /* istanbul ignore next */ []));
+    isLoading = computed(() => this.loading() || this.internalLoading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    static nextId = 0;
+    componentId = `ys-autocomplete-${YsAutocomplete.nextId++}`;
+    activeOptionId = computed(() => {
+        const index = this.activeIndex();
+        return index >= 0
+            ? `${this.componentId}-option-${index}`
+            : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
+    /********************* ViewChild */
+    inputRef = viewChild('inputRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    /********************* Inject */
+    destroyRef = inject(DestroyRef);
+    host = inject((ElementRef));
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
     /** Custom template */
     itemTemplate;
-    styleClass;
-    /** Badge style class on Multiple choice mode  */
-    badgeStyleClass = 'text-bg-light';
-    loading = false;
-    loadingMessage = 'Loading...';
-    /** No results found message */
-    noResultMessage = 'No results found.';
-    /** Infinite scroll feature enabled */
-    infiniteScroll = false;
-    virtualScroll = true;
-    virtualScrollItemSize = 36;
-    //   [virtualScrollOptions]="options"
-    /** Event to request more items */
-    loadMore = new EventEmitter();
-    /** Output selection */
-    selected = new EventEmitter();
-    /** Output selection after removed item */
-    removed = new EventEmitter();
-    search$ = new Subject();
-    _onChange = () => { };
-    _onTouched = () => { };
-    inputRef;
-    get isArrayItems() { return Array.isArray(this.options); }
-    get isFunctionItems() { return typeof this.options === 'function'; }
-    constructor(elRef) {
-        this.elRef = elRef;
-    }
-    ngOnInit() {
-        if (Array.isArray(this.options)) {
-            this.filteredOptions = this.options;
-        }
-        /** Only in async function mode */
-        if (typeof this.options === 'function') {
-            const fetchFn = this.options;
-            this.search$
-                .pipe(debounceTime(300), distinctUntilChanged(), switchMap((term) => {
-                this.loading = true;
-                this.error = null;
-                return fetchFn(term).pipe(catchError((err) => {
-                    this.error = 'Error receiving data!';
-                    console.error(err);
-                    return of([]);
-                }));
-            }))
-                .subscribe((results) => {
-                this.filteredOptions = results;
-                this.loading = false;
-                this.showDropdown = true;
+    onChange = (_) => { };
+    onTouched = () => { };
+    constructor() {
+        if (this.isBrowser) {
+            fromEvent(document, 'click')
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(event => {
+                const target = event.target;
+                if (!this.host.nativeElement.contains(target)) {
+                    this.showDropdown.set(false);
+                }
             });
         }
+        toObservable(this.searchTerm)
+            .pipe(debounceTime(300), distinctUntilChanged(), switchMap(term => {
+            const source = this.options();
+            if (Array.isArray(source)) {
+                const lower = term.toLowerCase();
+                return of(source.filter(item => this
+                    .getLabel(item)
+                    .toLowerCase()
+                    .includes(lower)));
+            }
+            this.internalLoading.set(true);
+            this.error.set(null);
+            return source(term).pipe(catchError(error => {
+                console.error(error);
+                this.error.set('Error receiving data!');
+                return of([]);
+            }), finalize(() => {
+                this.internalLoading.set(false);
+            }));
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe(result => {
+            this.filteredOptions.set(result);
+            // this.showDropdown.set(
+            //   result.length > 0
+            // );
+        });
     }
-    /** For the initial value of FormControl */
     writeValue(value) {
-        if (this.multiple) {
-            this.selectedOptions = value ? [...value] : [];
-        }
-        else {
-            this.searchTerm = value ? this.getLabel(value) : '';
+        if (this.multiple()) {
+            this.selectedOptions.set(Array.isArray(value)
+                ? [...value]
+                : []);
+            return;
         }
+        this.searchTerm.set(value
+            ? this.getLabel(value)
+            : '');
     }
     registerOnChange(fn) {
-        this._onChange = fn;
+        this.onChange = fn;
     }
     registerOnTouched(fn) {
-        this._onTouched = fn;
+        this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        if (this.inputRef) {
-            this.inputRef.nativeElement.disabled = isDisabled;
-        }
+        this.disabledState.set(isDisabled);
     }
-    onSearchChange() {
-        const term = this.searchTerm.trim();
-        if (Array.isArray(this.options)) {
+    onInput(event) {
+        const value = event.target.value;
+        this.onSearchChange(value);
+    }
+    onSearchChange(term) {
+        this.searchTerm.set(term.trim());
+        if (Array.isArray(this.options())) {
             const lower = term.toLowerCase();
-            this.filteredOptions = this.options.filter((item) => this.getLabel(item).toLowerCase().includes(lower));
-            this.showDropdown = this.filteredOptions.length >= 0;
-        }
-        else if (typeof this.options === 'function') {
-            this.search$.next(term);
+            this.filteredOptions.set(this.options().filter(item => this.getLabel(item).toLowerCase().includes(lower)));
+            this.showDropdown.set(true);
         }
         if (!this.multiple && !term) {
             this.clearSelection();
         }
     }
     getLabel(item) {
-        if (!item)
+        if (item === null || item === undefined) {
             return '';
-        if (typeof item === 'string')
-            return item;
-        if (item && this.optionLabel && item[this.optionLabel]) {
-            return item[this.optionLabel];
         }
-        return '';
+        if (typeof item === 'string' || typeof item === 'number') {
+            return String(item);
+        }
+        const key = this.optionLabel();
+        const value = item?.[key];
+        return value != null
+            ? String(value)
+            : '';
+    }
+    isEqual(a, b) {
+        const comparer = this.compareWith();
+        if (comparer) {
+            return comparer(a, b);
+        }
+        return this.getLabel(a) === this.getLabel(b);
     }
     onSelect(item) {
-        if (this.multiple) {
-            const exists = this.selectedOptions.some((x) => this.getLabel(x) === this.getLabel(item));
-            if (!exists) {
-                this.selectedOptions.push(item);
-                this._onChange(this.selectedOptions);
-                this._onTouched();
-                this.selected.emit(this.selectedOptions);
-            }
-            this.searchTerm = '';
-            this.showDropdown = true;
-            this.onSearchChange();
+        if (this.multiple()) {
+            this.selectedOptions.update(list => list.some(x => this.isEqual(x, item))
+                ? list.filter(x => !this.isEqual(x, item)) // ✅ حذف
+                : [...list, item] // ✅ اضافه
+            );
+            const value = this.selectedOptions();
+            this.onChange(value);
+            this.onTouched();
+            this.selectionChange.emit(value);
+            this.searchTerm.set('');
+            this.showDropdown.set(true);
+            this.onSearchChange(this.searchTerm());
         }
         else {
-            this.searchTerm = this.getLabel(item);
-            this._onChange(item);
-            this._onTouched();
-            this.selected.emit(item);
-            this.showDropdown = false;
+            this.searchTerm.set(this.getLabel(item));
+            this.onChange(item);
+            this.onTouched();
+            this.selectionChange.emit(item);
+            this.showDropdown.set(false);
         }
-        this.activeIndex = -1;
+        this.activeIndex.set(-1);
+        this.inputRef()?.nativeElement.focus();
     }
     removeItem(item) {
-        this.selectedOptions = this.selectedOptions.filter((x) => this.getLabel(x) !== this.getLabel(item));
-        this._onChange(this.selectedOptions);
-        this.removed.emit(this.selectedOptions);
+        const prev = this.selectedOptions();
+        this.selectedOptions.update(list => list.filter(x => !this.isEqual(x, item)));
+        if (prev !== this.selectedOptions()) {
+            const value = this.selectedOptions();
+            this.onChange(value);
+            this.selectionChange.emit(value);
+        }
     }
     onScroll(event) {
-        if (!this.infiniteScroll || this.loading)
+        if (!this.infiniteScroll || this.isLoading())
             return;
         const target = event.target;
         const nearBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 10;
         if (nearBottom) {
             // Request more items
-            this.loadMore.emit(this.searchTerm);
+            this.loadMore.emit(this.searchTerm());
         }
     }
     clearSelection() {
-        if (this.multiple) {
-            this.selectedOptions = [];
-            this._onChange(this.selectedOptions);
-            this.removed.emit(this.selectedOptions);
+        if (this.multiple()) {
+            this.selectedOptions.set([]);
+            const value = this.selectedOptions();
+            this.onChange(value);
+            this.selectionChange.emit(value);
         }
         else {
-            this.searchTerm = '';
-            this._onChange(null);
-            this.selected.emit(null);
+            this.searchTerm.set('');
+            this.onChange(null);
+            this.selectionChange.emit(null);
         }
-        this.showDropdown = false;
+        // this.showDropdown.set(false);
     }
-    /** Keyboard control */
     handleKeyboard(event) {
-        if (!this.showDropdown || this.filteredOptions.length === 0)
+        const list = this.filteredOptions();
+        if (list.length === 0) {
             return;
+        }
+        if (!this.showDropdown()) {
+            this.showDropdown.set(true);
+        }
         switch (event.key) {
             case 'ArrowDown':
-                this.activeIndex = (this.activeIndex + 1) % this.filteredOptions.length;
+                // برو به آیتم بعدی
+                this.activeIndex.update(i => (i + 1) % list.length);
                 event.preventDefault();
                 break;
             case 'ArrowUp':
-                this.activeIndex =
-                    (this.activeIndex - 1 + this.filteredOptions.length) %
-                        this.filteredOptions.length;
+                // برو به آیتم قبلی
+                this.activeIndex.update(i => (i - 1 + list.length) % list.length);
                 event.preventDefault();
                 break;
             case 'Enter':
-                if (this.activeIndex >= 0) {
-                    this.onSelect(this.filteredOptions[this.activeIndex]);
-                    event.preventDefault();
+                const index = this.activeIndex();
+                if (index >= 0 && index < list.length) {
+                    this.onSelect(list[index]);
                 }
+                event.preventDefault();
                 break;
             case 'Escape':
-                this.showDropdown = false;
+                this.showDropdown.set(false);
+                break;
+            case 'Home':
+                this.activeIndex.set(0);
+                event.preventDefault();
+                break;
+            case 'End':
+                this.activeIndex.set(list.length - 1);
+                event.preventDefault();
+                break;
+            case 'Tab':
+                this.showDropdown.set(false);
+                break;
+            case 'PageUp':
+                this.activeIndex.update(i => Math.max(0, i - 10));
+                event.preventDefault();
+                break;
+            case 'PageDown':
+                this.activeIndex.update(i => Math.min(list.length - 1, i + 10));
+                event.preventDefault();
                 break;
         }
     }
-    /** Close by clicking outside */
-    onClickOutside(event) {
-        const clickedInside = this.elRef.nativeElement.contains(event.target);
-        if (!clickedInside) {
-            this.showDropdown = false;
-        }
+    isSelected(item) {
+        return this.selectedOptions()
+            .some(x => this.isEqual(x, item));
+    }
+    trackItem(item) {
+        return this.trackBy()?.(item)
+            ?? this.getLabel(item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsAutocompleteComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsAutocompleteComponent, isStandalone: true, selector: "ys-autocomplete", inputs: { options: "options", optionLabel: "optionLabel", placeholder: "placeholder", multiple: "multiple", showClear: "showClear", disabled: "disabled", styleClass: "styleClass", badgeStyleClass: "badgeStyleClass", loading: "loading", loadingMessage: "loadingMessage", noResultMessage: "noResultMessage", infiniteScroll: "infiniteScroll", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize" }, outputs: { loadMore: "loadMore", selected: "selected", removed: "removed" }, host: { listeners: { "keydown": "handleKeyboard($event)", "document:click": "onClickOutside($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsAutocomplete, isStandalone: true, selector: "ys-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null }, noResultMessage: { classPropertyName: "noResultMessage", publicName: "noResultMessage", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, selectionStyleClass: { classPropertyName: "selectionStyleClass", publicName: "selectionStyleClass", isSignal: true, isRequired: false, transformFunction: null }, clearIconClass: { classPropertyName: "clearIconClass", publicName: "clearIconClass", isSignal: true, isRequired: false, transformFunction: null }, searchIconClass: { classPropertyName: "searchIconClass", publicName: "searchIconClass", isSignal: true, isRequired: false, transformFunction: null }, loadingIconClass: { classPropertyName: "loadingIconClass", publicName: "loadingIconClass", isSignal: true, isRequired: false, transformFunction: null }, multipleCheckIconClass: { classPropertyName: "multipleCheckIconClass", publicName: "multipleCheckIconClass", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadMore: "loadMore", selectionChange: "selectionChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => YsAutocompleteComponent),
+                useExisting: forwardRef(() => YsAutocomplete),
                 multi: true,
             },
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"ys-autocomplete position-relative\">\r\n    <div class=\"input-group flex-wrap\">\r\n        @if (multiple && selectedOptions.length > 0) {\r\n        <div class=\"d-flex flex-wrap\">\r\n            @for (item of selectedOptions; track item) {\r\n            <span class=\"badge me-1 mb-1 p-2 d-flex align-items-center\" [ngClass]=\"badgeStyleClass\">\r\n                {{ getLabel(item) }}\r\n                <i class=\"fa fa-times ms-2 cursor-pointer\" (click)=\"removeItem(item)\"></i>\r\n            </span>\r\n            }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"input-group w-100\">\r\n            <input #inputRef type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"searchTerm\"\r\n                (input)=\"onSearchChange()\" (focus)=\"showDropdown = true\" [ngClass]=\"styleClass\" />\r\n\r\n            @if (showClear) {\r\n            @if ((multiple && selectedOptions.length > 0) || (!multiple && searchTerm)) {\r\n            <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearSelection()\"\r\n                [disabled]=\"disabled\">\r\n                <span class=\"fa fa-times\"></span>\r\n            </button>\r\n            }\r\n            }\r\n            <span class=\"input-group-text\" (click)=\"showDropdown = !showDropdown\">\r\n                <i class=\"fa fa-search\"></i>\r\n            </span>\r\n        </div>\r\n    </div>\r\n\r\n    @if (showDropdown) {\r\n    <div class=\"dropdown-container position-absolute w-100 shadow-sm bg-white border rounded\">\r\n        @if (loading) {\r\n        <div class=\"list-group-item text-center\">\r\n            <i class=\"fa fa-spinner fa-spin me-2\"></i>{{ loadingMessage }}\r\n        </div>\r\n        }\r\n        @else if (error) {\r\n        <div class=\"list-group-item text-danger text-center\">{{ error }}</div>\r\n        }\r\n        @else if (filteredOptions.length === 0) {\r\n        <div class=\"list-group-item text-muted text-center\">\r\n            {{ noResultMessage }}\r\n        </div>\r\n        }\r\n        <!-- \u2705 \u062D\u0627\u0644\u062A Virtual Scroll \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u0628\u0632\u0631\u06AF -->\r\n        @else if (virtualScroll && filteredOptions.length > 100) {\r\n        <cdk-virtual-scroll-viewport [itemSize]=\"virtualScrollItemSize\" class=\"list-group w-100 overflow-y-auto\">\r\n            <ul class=\"list-group w-100\">\r\n                @for (item of filteredOptions; track item; let i = $index) {\r\n                <li class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex\"\r\n                    (click)=\"onSelect(item)\">\r\n                    @if (itemTemplate) {\r\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    } @else {\r\n                    {{ getLabel(item) }}\r\n                    }\r\n                </li>\r\n                }\r\n            </ul>\r\n        </cdk-virtual-scroll-viewport>\r\n        }\r\n        <!-- \u2705 \u062D\u0627\u0644\u062A \u0645\u0639\u0645\u0648\u0644\u06CC \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u06A9\u0648\u0686\u06A9 -->\r\n        @else {\r\n        <ul class=\"list-group w-100 overflow-y-auto\" [class.scrollable]=\"infiniteScroll\" (scroll)=\"onScroll($event)\">\r\n            @for (item of filteredOptions; track item; let i = $index) {\r\n            <li class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex\"\r\n                (click)=\"onSelect(item)\">\r\n                @if (itemTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                } @else {\r\n                {{ getLabel(item) }}\r\n                }\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".ys-autocomplete .dropdown-container,.ys-autocomplete .list-group{z-index:1000;max-height:200px}.ys-autocomplete cdk-virtual-scroll-viewport{height:200px;display:block}.ys-autocomplete .btn-clear:hover{background-color:var(--bs-btn-hover-bg)}.ys-autocomplete .badge{font-size:.9rem;cursor:default;font-weight:var(--bs-body-font-weight)}.ys-autocomplete .badge i{cursor:pointer;font-size:.8rem}.ys-autocomplete .badge:hover{font-weight:var(--bs-badge-font-weight)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ys-autocomplete position-relative\">\n    <div class=\"input-group flex-wrap\">\n        @if (multiple() && selectedOptions().length > 0) {\n        <div class=\"d-flex flex-wrap\">\n            @for (item of selectedOptions(); track trackItem(item)) {\n            <span class=\"badge me-1 mb-1 p-2 d-flex align-items-center\" [class]=\"selectionStyleClass()\">\n                {{ getLabel(item) }}\n                <i class=\"ms-2 cursor-pointer\" [class]=\"clearIconClass()\" (click)=\"removeItem(item)\"></i>\n            </span>\n            }\n        </div>\n        }\n\n        <div class=\"input-group w-100\">\n            <input #inputRef type=\"text\" class=\"form-control\" [class]=\"styleClass()\" [placeholder]=\"placeholder()\"\n                [value]=\"searchTerm()\" (input)=\"onInput($event)\" (keydown)=\"handleKeyboard($event)\"\n                (focus)=\"showDropdown.set(true)\" (click)=\"showDropdown.set(true)\" role=\"combobox\"\n                aria-autocomplete=\"list\" [attr.aria-expanded]=\"showDropdown()\" aria-haspopup=\"listbox\"\n                [attr.aria-activedescendant]=\"activeOptionId()\" [disabled]=\"isDisabled()\" />\n\n            @if (showClear()) {\n            @if ((multiple() && selectedOptions().length > 0) || (!multiple() && searchTerm())) {\n            <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearSelection()\"\n                [disabled]=\"isDisabled()\">\n                <span [class]=\"clearIconClass()\"></span>\n            </button>\n            }\n            }\n            <span class=\"input-group-text\" (click)=\"showDropdown.set( !showDropdown())\">\n                <i [class]=\"searchIconClass()\"></i>\n            </span>\n        </div>\n    </div>\n\n    @if (showDropdown()) {\n    <div class=\"dropdown-container position-absolute w-100 shadow-sm bg-white border rounded\">\n        @if (isLoading()) {\n        <div class=\"list-group-item text-center\">\n            <i class=\"me-2\" [class]=\"loadingIconClass()\"></i>{{ loadingMessage() }}\n        </div>\n        }\n        @else if (error()) {\n        <div class=\"list-group-item text-danger text-center\">{{ error() }}</div>\n        }\n        @else if (filteredOptions().length === 0) {\n        <div class=\"list-group-item text-muted text-center\">\n            {{ noResultMessage() }}\n        </div>\n        }\n        <!-- \u2705 \u062D\u0627\u0644\u062A Virtual Scroll \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u0628\u0632\u0631\u06AF -->\n        @else if (virtualScroll() && filteredOptions().length > virtualScrollThreshold()) {\n        <cdk-virtual-scroll-viewport [itemSize]=\"virtualScrollItemSize()\" class=\"list-group w-100\">\n\n            <div [id]=\"componentId + '-option-' + i\" *cdkVirtualFor=\"let item of filteredOptions(); let i = index\"\n                class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex()\"\n                [class.selected]=\"isSelected(item)\" (click)=\"onSelect(item)\">\n\n                @if (itemTemplate) {\n\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"> </ng-container>\n\n                } @else {\n\n                @if(multiple()){\n                <i class=\"me-1 text-success\" [class]=\"multipleCheckIconClass()\" [class.invisible]=\"!isSelected(item)\">\n                </i>\n                }\n\n                {{ getLabel(item) }}\n\n                }\n\n            </div>\n\n        </cdk-virtual-scroll-viewport>\n\n        }\n        <!-- \u2705 \u062D\u0627\u0644\u062A \u0645\u0639\u0645\u0648\u0644\u06CC \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u06A9\u0648\u0686\u06A9 -->\n        @else {\n        <ul class=\"list-group w-100 overflow-y-auto\" [class.scrollable]=\"infiniteScroll()\" (scroll)=\"onScroll($event)\"\n            role=\"listbox\">\n            @for (item of filteredOptions(); track trackItem(item); let i = $index) {\n            <li [id]=\"componentId + '-option-' + i\" class=\"list-group-item list-group-item-action\"\n                [class.active]=\"i === activeIndex()\" [class.selected]=\"isSelected(item)\" (click)=\"onSelect(item)\"\n                role=\"option\" [attr.aria-selected]=\"isSelected(item)\">\n                @if (itemTemplate) {\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n                } @else {\n                @if(multiple()){\n                <i class=\"me-1 text-success\" [class]=\"multipleCheckIconClass()\" [class.invisible]=\"!isSelected(item)\">\n                </i>\n                }\n                {{ getLabel(item) }}\n                }\n            </li>\n            }\n        </ul>\n        }\n    </div>\n\n    }\n\n</div>", styles: [".ys-autocomplete .dropdown-container,.ys-autocomplete .list-group{z-index:1000;max-height:200px}.ys-autocomplete cdk-virtual-scroll-viewport{height:200px;display:block}.ys-autocomplete .list-group-item-action{font-size:13px;font-weight:500;line-height:22px;text-transform:uppercase}.ys-autocomplete .list-group-item-action.selected{color:var(--bs-list-group-action-hover-color);background-color:var(--bs-list-group-action-hover-bg)}.ys-autocomplete .btn-clear:hover{background-color:var(--bs-btn-hover-bg)}.ys-autocomplete .badge{font-size:.9rem;cursor:default;font-weight:var(--bs-body-font-weight)}.ys-autocomplete .badge i{cursor:pointer;font-size:.8rem}.ys-autocomplete .badge:hover{font-weight:var(--bs-badge-font-weight)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsAutocomplete, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-autocomplete', imports: [FormsModule, NgTemplateOutlet, NgClass, ScrollingModule], providers: [
+            args: [{ selector: 'ys-autocomplete', imports: [
+                        FormsModule,
+                        NgTemplateOutlet,
+                        ScrollingModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => YsAutocompleteComponent),
+                            useExisting: forwardRef(() => YsAutocomplete),
                             multi: true,
                         },
-                    ], template: "<div class=\"ys-autocomplete position-relative\">\r\n    <div class=\"input-group flex-wrap\">\r\n        @if (multiple && selectedOptions.length > 0) {\r\n        <div class=\"d-flex flex-wrap\">\r\n            @for (item of selectedOptions; track item) {\r\n            <span class=\"badge me-1 mb-1 p-2 d-flex align-items-center\" [ngClass]=\"badgeStyleClass\">\r\n                {{ getLabel(item) }}\r\n                <i class=\"fa fa-times ms-2 cursor-pointer\" (click)=\"removeItem(item)\"></i>\r\n            </span>\r\n            }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"input-group w-100\">\r\n            <input #inputRef type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"searchTerm\"\r\n                (input)=\"onSearchChange()\" (focus)=\"showDropdown = true\" [ngClass]=\"styleClass\" />\r\n\r\n            @if (showClear) {\r\n            @if ((multiple && selectedOptions.length > 0) || (!multiple && searchTerm)) {\r\n            <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearSelection()\"\r\n                [disabled]=\"disabled\">\r\n                <span class=\"fa fa-times\"></span>\r\n            </button>\r\n            }\r\n            }\r\n            <span class=\"input-group-text\" (click)=\"showDropdown = !showDropdown\">\r\n                <i class=\"fa fa-search\"></i>\r\n            </span>\r\n        </div>\r\n    </div>\r\n\r\n    @if (showDropdown) {\r\n    <div class=\"dropdown-container position-absolute w-100 shadow-sm bg-white border rounded\">\r\n        @if (loading) {\r\n        <div class=\"list-group-item text-center\">\r\n            <i class=\"fa fa-spinner fa-spin me-2\"></i>{{ loadingMessage }}\r\n        </div>\r\n        }\r\n        @else if (error) {\r\n        <div class=\"list-group-item text-danger text-center\">{{ error }}</div>\r\n        }\r\n        @else if (filteredOptions.length === 0) {\r\n        <div class=\"list-group-item text-muted text-center\">\r\n            {{ noResultMessage }}\r\n        </div>\r\n        }\r\n        <!-- \u2705 \u062D\u0627\u0644\u062A Virtual Scroll \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u0628\u0632\u0631\u06AF -->\r\n        @else if (virtualScroll && filteredOptions.length > 100) {\r\n        <cdk-virtual-scroll-viewport [itemSize]=\"virtualScrollItemSize\" class=\"list-group w-100 overflow-y-auto\">\r\n            <ul class=\"list-group w-100\">\r\n                @for (item of filteredOptions; track item; let i = $index) {\r\n                <li class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex\"\r\n                    (click)=\"onSelect(item)\">\r\n                    @if (itemTemplate) {\r\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    } @else {\r\n                    {{ getLabel(item) }}\r\n                    }\r\n                </li>\r\n                }\r\n            </ul>\r\n        </cdk-virtual-scroll-viewport>\r\n        }\r\n        <!-- \u2705 \u062D\u0627\u0644\u062A \u0645\u0639\u0645\u0648\u0644\u06CC \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u06A9\u0648\u0686\u06A9 -->\r\n        @else {\r\n        <ul class=\"list-group w-100 overflow-y-auto\" [class.scrollable]=\"infiniteScroll\" (scroll)=\"onScroll($event)\">\r\n            @for (item of filteredOptions; track item; let i = $index) {\r\n            <li class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex\"\r\n                (click)=\"onSelect(item)\">\r\n                @if (itemTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                } @else {\r\n                {{ getLabel(item) }}\r\n                }\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".ys-autocomplete .dropdown-container,.ys-autocomplete .list-group{z-index:1000;max-height:200px}.ys-autocomplete cdk-virtual-scroll-viewport{height:200px;display:block}.ys-autocomplete .btn-clear:hover{background-color:var(--bs-btn-hover-bg)}.ys-autocomplete .badge{font-size:.9rem;cursor:default;font-weight:var(--bs-body-font-weight)}.ys-autocomplete .badge i{cursor:pointer;font-size:.8rem}.ys-autocomplete .badge:hover{font-weight:var(--bs-badge-font-weight)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{
-                type: Input
-            }], optionLabel: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], showClear: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], itemTemplate: [{
+                    ], template: "<div class=\"ys-autocomplete position-relative\">\n    <div class=\"input-group flex-wrap\">\n        @if (multiple() && selectedOptions().length > 0) {\n        <div class=\"d-flex flex-wrap\">\n            @for (item of selectedOptions(); track trackItem(item)) {\n            <span class=\"badge me-1 mb-1 p-2 d-flex align-items-center\" [class]=\"selectionStyleClass()\">\n                {{ getLabel(item) }}\n                <i class=\"ms-2 cursor-pointer\" [class]=\"clearIconClass()\" (click)=\"removeItem(item)\"></i>\n            </span>\n            }\n        </div>\n        }\n\n        <div class=\"input-group w-100\">\n            <input #inputRef type=\"text\" class=\"form-control\" [class]=\"styleClass()\" [placeholder]=\"placeholder()\"\n                [value]=\"searchTerm()\" (input)=\"onInput($event)\" (keydown)=\"handleKeyboard($event)\"\n                (focus)=\"showDropdown.set(true)\" (click)=\"showDropdown.set(true)\" role=\"combobox\"\n                aria-autocomplete=\"list\" [attr.aria-expanded]=\"showDropdown()\" aria-haspopup=\"listbox\"\n                [attr.aria-activedescendant]=\"activeOptionId()\" [disabled]=\"isDisabled()\" />\n\n            @if (showClear()) {\n            @if ((multiple() && selectedOptions().length > 0) || (!multiple() && searchTerm())) {\n            <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearSelection()\"\n                [disabled]=\"isDisabled()\">\n                <span [class]=\"clearIconClass()\"></span>\n            </button>\n            }\n            }\n            <span class=\"input-group-text\" (click)=\"showDropdown.set( !showDropdown())\">\n                <i [class]=\"searchIconClass()\"></i>\n            </span>\n        </div>\n    </div>\n\n    @if (showDropdown()) {\n    <div class=\"dropdown-container position-absolute w-100 shadow-sm bg-white border rounded\">\n        @if (isLoading()) {\n        <div class=\"list-group-item text-center\">\n            <i class=\"me-2\" [class]=\"loadingIconClass()\"></i>{{ loadingMessage() }}\n        </div>\n        }\n        @else if (error()) {\n        <div class=\"list-group-item text-danger text-center\">{{ error() }}</div>\n        }\n        @else if (filteredOptions().length === 0) {\n        <div class=\"list-group-item text-muted text-center\">\n            {{ noResultMessage() }}\n        </div>\n        }\n        <!-- \u2705 \u062D\u0627\u0644\u062A Virtual Scroll \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u0628\u0632\u0631\u06AF -->\n        @else if (virtualScroll() && filteredOptions().length > virtualScrollThreshold()) {\n        <cdk-virtual-scroll-viewport [itemSize]=\"virtualScrollItemSize()\" class=\"list-group w-100\">\n\n            <div [id]=\"componentId + '-option-' + i\" *cdkVirtualFor=\"let item of filteredOptions(); let i = index\"\n                class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex()\"\n                [class.selected]=\"isSelected(item)\" (click)=\"onSelect(item)\">\n\n                @if (itemTemplate) {\n\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"> </ng-container>\n\n                } @else {\n\n                @if(multiple()){\n                <i class=\"me-1 text-success\" [class]=\"multipleCheckIconClass()\" [class.invisible]=\"!isSelected(item)\">\n                </i>\n                }\n\n                {{ getLabel(item) }}\n\n                }\n\n            </div>\n\n        </cdk-virtual-scroll-viewport>\n\n        }\n        <!-- \u2705 \u062D\u0627\u0644\u062A \u0645\u0639\u0645\u0648\u0644\u06CC \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u06A9\u0648\u0686\u06A9 -->\n        @else {\n        <ul class=\"list-group w-100 overflow-y-auto\" [class.scrollable]=\"infiniteScroll()\" (scroll)=\"onScroll($event)\"\n            role=\"listbox\">\n            @for (item of filteredOptions(); track trackItem(item); let i = $index) {\n            <li [id]=\"componentId + '-option-' + i\" class=\"list-group-item list-group-item-action\"\n                [class.active]=\"i === activeIndex()\" [class.selected]=\"isSelected(item)\" (click)=\"onSelect(item)\"\n                role=\"option\" [attr.aria-selected]=\"isSelected(item)\">\n                @if (itemTemplate) {\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n                } @else {\n                @if(multiple()){\n                <i class=\"me-1 text-success\" [class]=\"multipleCheckIconClass()\" [class.invisible]=\"!isSelected(item)\">\n                </i>\n                }\n                {{ getLabel(item) }}\n                }\n            </li>\n            }\n        </ul>\n        }\n    </div>\n\n    }\n\n</div>", styles: [".ys-autocomplete .dropdown-container,.ys-autocomplete .list-group{z-index:1000;max-height:200px}.ys-autocomplete cdk-virtual-scroll-viewport{height:200px;display:block}.ys-autocomplete .list-group-item-action{font-size:13px;font-weight:500;line-height:22px;text-transform:uppercase}.ys-autocomplete .list-group-item-action.selected{color:var(--bs-list-group-action-hover-color);background-color:var(--bs-list-group-action-hover-bg)}.ys-autocomplete .btn-clear:hover{background-color:var(--bs-btn-hover-bg)}.ys-autocomplete .badge{font-size:.9rem;cursor:default;font-weight:var(--bs-body-font-weight)}.ys-autocomplete .badge i{cursor:pointer;font-size:.8rem}.ys-autocomplete .badge:hover{font-weight:var(--bs-badge-font-weight)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMessage", required: false }] }], noResultMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultMessage", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], selectionStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionStyleClass", required: false }] }], clearIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconClass", required: false }] }], searchIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIconClass", required: false }] }], loadingIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIconClass", required: false }] }], multipleCheckIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleCheckIconClass", required: false }] }], infiniteScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScroll", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], itemTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], styleClass: [{
-                type: Input
-            }], badgeStyleClass: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], loadingMessage: [{
-                type: Input
-            }], noResultMessage: [{
-                type: Input
-            }], infiniteScroll: [{
-                type: Input
-            }], virtualScroll: [{
-                type: Input
-            }], virtualScrollItemSize: [{
-                type: Input
-            }], loadMore: [{
-                type: Output
-            }], selected: [{
-                type: Output
-            }], removed: [{
-                type: Output
-            }], inputRef: [{
-                type: ViewChild,
-                args: ['inputRef']
-            }], handleKeyboard: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }] } });
 
 /*
@@ -281,5 +341,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { YsAutocompleteComponent };
+export { YsAutocomplete };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng-autocomplete.mjs.map