ngx-sp-infra 6.5.21 → 6.5.23

package/fesm2022/ngx-sp-infra.mjs

@@ -16,7 +16,7 @@ import { NgxCurrencyDirective } from 'ngx-currency';
 import { NgxMaskDirective, NgxMaskPipe } from 'ngx-mask';
 import * as i3 from 'ngx-pagination';
 import { NgxPaginationModule } from 'ngx-pagination';
-import { Subject, debounceTime, distinctUntilChanged, BehaviorSubject, map, takeUntil, Subscription, take, tap, firstValueFrom, filter } from 'rxjs';
+import { Subject, debounceTime, distinctUntilChanged, BehaviorSubject, combineLatest, map, takeUntil, Subscription, take, tap, firstValueFrom, filter } from 'rxjs';
 import * as i1$2 from '@angular/platform-browser';
 import { cloneDeep, escapeRegExp } from 'lodash';
 import * as i2$1 from 'ngx-drag-drop';
@@ -6486,13 +6486,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class LibComboboxReworkComponent {
     // #endregion PRIVATE
     // #region PUBLIC
-    get list() { return this._list; }
+    get list() { return this._list$.value; }
     set list(value) {
-        this._list = value;
+        // this._list = value;
+        this._list$.next(value);
         // Re-resolve the current value when the list changes
         if (this._value)
             this.writeValue(this._value);
-        this.searchControl.setValue('', { emitEvent: true });
     }
     // Getter/Setter para o valor
     get value() { return this._value; }
@@ -6531,8 +6531,10 @@ class LibComboboxReworkComponent {
         this._cdr = _cdr;
         this._elementRef = _elementRef;
         /** Valor interno do componente */
-        this._list = [];
+        // private _list: T[] = [];
         this._value = null;
+        // BehaviorSubject para a lista
+        this._list$ = new BehaviorSubject([]);
         this._search$ = new BehaviorSubject("");
         this._onTouched = () => { };
         this._onChange = (_) => { };
@@ -6552,7 +6554,8 @@ class LibComboboxReworkComponent {
         this.invalid = false;
         this.isOpen = false;
         this.searchControl = new FormControl("");
-        this.filteredItems$ = this._search$.pipe(debounceTime(150), map((term) => this.filterItems(term)));
+        this.filteredItems$ = combineLatest([this._search$, this._list$])
+            .pipe(debounceTime(150), map(([term, list]) => this.filterItems(term, list)));
         this.compare = (a, b) => {
             if (!a || !b)
                 return false;
@@ -6578,8 +6581,7 @@ class LibComboboxReworkComponent {
     }
     ngOnInit() {
         this.searchControl.valueChanges
-            .pipe(takeUntil(this._destroy$), debounceTime(200))
-            .subscribe((v) => {
+            .pipe(takeUntil(this._destroy$), distinctUntilChanged(), debounceTime(200)).subscribe((v) => {
             if (this.innerFilter)
                 this._search$.next(v ?? "");
             else
@@ -6596,8 +6598,6 @@ class LibComboboxReworkComponent {
     }
     ngOnChanges(changes) {
         if (changes['list'] && changes['list'].currentValue) {
-            this.searchControl.setValue('', { emitEvent: true });
-            this._cdr.detectChanges();
         }
     }
     ngOnDestroy() {
@@ -6608,16 +6608,17 @@ class LibComboboxReworkComponent {
     // O que fazer quando o evento de redimensionamento da tela ocorrer
     onResize() { this.setMaxWidth(); }
     // #region ==========> UTILS <==========
-    filterItems(term) {
+    filterItems(term, list) {
         if (!term)
-            return this.list;
+            return list;
         const t = term.toLowerCase();
-        return this.list.filter((item) => {
+        const filtered = list.filter((item) => {
             const label = typeof item === 'object'
                 ? item[this.customLabel] ?? ''
                 : String(item);
             return label.toLowerCase().includes(t);
         });
+        return filtered;
     }
     // #region Seleção
     select(item) {
@@ -6786,7 +6787,7 @@ class LibComboboxReworkComponent {
                 useExisting: forwardRef(() => LibComboboxReworkComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "leftButtonTemplate", first: true, predicate: ["leftButtonTemplate"], descendants: true, read: TemplateRef }, { propertyName: "rightButtonTemplate", first: true, predicate: ["rightButtonTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"reusable-combobox input-group\" [class.show]=\"isOpen\" (focusout)=\"onBlurOutside($event)\" >\n  @if (leftButtonTemplate) { <ng-container *ngTemplateOutlet=\"leftButtonTemplate\"></ng-container> }\n\n  <div class=\"dropdown w-100\">\n\n    <input #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start w-100 overflow-hidden text-truncate\" data-bs-toggle=\"dropdown\"\n      data-bs-auto-close=\"outside\" [attr.aria-expanded]=\"isOpen\" [attr.aria-haspopup]=\"true\" [attr.aria-label]=\"placeholder\" [class.disabled]=\"disabled\"\n      [class.is-invalid]=\"invalid\" (click)=\"toggleDropdown()\" [value]=\"displayValue()\" [placeholder]=\"placeholder\" readonly\n      [ngClass]=\"{\n        'rounded-start-0': leftButtonTemplate,\n        'rounded-end-0': rightButtonTemplate,\n      }\" />\n\n    <div class=\"dropdown-menu p-2 w-100\" [class.show]=\"isOpen\" style=\"max-height: 320px; overflow-y: auto;\" >\n      <div class=\"dropdown-search input-group mb-2\">\n        <input class=\"form-control form-control-sm\" type=\"search\" [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" aria-label=\"Pesquisar op\u00E7\u00F5es\" (keyup.enter)=\"filterButtonClick.emit(searchControl.value)\" />\n        <button class=\"btn btn-sm btn-primary\" type=\"button\" (click)=\"filterButtonClick.emit(searchControl.value)\"> <lib-icon iconName=\"lupa\" iconSize=\"medium-small\" /> </button>\n      </div>\n\n      @if (multiple && selectedValues?.length) {\n        <div class=\"d-flex flex-row gap-2 flex-wrap my-2\">\n          <span *ngFor=\"let value of selectedValues; trackBy: trackByFn\" class=\"px-3 badge rounded-pill text-primary bg-primary-subtle\">\n            {{ value[customLabel] }} <lib-icon class=\"glb-cursor-pointer\" iconName=\"fechar\" iconSize=\"small\" (click)=\"select(value)\" />\n          </span>\n        </div>\n      }\n\n      <!-- Se utilizar o filtro interno utiliza a propriedade de lista filteredItems$, caso contr\u00E1rio usa a pr\u00F3pria list pois ela ser\u00E1 filtrada pelo componente pai -->\n      <ng-container *ngIf=\"(innerFilter ? (filteredItems$ | async) : list) as items\">\n        @if (items.length === 0) { <div class=\"py-2 px-3 text-muted small\">{{ noResultsText }}</div> }\n\n        @if (value !== '' && value !== null) {\n          <button type=\"button\" class=\"dropdown-item d-flex align-items-center\" (click)=\"writeValue(null)\">\n            <span class=\"fw-bold\">Limpar {{ multiple ? 'op\u00E7\u00F5es selecionadas' : 'op\u00E7\u00E3o selecionada' }}</span>\n          </button>\n        }\n\n        <button *ngFor=\"let item of items; trackBy: trackByFn\" class=\"dropdown-item d-flex align-items-center\" type=\"button\"\n          (click)=\"select(item)\" [attr.aria-selected]=\"isSelected(item)\" >\n\n          @if (optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item, selected: isSelected(item) }\"></ng-container>\n          }\n          @else {\n            <div class=\"w-100 original\">\n              <div class=\"d-flex justify-content-between\">\n                <div [ngClass]=\"{ 'text-primary fw-bold': isSelected(item) }\">\n                  <!-- Se o valor do ID e do LABEL for vazio exibe apenas um risquinho para identificar que h\u00E1 uma op\u00E7\u00E3o ali -->\n                  @if ((item[customLabel] ?? item[customValue]) === '') {\n                    <span class=\"fst-italic text-muted\">Nenhum t\u00EDtulo informado para esta op\u00E7\u00E3o</span>\n                  }\n                  @else {\n                    {{ (item[customLabel] ?? item[customValue]) }}\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </button>\n      </ng-container>\n    </div>\n  </div>\n\n  @if (rightButtonTemplate) { <ng-container *ngTemplateOutlet=\"rightButtonTemplate\"></ng-container> }\n</div>\n", styles: [".reusable-combobox{position:relative;display:flex;flex-wrap:nowrap;width:100%;max-width:100%}.reusable-combobox #toggle-button{box-sizing:border-box}.reusable-combobox .dropdown-menu{width:100%;box-shadow:0 6px 18px #00000014;border-radius:.5rem}.reusable-combobox .dropdown-item{cursor:pointer;border-radius:6px;transition:all .3s ease}.reusable-combobox .dropdown-item:hover:not(:focus){background-color:#f1f5f9}.reusable-combobox.compact .dropdown-menu{max-height:200px}.bg-primary-subtle{background-color:#d1dfe7!important}::-webkit-scrollbar{width:4px;background:transparent}::-webkit-scrollbar-thumb{background:#bbb;border-radius:16px}.disabled{background-color:#e9ecef!important}.dropdown-item{min-height:32px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { 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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "leftButtonTemplate", first: true, predicate: ["leftButtonTemplate"], descendants: true, read: TemplateRef }, { propertyName: "rightButtonTemplate", first: true, predicate: ["rightButtonTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"reusable-combobox input-group\" [class.show]=\"isOpen\" (focusout)=\"onBlurOutside($event)\" >\n  @if (leftButtonTemplate) { <ng-container *ngTemplateOutlet=\"leftButtonTemplate\"></ng-container> }\n\n  <div class=\"dropdown w-100\">\n\n    <input #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start w-100 overflow-hidden text-truncate\" data-bs-toggle=\"dropdown\"\n      data-bs-auto-close=\"outside\" [attr.aria-expanded]=\"isOpen\" [attr.aria-haspopup]=\"true\" [attr.aria-label]=\"placeholder\" [class.disabled]=\"disabled\"\n      [class.is-invalid]=\"invalid\" (click)=\"toggleDropdown()\" [value]=\"displayValue()\" [placeholder]=\"placeholder\" readonly\n      [ngClass]=\"{\n        'rounded-start-0': leftButtonTemplate,\n        'rounded-end-0': rightButtonTemplate,\n      }\" />\n\n    <div class=\"dropdown-menu p-2 w-100\" [class.show]=\"isOpen\" style=\"max-height: 320px; overflow-y: auto;\" >\n      <div class=\"dropdown-search input-group mb-2\">\n        <input class=\"form-control form-control-sm\" type=\"search\" [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" aria-label=\"Pesquisar op\u00E7\u00F5es\" (keyup.enter)=\"filterButtonClick.emit(searchControl.value)\" />\n        <button class=\"btn btn-sm btn-primary\" type=\"button\" (click)=\"filterButtonClick.emit(searchControl.value)\"> <lib-icon iconName=\"lupa\" iconSize=\"medium-small\" /> </button>\n      </div>\n\n      @if (multiple && selectedValues?.length) {\n        <div class=\"d-flex flex-row gap-2 flex-wrap my-2\">\n          <span *ngFor=\"let value of selectedValues; trackBy: trackByFn\" class=\"px-3 badge rounded-pill text-primary bg-primary-subtle\">\n            {{ value[customLabel] }} <lib-icon class=\"glb-cursor-pointer\" iconName=\"fechar\" iconSize=\"small\" (click)=\"select(value)\" />\n          </span>\n        </div>\n      }\n\n      <!-- Se utilizar o filtro interno utiliza a propriedade de lista filteredItems$, caso contr\u00E1rio usa a pr\u00F3pria list pois ela ser\u00E1 filtrada pelo componente pai -->\n      <ng-container *ngIf=\"(innerFilter ? (filteredItems$ | async) : list) as items\">\n        @if (items.length === 0) { <div class=\"py-2 px-3 text-muted small\">{{ noResultsText }}</div> }\n\n        @if (value !== '' && value !== null) {\n          <button type=\"button\" class=\"dropdown-item d-flex align-items-center\" (click)=\"writeValue(null)\">\n            <span class=\"fw-bold\">Limpar {{ multiple ? 'op\u00E7\u00F5es selecionadas' : 'op\u00E7\u00E3o selecionada' }}</span>\n          </button>\n        }\n\n        <button *ngFor=\"let item of items; trackBy: trackByFn\" class=\"dropdown-item d-flex align-items-center\" type=\"button\"\n          (click)=\"select(item)\" [attr.aria-selected]=\"isSelected(item)\" >\n\n          @if (optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item, selected: isSelected(item) }\"></ng-container>\n          }\n          @else {\n            <div class=\"w-100 original\">\n              <div class=\"d-flex justify-content-between\">\n                <div [ngClass]=\"{ 'text-primary fw-bold': isSelected(item) }\">\n                  <!-- Se o valor do ID e do LABEL for vazio exibe apenas um risquinho para identificar que h\u00E1 uma op\u00E7\u00E3o ali -->\n                  @if ((item[customLabel] ?? item[customValue]) === '') {\n                    <span class=\"fst-italic text-muted\">Nenhum t\u00EDtulo informado para esta op\u00E7\u00E3o</span>\n                  }\n                  @else {\n                    {{ (item[customLabel] ?? item[customValue]) }}\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </button>\n      </ng-container>\n    </div>\n  </div>\n\n  @if (rightButtonTemplate) { <ng-container *ngTemplateOutlet=\"rightButtonTemplate\"></ng-container> }\n</div>", styles: [".reusable-combobox{position:relative;display:flex;flex-wrap:nowrap;width:100%;max-width:100%}.reusable-combobox #toggle-button{box-sizing:border-box}.reusable-combobox .dropdown-menu{width:100%;box-shadow:0 6px 18px #00000014;border-radius:.5rem}.reusable-combobox .dropdown-item{cursor:pointer;border-radius:6px;transition:all .3s ease}.reusable-combobox .dropdown-item:hover:not(:focus){background-color:#f1f5f9}.reusable-combobox.compact .dropdown-menu{max-height:200px}.bg-primary-subtle{background-color:#d1dfe7!important}::-webkit-scrollbar{width:4px;background:transparent}::-webkit-scrollbar-thumb{background:#bbb;border-radius:16px}.disabled{background-color:#e9ecef!important}.dropdown-item{min-height:32px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { 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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibComboboxReworkComponent, decorators: [{
             type: Component,
@@ -6801,7 +6802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => LibComboboxReworkComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"reusable-combobox input-group\" [class.show]=\"isOpen\" (focusout)=\"onBlurOutside($event)\" >\n  @if (leftButtonTemplate) { <ng-container *ngTemplateOutlet=\"leftButtonTemplate\"></ng-container> }\n\n  <div class=\"dropdown w-100\">\n\n    <input #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start w-100 overflow-hidden text-truncate\" data-bs-toggle=\"dropdown\"\n      data-bs-auto-close=\"outside\" [attr.aria-expanded]=\"isOpen\" [attr.aria-haspopup]=\"true\" [attr.aria-label]=\"placeholder\" [class.disabled]=\"disabled\"\n      [class.is-invalid]=\"invalid\" (click)=\"toggleDropdown()\" [value]=\"displayValue()\" [placeholder]=\"placeholder\" readonly\n      [ngClass]=\"{\n        'rounded-start-0': leftButtonTemplate,\n        'rounded-end-0': rightButtonTemplate,\n      }\" />\n\n    <div class=\"dropdown-menu p-2 w-100\" [class.show]=\"isOpen\" style=\"max-height: 320px; overflow-y: auto;\" >\n      <div class=\"dropdown-search input-group mb-2\">\n        <input class=\"form-control form-control-sm\" type=\"search\" [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" aria-label=\"Pesquisar op\u00E7\u00F5es\" (keyup.enter)=\"filterButtonClick.emit(searchControl.value)\" />\n        <button class=\"btn btn-sm btn-primary\" type=\"button\" (click)=\"filterButtonClick.emit(searchControl.value)\"> <lib-icon iconName=\"lupa\" iconSize=\"medium-small\" /> </button>\n      </div>\n\n      @if (multiple && selectedValues?.length) {\n        <div class=\"d-flex flex-row gap-2 flex-wrap my-2\">\n          <span *ngFor=\"let value of selectedValues; trackBy: trackByFn\" class=\"px-3 badge rounded-pill text-primary bg-primary-subtle\">\n            {{ value[customLabel] }} <lib-icon class=\"glb-cursor-pointer\" iconName=\"fechar\" iconSize=\"small\" (click)=\"select(value)\" />\n          </span>\n        </div>\n      }\n\n      <!-- Se utilizar o filtro interno utiliza a propriedade de lista filteredItems$, caso contr\u00E1rio usa a pr\u00F3pria list pois ela ser\u00E1 filtrada pelo componente pai -->\n      <ng-container *ngIf=\"(innerFilter ? (filteredItems$ | async) : list) as items\">\n        @if (items.length === 0) { <div class=\"py-2 px-3 text-muted small\">{{ noResultsText }}</div> }\n\n        @if (value !== '' && value !== null) {\n          <button type=\"button\" class=\"dropdown-item d-flex align-items-center\" (click)=\"writeValue(null)\">\n            <span class=\"fw-bold\">Limpar {{ multiple ? 'op\u00E7\u00F5es selecionadas' : 'op\u00E7\u00E3o selecionada' }}</span>\n          </button>\n        }\n\n        <button *ngFor=\"let item of items; trackBy: trackByFn\" class=\"dropdown-item d-flex align-items-center\" type=\"button\"\n          (click)=\"select(item)\" [attr.aria-selected]=\"isSelected(item)\" >\n\n          @if (optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item, selected: isSelected(item) }\"></ng-container>\n          }\n          @else {\n            <div class=\"w-100 original\">\n              <div class=\"d-flex justify-content-between\">\n                <div [ngClass]=\"{ 'text-primary fw-bold': isSelected(item) }\">\n                  <!-- Se o valor do ID e do LABEL for vazio exibe apenas um risquinho para identificar que h\u00E1 uma op\u00E7\u00E3o ali -->\n                  @if ((item[customLabel] ?? item[customValue]) === '') {\n                    <span class=\"fst-italic text-muted\">Nenhum t\u00EDtulo informado para esta op\u00E7\u00E3o</span>\n                  }\n                  @else {\n                    {{ (item[customLabel] ?? item[customValue]) }}\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </button>\n      </ng-container>\n    </div>\n  </div>\n\n  @if (rightButtonTemplate) { <ng-container *ngTemplateOutlet=\"rightButtonTemplate\"></ng-container> }\n</div>\n", styles: [".reusable-combobox{position:relative;display:flex;flex-wrap:nowrap;width:100%;max-width:100%}.reusable-combobox #toggle-button{box-sizing:border-box}.reusable-combobox .dropdown-menu{width:100%;box-shadow:0 6px 18px #00000014;border-radius:.5rem}.reusable-combobox .dropdown-item{cursor:pointer;border-radius:6px;transition:all .3s ease}.reusable-combobox .dropdown-item:hover:not(:focus){background-color:#f1f5f9}.reusable-combobox.compact .dropdown-menu{max-height:200px}.bg-primary-subtle{background-color:#d1dfe7!important}::-webkit-scrollbar{width:4px;background:transparent}::-webkit-scrollbar-thumb{background:#bbb;border-radius:16px}.disabled{background-color:#e9ecef!important}.dropdown-item{min-height:32px!important}\n"] }]
+                    ], template: "<div class=\"reusable-combobox input-group\" [class.show]=\"isOpen\" (focusout)=\"onBlurOutside($event)\" >\n  @if (leftButtonTemplate) { <ng-container *ngTemplateOutlet=\"leftButtonTemplate\"></ng-container> }\n\n  <div class=\"dropdown w-100\">\n\n    <input #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start w-100 overflow-hidden text-truncate\" data-bs-toggle=\"dropdown\"\n      data-bs-auto-close=\"outside\" [attr.aria-expanded]=\"isOpen\" [attr.aria-haspopup]=\"true\" [attr.aria-label]=\"placeholder\" [class.disabled]=\"disabled\"\n      [class.is-invalid]=\"invalid\" (click)=\"toggleDropdown()\" [value]=\"displayValue()\" [placeholder]=\"placeholder\" readonly\n      [ngClass]=\"{\n        'rounded-start-0': leftButtonTemplate,\n        'rounded-end-0': rightButtonTemplate,\n      }\" />\n\n    <div class=\"dropdown-menu p-2 w-100\" [class.show]=\"isOpen\" style=\"max-height: 320px; overflow-y: auto;\" >\n      <div class=\"dropdown-search input-group mb-2\">\n        <input class=\"form-control form-control-sm\" type=\"search\" [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" aria-label=\"Pesquisar op\u00E7\u00F5es\" (keyup.enter)=\"filterButtonClick.emit(searchControl.value)\" />\n        <button class=\"btn btn-sm btn-primary\" type=\"button\" (click)=\"filterButtonClick.emit(searchControl.value)\"> <lib-icon iconName=\"lupa\" iconSize=\"medium-small\" /> </button>\n      </div>\n\n      @if (multiple && selectedValues?.length) {\n        <div class=\"d-flex flex-row gap-2 flex-wrap my-2\">\n          <span *ngFor=\"let value of selectedValues; trackBy: trackByFn\" class=\"px-3 badge rounded-pill text-primary bg-primary-subtle\">\n            {{ value[customLabel] }} <lib-icon class=\"glb-cursor-pointer\" iconName=\"fechar\" iconSize=\"small\" (click)=\"select(value)\" />\n          </span>\n        </div>\n      }\n\n      <!-- Se utilizar o filtro interno utiliza a propriedade de lista filteredItems$, caso contr\u00E1rio usa a pr\u00F3pria list pois ela ser\u00E1 filtrada pelo componente pai -->\n      <ng-container *ngIf=\"(innerFilter ? (filteredItems$ | async) : list) as items\">\n        @if (items.length === 0) { <div class=\"py-2 px-3 text-muted small\">{{ noResultsText }}</div> }\n\n        @if (value !== '' && value !== null) {\n          <button type=\"button\" class=\"dropdown-item d-flex align-items-center\" (click)=\"writeValue(null)\">\n            <span class=\"fw-bold\">Limpar {{ multiple ? 'op\u00E7\u00F5es selecionadas' : 'op\u00E7\u00E3o selecionada' }}</span>\n          </button>\n        }\n\n        <button *ngFor=\"let item of items; trackBy: trackByFn\" class=\"dropdown-item d-flex align-items-center\" type=\"button\"\n          (click)=\"select(item)\" [attr.aria-selected]=\"isSelected(item)\" >\n\n          @if (optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item, selected: isSelected(item) }\"></ng-container>\n          }\n          @else {\n            <div class=\"w-100 original\">\n              <div class=\"d-flex justify-content-between\">\n                <div [ngClass]=\"{ 'text-primary fw-bold': isSelected(item) }\">\n                  <!-- Se o valor do ID e do LABEL for vazio exibe apenas um risquinho para identificar que h\u00E1 uma op\u00E7\u00E3o ali -->\n                  @if ((item[customLabel] ?? item[customValue]) === '') {\n                    <span class=\"fst-italic text-muted\">Nenhum t\u00EDtulo informado para esta op\u00E7\u00E3o</span>\n                  }\n                  @else {\n                    {{ (item[customLabel] ?? item[customValue]) }}\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </button>\n      </ng-container>\n    </div>\n  </div>\n\n  @if (rightButtonTemplate) { <ng-container *ngTemplateOutlet=\"rightButtonTemplate\"></ng-container> }\n</div>", styles: [".reusable-combobox{position:relative;display:flex;flex-wrap:nowrap;width:100%;max-width:100%}.reusable-combobox #toggle-button{box-sizing:border-box}.reusable-combobox .dropdown-menu{width:100%;box-shadow:0 6px 18px #00000014;border-radius:.5rem}.reusable-combobox .dropdown-item{cursor:pointer;border-radius:6px;transition:all .3s ease}.reusable-combobox .dropdown-item:hover:not(:focus){background-color:#f1f5f9}.reusable-combobox.compact .dropdown-menu{max-height:200px}.bg-primary-subtle{background-color:#d1dfe7!important}::-webkit-scrollbar{width:4px;background:transparent}::-webkit-scrollbar-thumb{background:#bbb;border-radius:16px}.disabled{background-color:#e9ecef!important}.dropdown-item{min-height:32px!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { list: [{
                 type: Input,
                 args: [{ required: true }]