ngx-opalbytes-components 1.18.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-opalbytes-components",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/types/ngx-opalbytes-components.d.ts

@@ -1,8 +1,7 @@
 import * as i0 from '@angular/core';
-import { OnInit, EventEmitter, OnChanges, SimpleChanges, OnDestroy, ElementRef, ChangeDetectorRef, Signal, AfterContentInit, QueryList, TemplateRef, WritableSignal, AfterViewInit } from '@angular/core';
+import { OnInit, EventEmitter, OnChanges, OnDestroy, AfterViewInit, ElementRef, TemplateRef, SimpleChanges, ChangeDetectorRef, Signal, AfterContentInit, QueryList, WritableSignal } from '@angular/core';
 import { ControlValueAccessor, AbstractControl, FormControl } from '@angular/forms';
 import { MatDateRangeInput } from '@angular/material/datepicker';
-import { MatAutocompleteTrigger, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
 import { Router, ActivatedRoute } from '@angular/router';
@@ -110,7 +109,7 @@ interface ICaoAutoCompleteOption {
     icon?: string;
     iconPosition?: string;
 }
-declare class CaoAutocompleteComponent implements OnInit, OnChanges, ControlValueAccessor {
+declare class CaoAutocompleteComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit, ControlValueAccessor {
     label: string;
     placeholder: string;
     options: ICaoAutoCompleteOption[];
@@ -127,43 +126,82 @@ declare class CaoAutocompleteComponent implements OnInit, OnChanges, ControlValu
     autocompleteBgColor: string;
     strokeWidthIcon: number;
     isDisabled: boolean;
+    inputHeigth: string;
+    checkIcon: string;
+    showCheckIcon: boolean;
+    isLucideCheckIcon: boolean;
     readonly itemSelected: EventEmitter<ICaoAutoCompleteOption>;
     readonly blurEvent: EventEmitter<void>;
     readonly focusEvent: EventEmitter<void>;
     readonly leadingIconClick: EventEmitter<Event | MouseEvent>;
     readonly trailingIconClick: EventEmitter<Event | MouseEvent>;
-    autocompleteTrigger: MatAutocompleteTrigger;
+    inputEl: ElementRef<HTMLInputElement>;
+    wrapperEl: ElementRef<HTMLDivElement>;
+    panelTemplate: TemplateRef<any>;
+    /** controla apenas o texto digitado / exibido no input */
     internalControl: FormControl<string | null>;
     filteredOptions$: Observable<ICaoAutoCompleteOption[]>;
+    filteredOptionsList: ICaoAutoCompleteOption[];
     isFocused: boolean;
-    icon: boolean;
+    isPanelOpen: boolean;
+    activeIndex: number;
+    private static uidSeq;
+    readonly listboxId: string;
     private selectedOption;
     private options$;
+    /** indica se o valor atual do internalControl foi digitado pelo usuário (e não escrito programaticamente) */
+    private isUserTyping;
     private el;
+    private cdr;
+    private renderer;
+    private overlay;
+    private viewContainerRef;
+    private scrollDispatcher;
+    private sub;
+    private overlayRef;
+    private portal;
     private onChange;
     private onTouched;
     ngOnInit(): void;
-    private setStyle;
+    ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private setupOverlay;
+    private closeOverlay;
+    private openOverlay;
+    private setStyle;
+    openPanel(): void;
+    closePanel(): void;
+    onDocumentClick(event: MouseEvent): void;
     onFocus(): void;
     onBlur(): void;
+    onInputKeydown(event: KeyboardEvent): void;
+    private moveActiveIndex;
     selectItem(option: ICaoAutoCompleteOption): void;
-    onOptionSelected(event: MatAutocompleteSelectedEvent): void;
     selectOption(option: ICaoAutoCompleteOption): void;
-    closePanel(): void;
     clearSelection(): void;
     onLeadingIconClick(event: MouseEvent | Event): void;
     onTrailingIconClick(event: MouseEvent | Event): void;
     private filter;
+    /** Move a opção selecionada para o início da lista, mantendo a ordem das demais */
+    private moveSelectedToTop;
+    private writeDisplayValue;
+    /** Marca que o usuário está digitando manualmente no campo (ativa o filtro por texto) */
+    onUserInput(): void;
     displayFn(option: ICaoAutoCompleteOption): string;
+    isOptionSelected(option: ICaoAutoCompleteOption): boolean;
+    trackByOptionId(_: number, option: ICaoAutoCompleteOption): string | number;
+    optionId(option: ICaoAutoCompleteOption): string;
+    get activeOptionId(): string | null;
     get errorText(): string | null;
     get controlNameValue(): string;
     writeValue(value: ICaoAutoCompleteOption | string): void;
     registerOnChange(fn: (value: ICaoAutoCompleteOption | string | null) => void): void;
     registerOnTouched(fn: () => void): void;
-    setInputHeight(height: string): void;
+    setDisabledState?(isDisabled: boolean): void;
+    setInputHeight(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CaoAutocompleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CaoAutocompleteComponent, "cao-autocomplete", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "control": { "alias": "control"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "_leadingIcon": { "alias": "_leadingIcon"; "required": false; }; "_trailingIcon": { "alias": "_trailingIcon"; "required": false; }; "optionIcon": { "alias": "optionIcon"; "required": false; }; "optionIConColor": { "alias": "optionIConColor"; "required": false; }; "isLucideOptionIcon": { "alias": "isLucideOptionIcon"; "required": false; }; "autocompleteBgColor": { "alias": "autocompleteBgColor"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; }, { "itemSelected": "itemSelected"; "blurEvent": "blurEvent"; "focusEvent": "focusEvent"; "leadingIconClick": "leadingIconClick"; "trailingIconClick": "trailingIconClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoAutocompleteComponent, "cao-autocomplete", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "control": { "alias": "control"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "_leadingIcon": { "alias": "_leadingIcon"; "required": false; }; "_trailingIcon": { "alias": "_trailingIcon"; "required": false; }; "optionIcon": { "alias": "optionIcon"; "required": false; }; "optionIConColor": { "alias": "optionIConColor"; "required": false; }; "isLucideOptionIcon": { "alias": "isLucideOptionIcon"; "required": false; }; "autocompleteBgColor": { "alias": "autocompleteBgColor"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "inputHeigth": { "alias": "inputHeigth"; "required": false; }; "checkIcon": { "alias": "checkIcon"; "required": false; }; "showCheckIcon": { "alias": "showCheckIcon"; "required": false; }; "isLucideCheckIcon": { "alias": "isLucideCheckIcon"; "required": false; }; }, { "itemSelected": "itemSelected"; "blurEvent": "blurEvent"; "focusEvent": "focusEvent"; "leadingIconClick": "leadingIconClick"; "trailingIconClick": "trailingIconClick"; }, never, never, true, never>;
 }
 
 interface ICaoDropDownOption {