ngx-sp-infra 6.5.16 → 6.5.18

package/fesm2022/ngx-sp-infra.mjs

@@ -6430,7 +6430,7 @@ class LibComboboxReworkComponent {
         // Re-resolve the current value when the list changes
         if (this._value)
             this.writeValue(this._value);
-        this._cdr.detectChanges();
+        this.searchControl.setValue('', { emitEvent: true });
     }
     // Getter/Setter para o valor
     get value() { return this._value; }
@@ -6490,7 +6490,7 @@ class LibComboboxReworkComponent {
         this.invalid = false;
         this.isOpen = false;
         this.searchControl = new FormControl("");
-        this.filteredItems$ = this._search$.pipe(debounceTime(150), distinctUntilChanged(), map((term) => this.filterItems(term)));
+        this.filteredItems$ = this._search$.pipe(debounceTime(150), map((term) => this.filterItems(term)));
         this.compare = (a, b) => {
             if (!a || !b)
                 return false;
@@ -6512,6 +6512,7 @@ class LibComboboxReworkComponent {
             }
             return String(item);
         };
+        this._cdr.markForCheck();
     }
     ngOnInit() {
         this.searchControl.valueChanges
@@ -6522,6 +6523,7 @@ class LibComboboxReworkComponent {
             else
                 this.filterChange.emit(v);
         });
+        this.searchControl.setValue('', { emitEvent: true });
         this.registerObserver();
     }
     ngAfterViewInit() {
@@ -6531,7 +6533,10 @@ class LibComboboxReworkComponent {
         this.setMaxWidth();
     }
     ngOnChanges(changes) {
-        // [...]
+        if (changes['list'] && changes['list'].currentValue) {
+            this.searchControl.setValue('', { emitEvent: true });
+            this._cdr.detectChanges();
+        }
     }
     ngOnDestroy() {
         this._destroy$.next();
@@ -6656,19 +6661,18 @@ class LibComboboxReworkComponent {
         }
         this._cdr.markForCheck();
     }
-    openDropdown() {
-        if (this.disabled)
-            return;
-        this.isOpen = true;
-        if (this.isOpen) {
-            this.searchControl.setValue("", { emitEvent: true });
-            setTimeout(() => {
-                const inputEl = document.querySelector('.reusable-combobox .dropdown-search input');
-                inputEl?.focus();
-            }, 0);
-        }
-        this._cdr.markForCheck();
-    }
+    // public openDropdown() {
+    //   if (this.disabled) return;
+    //   this.isOpen = true;
+    //   if (this.isOpen) {
+    //     this.searchControl.setValue("", { emitEvent: true });
+    //     setTimeout(() => {
+    //       const inputEl: HTMLInputElement | null = document.querySelector('.reusable-combobox .dropdown-search input');
+    //       inputEl?.focus();
+    //     }, 0);
+    //   }
+    //   this._cdr.markForCheck();
+    // }
     closeDropdown() {
         this.isOpen = false;
         this._cdr.markForCheck();
@@ -6812,7 +6816,6 @@ class LibComboboxComponent {
     set ariaExpanded(value) {
         this._ariaExpanded = value;
         this.adjustDropdownWidth();
-        this._cdr.detectChanges();
         if (value === false) {
             this.textoPesquisa = "";
             // Validação para caso o input de pesquisa esteja escondido
@@ -6860,8 +6863,7 @@ class LibComboboxComponent {
     }
     // #endregion PUBLIC
     // #endregion ==========> PROPERTIES <==========
-    constructor(_cdr) {
-        this._cdr = _cdr;
+    constructor() {
         // #region ==========> PROPERTIES <==========
         // #region PROTECTED
         this.textoPesquisa = "";
@@ -6928,7 +6930,6 @@ class LibComboboxComponent {
          * @type {EventEmitter<string>} */
         this.changePesquisa = new EventEmitter();
         this.showSearchInput = false;
-        this._cdr.markForCheck();
     }
     ngOnInit() {
         this.comboboxID = `lib-combobox-${Math.random() * 100}`;
@@ -7046,7 +7047,7 @@ class LibComboboxComponent {
         }
     }
     reloadList() { this.reloadListChange.emit(this.textoPesquisa); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibComboboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LibComboboxComponent, isStandalone: true, selector: "lib-combobox", inputs: { control: "control", list: "list", labelText: "labelText", separator: "separator", libRequired: "libRequired", disabled: "disabled", mainPlaceholder: "mainPlaceholder", searchPlaceholder: "searchPlaceholder", theme: "theme", returnRecord: "returnRecord", additionalStringBold: "additionalStringBold", showErrorMessage: "showErrorMessage" }, outputs: { reloadListChange: "reloadListChange", changeValue: "changeValue", changePesquisa: "changePesquisa" }, viewQueries: [{ propertyName: "_mainInput", first: true, predicate: ["mainInput"], descendants: true }, { propertyName: "_searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "_dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n\n<label *ngIf=\"labelText && labelText !== ''\" class=\"form-label fw-bold d-flex align-items-center gap-1\" [id]=\"labelID\" [for]=\"comboboxID\" [libRequired]=\"isRequired\">\n   <ng-content select=\"lib-icon[iconLeft]\"></ng-content>\n   {{ labelText }}\n   <ng-content select=\"lib-icon[iconRight]\"></ng-content>\n</label>\n\n<div class=\"input-group dropdown flex-fill glb-max-height-350px\">\n\n   <!-- Este elemento ng-content com o atributo [btnLeft] permite que o usu\u00E1rio final forne\u00E7a conte\u00FAdo personalizado para ser exibido no lado esquerdo do combobox de pesquisa.\n   Ao usar o atributo [btnLeft], o usu\u00E1rio pode facilmente adicionar bot\u00F5es ou outros elementos para melhorar a funcionalidade ou apar\u00EAncia do combobox de pesquisa. -->\n   <ng-content select=\"[btnLeft]\"></ng-content>\n\n   <input  #mainInput class=\"form-select text-start rounded-end cursor-pointer\" type=\"text\"\n            data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\" aria-expanded=\"false\" readonly\n            [placeholder]=\"mainPlaceholder\" [class.text-muted]=\"innerControl.value == null\" [formControl]=\"innerControl\" [class.is-invalid]=\"invalidControl\" [id]=\"comboboxID\"\n            (click)=\"ariaExpanded = !ariaExpanded; focusSearchInput()\" (focus)=\"focusSearchInput()\">\n\n   <ul  #dropdownMenu  class=\"dropdown-menu p-2 glb-max-height-350px overflow-y-scroll z-index-1020\" [class.show]=\"ariaExpanded\">\n      @if(showSearchInput){\n         <div class=\"input-group mb-2\">\n            <input #searchInput type=\"text\" id=\"searchInput-{{comboboxID}}\" class=\"searchInput form-control glb-input-no-glow\" [placeholder]=\"searchPlaceholder\" (keyup.enter)=\"reloadList()\"\n            [(ngModel)]=\"textoPesquisa\" (ngModelChange)=\"changePesquisa.emit(textoPesquisa)\" >\n            <button class=\"btn btn-{{theme}}\" (click)=\"reloadList()\"> <lib-icon iconName=\"lupa\" iconSize=\"medium-small\" /> </button>\n         </div>\n      }\n\n      @if (list) {\n         <li *ngIf=\"innerControl.value !== '' && innerControl.value !== null\" class=\"dropdown-item glb-cursor-pointer\" (click)=\"clearValue()\"> <span class=\"fw-bold\">Limpar op\u00E7\u00E3o selecionada</span> </li>\n         @for (item of list | textFilter:textoPesquisa; track $index) {\n            <li class=\"dropdown-item glb-cursor-pointer\" (click)=\"setValue(item)\">\n               <span *ngIf=\"item.AdditionalStringProperty1 && item.AdditionalStringProperty1 !== ''\" class=\"glb-fs-12 d-inline-block w-125\" [class.fw-bold]=\"additionalStringBold\">\n                  {{ item.AdditionalStringProperty1 + (separator === undefined ? \"\" : \" \"+separator) }}\n               </span> {{ item.LABEL }}\n            </li>\n         }\n         @empty { <li class=\"dropdown-item fst-italic\">Nenhum registro encontrado com esta pesquisa...</li> }\n      }\n      @else { <li class=\"dropdown-item text-center\"> <div class=\"spinner-border\" role=\"status\"><span class=\"visually-hidden\">Carregando dados...</span></div> </li> }\n   </ul>\n\n   <!-- Este elemento ng-content com o atributo [btnRight] permite que o usu\u00E1rio final forne\u00E7a conte\u00FAdo personalizado para ser exibido no lado direito do combobox de pesquisa.\n   Ao usar o atributo [btnRight], o usu\u00E1rio pode facilmente adicionar bot\u00F5es ou outros elementos para melhorar a funcionalidade ou apar\u00EAncia do combobox de pesquisa. -->\n   <ng-content select=\"[btnRight]\"></ng-content>\n\n</div>\n\n<!-- #region MENSAGEM DE ERRO DE VALIDA\u00C7\u00C3O -->\n<lib-error-message *ngIf=\"showErrorMessage && invalidControl\" customMessage=\"Este campo \u00E9 obrigat\u00F3rio.\" />\n<!-- #endregion MENSAGEM DE ERRO DE VALIDA\u00C7\u00C3O -->", styles: [".glb-max-height-350px{max-height:350px!important}.form-label{font-size:16px!important}.z-index-1020{z-index:1020!important}.cursor-pointer{cursor:pointer!important}.dropdown-menu{position:relative}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RequiredDirective, selector: "label[libRequired], span[libRequired], p[libRequired]", inputs: ["libRequired", "requiredID"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LibIconsComponent, selector: "lib-icon", inputs: ["iconName", "iconColor", "iconSize", "iconFill"] }, { kind: "component", type: FieldErrorMessageComponent, selector: "app-field-error-message, lib-error-message", inputs: ["customMessage", "control", "label"] }, { kind: "pipe", type: TextFilterPipe, name: "textFilter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibComboboxComponent, decorators: [{
@@ -7060,7 +7061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         FieldErrorMessageComponent,
                         TextFilterPipe,
                     ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n\n<label *ngIf=\"labelText && labelText !== ''\" class=\"form-label fw-bold d-flex align-items-center gap-1\" [id]=\"labelID\" [for]=\"comboboxID\" [libRequired]=\"isRequired\">\n   <ng-content select=\"lib-icon[iconLeft]\"></ng-content>\n   {{ labelText }}\n   <ng-content select=\"lib-icon[iconRight]\"></ng-content>\n</label>\n\n<div class=\"input-group dropdown flex-fill glb-max-height-350px\">\n\n   <!-- Este elemento ng-content com o atributo [btnLeft] permite que o usu\u00E1rio final forne\u00E7a conte\u00FAdo personalizado para ser exibido no lado esquerdo do combobox de pesquisa.\n   Ao usar o atributo [btnLeft], o usu\u00E1rio pode facilmente adicionar bot\u00F5es ou outros elementos para melhorar a funcionalidade ou apar\u00EAncia do combobox de pesquisa. -->\n   <ng-content select=\"[btnLeft]\"></ng-content>\n\n   <input  #mainInput class=\"form-select text-start rounded-end cursor-pointer\" type=\"text\"\n            data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\" aria-expanded=\"false\" readonly\n            [placeholder]=\"mainPlaceholder\" [class.text-muted]=\"innerControl.value == null\" [formControl]=\"innerControl\" [class.is-invalid]=\"invalidControl\" [id]=\"comboboxID\"\n            (click)=\"ariaExpanded = !ariaExpanded; focusSearchInput()\" (focus)=\"focusSearchInput()\">\n\n   <ul  #dropdownMenu  class=\"dropdown-menu p-2 glb-max-height-350px overflow-y-scroll z-index-1020\" [class.show]=\"ariaExpanded\">\n      @if(showSearchInput){\n         <div class=\"input-group mb-2\">\n            <input #searchInput type=\"text\" id=\"searchInput-{{comboboxID}}\" class=\"searchInput form-control glb-input-no-glow\" [placeholder]=\"searchPlaceholder\" (keyup.enter)=\"reloadList()\"\n            [(ngModel)]=\"textoPesquisa\" (ngModelChange)=\"changePesquisa.emit(textoPesquisa)\" >\n            <button class=\"btn btn-{{theme}}\" (click)=\"reloadList()\"> <lib-icon iconName=\"lupa\" iconSize=\"medium-small\" /> </button>\n         </div>\n      }\n\n      @if (list) {\n         <li *ngIf=\"innerControl.value !== '' && innerControl.value !== null\" class=\"dropdown-item glb-cursor-pointer\" (click)=\"clearValue()\"> <span class=\"fw-bold\">Limpar op\u00E7\u00E3o selecionada</span> </li>\n         @for (item of list | textFilter:textoPesquisa; track $index) {\n            <li class=\"dropdown-item glb-cursor-pointer\" (click)=\"setValue(item)\">\n               <span *ngIf=\"item.AdditionalStringProperty1 && item.AdditionalStringProperty1 !== ''\" class=\"glb-fs-12 d-inline-block w-125\" [class.fw-bold]=\"additionalStringBold\">\n                  {{ item.AdditionalStringProperty1 + (separator === undefined ? \"\" : \" \"+separator) }}\n               </span> {{ item.LABEL }}\n            </li>\n         }\n         @empty { <li class=\"dropdown-item fst-italic\">Nenhum registro encontrado com esta pesquisa...</li> }\n      }\n      @else { <li class=\"dropdown-item text-center\"> <div class=\"spinner-border\" role=\"status\"><span class=\"visually-hidden\">Carregando dados...</span></div> </li> }\n   </ul>\n\n   <!-- Este elemento ng-content com o atributo [btnRight] permite que o usu\u00E1rio final forne\u00E7a conte\u00FAdo personalizado para ser exibido no lado direito do combobox de pesquisa.\n   Ao usar o atributo [btnRight], o usu\u00E1rio pode facilmente adicionar bot\u00F5es ou outros elementos para melhorar a funcionalidade ou apar\u00EAncia do combobox de pesquisa. -->\n   <ng-content select=\"[btnRight]\"></ng-content>\n\n</div>\n\n<!-- #region MENSAGEM DE ERRO DE VALIDA\u00C7\u00C3O -->\n<lib-error-message *ngIf=\"showErrorMessage && invalidControl\" customMessage=\"Este campo \u00E9 obrigat\u00F3rio.\" />\n<!-- #endregion MENSAGEM DE ERRO DE VALIDA\u00C7\u00C3O -->", styles: [".glb-max-height-350px{max-height:350px!important}.form-label{font-size:16px!important}.z-index-1020{z-index:1020!important}.cursor-pointer{cursor:pointer!important}.dropdown-menu{position:relative}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { control: [{
+        }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input,
                 args: [{ required: true }]
             }], list: [{