ngx-sp-infra 5.19.6 → 5.19.8

package/fesm2022/ngx-sp-infra.mjs

@@ -7969,6 +7969,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class LibComboboxReworkComponent {
+    // Getter/Setter para o valor
+    get value() { return this._value; }
+    set value(val) {
+        if (val !== this._value) {
+            this._value = val;
+            this._onChange(val); // Notifica o FormControl sobre a mudança
+        }
+    }
     displayValue() {
         if (!this.value)
             return this.placeholder;
@@ -7976,27 +7984,28 @@ class LibComboboxReworkComponent {
             if (this.value.length === 0)
                 return this.placeholder;
             let extraSelected = 0;
-            let formattedValue = "";
             this.value.forEach((e, index) => {
                 if (index >= 2)
                     extraSelected++;
             });
+            // Filtra o valor para exibir até dois valores selecionados, se passar disso mostra "e +{n} selecionado(s)"
             return this.value.map((e, index) => {
                 if (index < 2)
                     return this.displayWith(e);
                 return null;
             })
                 .filter(e => e !== null)
-                .join(', ') + (extraSelected > 0 ? ` e +${extraSelected} selecionados` : '');
+                .join(', ') + (extraSelected > 0 ? ` e +${extraSelected} selecionado(s)` : '');
         }
         return this.displayWith(this.value);
     }
     // #endregion PUBLIC
     // #endregion ==========> PROPERTIES <==========
-    constructor(_cdr) {
+    constructor(_cdr, _elementRef) {
         this._cdr = _cdr;
-        // #region ==========> PROPERTIES <==========
-        // #region PRIVATE
+        this._elementRef = _elementRef;
+        /** Valor interno do componente */
+        this._value = null;
         this._search$ = new BehaviorSubject("");
         this._onTouched = () => { };
         this._onChange = (_) => { };
@@ -8015,12 +8024,23 @@ class LibComboboxReworkComponent {
         this.selectionChange = new EventEmitter();
         this.filterChange = new EventEmitter();
         this.filterButtonClick = new EventEmitter();
-        this.value = null;
         this.selectedValues = null;
+        this.invalid = false;
         this.isOpen = false;
         this.searchControl = new FormControl("");
         this.filteredItems$ = this._search$.pipe(debounceTime(150), distinctUntilChanged(), map((term) => this.filterItems(term)));
-        this.compareWith = (a, b) => a === b;
+        this.compare = (a, b) => {
+            if (!a || !b)
+                return false;
+            const recA = a;
+            const recB = b;
+            if (a === b)
+                return true;
+            else if ((recA[this.customValue] === recB[this.customValue]) || (recA[this.customLabel] === recB[this.customLabel]))
+                return true;
+            return false;
+        };
+        // public compareWith: (a: T, b: T) => boolean = (a, b) => a === b;
         this.displayWith = (item) => {
             if (!item)
                 return '';
@@ -8040,20 +8060,23 @@ class LibComboboxReworkComponent {
             else
                 this.filterChange.emit(v);
         });
+        this.registerObserver();
     }
     ngAfterViewInit() {
-        // this.setMaxWidth();
+        // [...]
     }
     ngAfterContentInit() {
         this.setMaxWidth();
     }
     ngOnChanges(changes) {
+        // [...]
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
+        this.mutationObserver.disconnect();
     }
-    // O que fazer quando o evento de redimensionamento ocorrer
+    // O que fazer quando o evento de redimensionamento da tela ocorrer
     onResize() { this.setMaxWidth(); }
     // #region ==========> UTILS <==========
     filterItems(term) {
@@ -8071,7 +8094,7 @@ class LibComboboxReworkComponent {
     select(item) {
         if (this.multiple) {
             this.selectedValues = Array.isArray(this.value) ? [...this.value] : [];
-            const index = this.selectedValues.findIndex(v => this.compareWith(v, item));
+            const index = this.selectedValues.findIndex(v => this.compare(v, item));
             if (index > -1)
                 this.selectedValues.splice(index, 1);
             else
@@ -8094,32 +8117,39 @@ class LibComboboxReworkComponent {
         if (!item || !this.value)
             return false;
         if (this.multiple && Array.isArray(this.value)) {
-            return this.value.some(v => this.compareWith(v, item));
+            return this.value.some(v => this.compare(v, item));
         }
-        return this.compareWith(item, this.value);
+        return this.compare(item, this.value);
     }
     // #endregion Seleção
     // #region VALUE_ACCESSOR do Angular
     writeValue(obj) {
         if (!obj)
             this.selectedValues = null;
-        this.value = obj;
         this._onTouched();
-        this.selectionChange.emit(obj);
+        if (this.multiple && obj) {
+            this.selectedValues = Array.isArray(obj) ? [...obj] : [];
+            if (this.selectedValues.length === 0)
+                this.selectedValues = null;
+            this.value = this.selectedValues;
+            this._onChange(this.selectedValues);
+            this.selectionChange.emit(this.selectedValues);
+        }
+        else {
+            this.value = obj;
+            this._onChange(obj);
+            this.selectionChange.emit(obj);
+        }
         this._cdr.markForCheck();
     }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    // #endregion VALUE_ACCESSOR do Angular
-    // #region UI
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this._cdr.markForCheck();
     }
+    // #endregion VALUE_ACCESSOR do Angular
+    // #region UI
     toggleDropdown() {
         if (this.disabled)
             return;
@@ -8133,6 +8163,19 @@ 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();
+    }
     closeDropdown() {
         this.isOpen = false;
         this._cdr.markForCheck();
@@ -8143,26 +8186,48 @@ class LibComboboxReworkComponent {
             this.closeDropdown();
         }
     }
-    // #endregion UI
+    /** Define a largura máxima em pixels com base na largura do container pai
+     *
+     * Esta abordagem foi necessária pois o elemento em questão constantemente aumentava sua largura para acomodar o seu valor interno, independente das regras CSS impostas.
+     *
+     * A solução mais rápida era definir uma largura em pixels fixa na inicialização, o que não é o ideal por questões de responsividade, portanto este método é chamado em caso de resize da tela também
+    */
     setMaxWidth() {
         if (this.toggleButton) {
             const container = this.toggleButton?.nativeElement;
-            const parent = this.toggleButton?.nativeElement.parentElement; // Pega dois níveis acima pois o primeiro nível é a div de dropdown
-            console.log("parent?.scrollWidth", parent?.scrollWidth);
-            console.log("parent?.clientWidth", parent?.clientWidth);
+            const parent = this.toggleButton?.nativeElement.parentElement;
             container.style.minWidth = '100%';
             container.style.width = `${parent.scrollWidth}px`;
-            console.log("parent?.scrollWidth", parent?.scrollWidth);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LibComboboxReworkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    // #endregion UI
+    // #region Mutation Observer
+    registerObserver() {
+        this.mutationObserver = new MutationObserver(mutations => {
+            mutations.forEach(mut => {
+                if (mut.type === 'attributes' && mut.attributeName === 'class')
+                    this.checkInvalidClass();
+            });
+        });
+        this.mutationObserver.observe(this._elementRef.nativeElement, {
+            attributes: true,
+            attributeFilter: ['class', 'disabled']
+        });
+        setTimeout(() => this.checkInvalidClass());
+    }
+    checkInvalidClass() {
+        const hasInvalid = this._elementRef.nativeElement.classList.contains('is-invalid');
+        this.invalid = hasInvalid;
+        this._cdr.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LibComboboxReworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: LibComboboxReworkComponent, isStandalone: true, selector: "lib-combobox-rework", inputs: { list: "list", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", noResultsText: "noResultsText", disabled: "disabled", multiple: "multiple", innerFilter: "innerFilter", customLabel: "customLabel", customValue: "customValue" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", filterButtonClick: "filterButtonClick" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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 }, { propertyName: "reusableComboboxContainer", first: true, predicate: ["reusableComboboxContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"reusable-combobox input-group\" [class.show]=\"isOpen\" (focusout)=\"onBlurOutside($event)\" #reusableComboboxContainer >\n  @if (leftButtonTemplate) { <ng-container *ngTemplateOutlet=\"leftButtonTemplate\"></ng-container> }\n\n  <div class=\"dropdown w-100\">\n    <div #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start\" type=\"button\" data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\"\n      [attr.aria-expanded]=\"isOpen\" [attr.aria-haspopup]=\"true\" [attr.aria-label]=\"placeholder\" [class.disabled]=\"disabled\"\n      (click)=\"toggleDropdown()\" readonly \n      [ngClass]=\"{\n        'rounded-start-0': leftButtonTemplate,\n        'rounded-end-0': rightButtonTemplate,\n      }\" >\n      <span class=\"w-100 overflow-hidden text-truncate\"> {{ displayValue() }} </span>  \n    </div>\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>{{ (item[customLabel] ?? item[customValue]) }}</div>\n                <small class=\"text-muted\" *ngIf=\"isSelected(item)\">\u2713</small>\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}\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$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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    <div #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start\" type=\"button\" 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()\" readonly\n      [ngClass]=\"{\n        'rounded-start-0': leftButtonTemplate,\n        'rounded-end-0': rightButtonTemplate,\n      }\" >\n      <span class=\"w-100 overflow-hidden text-truncate\"> {{ displayValue() }} </span>  \n    </div>\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>{{ (item[customLabel] ?? item[customValue]) }}</div>\n                <small class=\"text-muted\" *ngIf=\"isSelected(item)\">\u2713</small>\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}\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$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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.14", ngImport: i0, type: LibComboboxReworkComponent, decorators: [{
             type: Component,
@@ -8170,16 +8235,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        LibIconsComponent,
-                        TextTruncateDirective
+                        LibIconsComponent
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => LibComboboxReworkComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"reusable-combobox input-group\" [class.show]=\"isOpen\" (focusout)=\"onBlurOutside($event)\" #reusableComboboxContainer >\n  @if (leftButtonTemplate) { <ng-container *ngTemplateOutlet=\"leftButtonTemplate\"></ng-container> }\n\n  <div class=\"dropdown w-100\">\n    <div #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start\" type=\"button\" data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\"\n      [attr.aria-expanded]=\"isOpen\" [attr.aria-haspopup]=\"true\" [attr.aria-label]=\"placeholder\" [class.disabled]=\"disabled\"\n      (click)=\"toggleDropdown()\" readonly \n      [ngClass]=\"{\n        'rounded-start-0': leftButtonTemplate,\n        'rounded-end-0': rightButtonTemplate,\n      }\" >\n      <span class=\"w-100 overflow-hidden text-truncate\"> {{ displayValue() }} </span>  \n    </div>\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>{{ (item[customLabel] ?? item[customValue]) }}</div>\n                <small class=\"text-muted\" *ngIf=\"isSelected(item)\">\u2713</small>\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}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
+                    ], 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    <div #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start\" type=\"button\" 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()\" readonly\n      [ngClass]=\"{\n        'rounded-start-0': leftButtonTemplate,\n        'rounded-end-0': rightButtonTemplate,\n      }\" >\n      <span class=\"w-100 overflow-hidden text-truncate\"> {{ displayValue() }} </span>  \n    </div>\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>{{ (item[customLabel] ?? item[customValue]) }}</div>\n                <small class=\"text-muted\" *ngIf=\"isSelected(item)\">\u2713</small>\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}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { list: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -8209,9 +8273,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ["toggleButton", { static: true }]
-            }], reusableComboboxContainer: [{
-                type: ViewChild,
-                args: ["reusableComboboxContainer", { static: true }]
             }], selectionChange: [{
                 type: Output
             }], filterChange: [{
@@ -10815,25 +10876,17 @@ class TreeComponent {
             this.onSelect.emit(false);
         }
     }
-    onCheckEvent(items) {
-        if (this.indeterminateCheck(items)) {
-            this.onEvent.emit(true);
-        }
-        else {
-            this.onEvent.emit(false);
-        }
-    }
     // #endregion ==========> PUBLIC METHODS <==========
     // #region ==========> PRIVATE METHODS <==========
     indeterminateCheck(list) {
         return list.some(this.checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TreeComponent, isStandalone: true, selector: "app-tree, lib-tree", inputs: { items: "items", openAll: "openAll", checkbox: "checkbox", filter: "filter" }, outputs: { onSelect: "onSelect", onEvent: "onEvent" }, ngImport: i0, template: "<!-- FILTER -->\n<ng-template [ngIf]=\"filter\">\n  <!-- <app-search-filters></app-search-filters> -->\n\n  <div class=\"input-group glb-search-input my-3\">\n    <span class=\"input-group-text search px-2 glb-bg-color-white\">\n      <lib-icon iconName=\"lupa\" iconColor=\"gray\" iconSize=\"medium-small\"\n        class=\"d-flex align-items-center\"></lib-icon>\n    </span>\n    <input type=\"text\" class=\"form-control border-left-none ps-0\" [(ngModel)]=\"search\">\n  </div>\n  \n</ng-template>\n<!-- TREE -->\n<ul class=\"tree-view\">\n  <ng-container *ngFor=\"let item of items | TreeFilter : search; index as i\">\n    <div class=\"container py-1\" [class]=\"!item.has_children ? 'children' : null \">\n      <lib-icon\n        class=\"chevron\"\n        *ngIf=\"item.has_children\"\n        [class]=\"item.aplicClass ? 'rotate' : null\"\n        (click)=\"\n          onExpand(item);\n          item.aplicClass ? (item.aplicClass = false) : (item.aplicClass = true)\n        \"\n        iconSize=\"medium-small\"\n        iconName=\"seta-direita\"\n      ></lib-icon>\n      <!-- CHECKBOX -->\n      <ng-template [ngIf]=\"checkbox\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input m-0 position-relative\"\n          [checked]=\"onCheckEvent(items)\"\n          (change)=\"onCheck(items, item)\"\n          [(ngModel)]=\"item.is_selected\"\n        />\n      </ng-template>\n\n      <lib-icon *ngIf=\"item.icon\" [iconName]=\"item.icon\" iconSize=\"medium-small\" class=\"ms-2\" />\n\n      <label class=\"label mb-0 ms-2\">{{ item.label }}</label>\n    </div>\n    <!-- NODES -->\n    <ul *ngIf=\"item.expanded\">\n      <app-tree\n        (onSelect)=\"item.is_selected = $event\"\n        (onEvent)=\"item.is_selected = $event\"\n        [items]=\"item.children ?? []\"\n        [checkbox]=\"checkbox\"\n      ></app-tree>\n    </ul>\n  </ng-container>\n</ul>", styles: ["*{font-family:Open Sans,Arial,Helvetica,sans-serif;color:#000;box-sizing:border-box;list-style:none;font-size:1rem}.tree-view{margin:0;padding:0;list-style-type:none;transition:all .3s ease-in-out}.container{margin:0;padding:0;display:flex;align-items:center}.chevron{position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0);-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out;color:#000;cursor:pointer}.chevron:hover{color:#0d6efd;transform:rotate(30deg)}.chevron.rotate{transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transition:.3s}.form-check-input{cursor:pointer}.children{padding-left:20px}\n"], dependencies: [{ kind: "component", type: TreeComponent, selector: "app-tree, lib-tree", inputs: ["items", "openAll", "checkbox", "filter"], outputs: ["onSelect", "onEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LibIconsComponent, selector: "lib-icon", inputs: ["iconName", "iconColor", "iconSize", "iconFill"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: SearchTreePipe, name: "TreeFilter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TreeComponent, isStandalone: true, selector: "app-tree, lib-tree", inputs: { items: "items", openAll: "openAll", checkbox: "checkbox", filter: "filter" }, outputs: { onSelect: "onSelect", onEvent: "onEvent" }, ngImport: i0, template: "<!-- FILTER -->\n<ng-template [ngIf]=\"filter\">\n  <!-- <app-search-filters></app-search-filters> -->\n\n  <div class=\"input-group glb-search-input my-3\">\n    <span class=\"input-group-text search px-2 glb-bg-color-white\">\n      <lib-icon iconName=\"lupa\" iconColor=\"gray\" iconSize=\"medium-small\"\n        class=\"d-flex align-items-center\"></lib-icon>\n    </span>\n    <input type=\"text\" class=\"form-control border-left-none ps-0\" [(ngModel)]=\"search\">\n  </div>\n  \n</ng-template>\n<!-- TREE -->\n<ul class=\"tree-view\">\n  <ng-container *ngFor=\"let item of items | TreeFilter : search; index as i\">\n    <div class=\"container py-1\" [class]=\"!item.has_children ? 'children' : null \">\n      <lib-icon\n        class=\"chevron\"\n        *ngIf=\"item.has_children\"\n        [class]=\"item.aplicClass ? 'rotate' : null\"\n        (click)=\"\n          onExpand(item);\n          item.aplicClass ? (item.aplicClass = false) : (item.aplicClass = true)\n        \"\n        iconSize=\"medium-small\"\n        iconName=\"seta-direita\"\n      ></lib-icon>\n      <!-- CHECKBOX -->\n      <ng-template [ngIf]=\"checkbox\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input m-0 position-relative\"\n          (change)=\"onCheck(items, item)\"\n          [(ngModel)]=\"item.is_selected\"\n        />\n      </ng-template>\n\n      <lib-icon *ngIf=\"item.icon\" [iconName]=\"item.icon\" iconSize=\"medium-small\" class=\"ms-2\" />\n\n      <label class=\"label mb-0 ms-2\">{{ item.label }}</label>\n    </div>\n    <!-- NODES -->\n    <ul *ngIf=\"item.expanded\">\n      <app-tree\n        (onSelect)=\"item.is_selected = $event\"\n        (onEvent)=\"item.is_selected = $event\"\n        [items]=\"item.children ?? []\"\n        [checkbox]=\"checkbox\"\n      ></app-tree>\n    </ul>\n  </ng-container>\n</ul>", styles: ["*{font-family:Open Sans,Arial,Helvetica,sans-serif;color:#000;box-sizing:border-box;list-style:none;font-size:1rem}.tree-view{margin:0;padding:0;list-style-type:none;transition:all .3s ease-in-out}.container{margin:0;padding:0;display:flex;align-items:center}.chevron{position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0);-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out;color:#000;cursor:pointer}.chevron:hover{color:#0d6efd;transform:rotate(30deg)}.chevron.rotate{transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transition:.3s}.form-check-input{cursor:pointer}.children{padding-left:20px}\n"], dependencies: [{ kind: "component", type: TreeComponent, selector: "app-tree, lib-tree", inputs: ["items", "openAll", "checkbox", "filter"], outputs: ["onSelect", "onEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LibIconsComponent, selector: "lib-icon", inputs: ["iconName", "iconColor", "iconSize", "iconFill"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: SearchTreePipe, name: "TreeFilter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-tree, lib-tree", imports: [NgIf, LibIconsComponent, FormsModule, NgFor, SearchTreePipe], template: "<!-- FILTER -->\n<ng-template [ngIf]=\"filter\">\n  <!-- <app-search-filters></app-search-filters> -->\n\n  <div class=\"input-group glb-search-input my-3\">\n    <span class=\"input-group-text search px-2 glb-bg-color-white\">\n      <lib-icon iconName=\"lupa\" iconColor=\"gray\" iconSize=\"medium-small\"\n        class=\"d-flex align-items-center\"></lib-icon>\n    </span>\n    <input type=\"text\" class=\"form-control border-left-none ps-0\" [(ngModel)]=\"search\">\n  </div>\n  \n</ng-template>\n<!-- TREE -->\n<ul class=\"tree-view\">\n  <ng-container *ngFor=\"let item of items | TreeFilter : search; index as i\">\n    <div class=\"container py-1\" [class]=\"!item.has_children ? 'children' : null \">\n      <lib-icon\n        class=\"chevron\"\n        *ngIf=\"item.has_children\"\n        [class]=\"item.aplicClass ? 'rotate' : null\"\n        (click)=\"\n          onExpand(item);\n          item.aplicClass ? (item.aplicClass = false) : (item.aplicClass = true)\n        \"\n        iconSize=\"medium-small\"\n        iconName=\"seta-direita\"\n      ></lib-icon>\n      <!-- CHECKBOX -->\n      <ng-template [ngIf]=\"checkbox\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input m-0 position-relative\"\n          [checked]=\"onCheckEvent(items)\"\n          (change)=\"onCheck(items, item)\"\n          [(ngModel)]=\"item.is_selected\"\n        />\n      </ng-template>\n\n      <lib-icon *ngIf=\"item.icon\" [iconName]=\"item.icon\" iconSize=\"medium-small\" class=\"ms-2\" />\n\n      <label class=\"label mb-0 ms-2\">{{ item.label }}</label>\n    </div>\n    <!-- NODES -->\n    <ul *ngIf=\"item.expanded\">\n      <app-tree\n        (onSelect)=\"item.is_selected = $event\"\n        (onEvent)=\"item.is_selected = $event\"\n        [items]=\"item.children ?? []\"\n        [checkbox]=\"checkbox\"\n      ></app-tree>\n    </ul>\n  </ng-container>\n</ul>", styles: ["*{font-family:Open Sans,Arial,Helvetica,sans-serif;color:#000;box-sizing:border-box;list-style:none;font-size:1rem}.tree-view{margin:0;padding:0;list-style-type:none;transition:all .3s ease-in-out}.container{margin:0;padding:0;display:flex;align-items:center}.chevron{position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0);-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out;color:#000;cursor:pointer}.chevron:hover{color:#0d6efd;transform:rotate(30deg)}.chevron.rotate{transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transition:.3s}.form-check-input{cursor:pointer}.children{padding-left:20px}\n"] }]
+            args: [{ selector: "app-tree, lib-tree", imports: [NgIf, LibIconsComponent, FormsModule, NgFor, SearchTreePipe], template: "<!-- FILTER -->\n<ng-template [ngIf]=\"filter\">\n  <!-- <app-search-filters></app-search-filters> -->\n\n  <div class=\"input-group glb-search-input my-3\">\n    <span class=\"input-group-text search px-2 glb-bg-color-white\">\n      <lib-icon iconName=\"lupa\" iconColor=\"gray\" iconSize=\"medium-small\"\n        class=\"d-flex align-items-center\"></lib-icon>\n    </span>\n    <input type=\"text\" class=\"form-control border-left-none ps-0\" [(ngModel)]=\"search\">\n  </div>\n  \n</ng-template>\n<!-- TREE -->\n<ul class=\"tree-view\">\n  <ng-container *ngFor=\"let item of items | TreeFilter : search; index as i\">\n    <div class=\"container py-1\" [class]=\"!item.has_children ? 'children' : null \">\n      <lib-icon\n        class=\"chevron\"\n        *ngIf=\"item.has_children\"\n        [class]=\"item.aplicClass ? 'rotate' : null\"\n        (click)=\"\n          onExpand(item);\n          item.aplicClass ? (item.aplicClass = false) : (item.aplicClass = true)\n        \"\n        iconSize=\"medium-small\"\n        iconName=\"seta-direita\"\n      ></lib-icon>\n      <!-- CHECKBOX -->\n      <ng-template [ngIf]=\"checkbox\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input m-0 position-relative\"\n          (change)=\"onCheck(items, item)\"\n          [(ngModel)]=\"item.is_selected\"\n        />\n      </ng-template>\n\n      <lib-icon *ngIf=\"item.icon\" [iconName]=\"item.icon\" iconSize=\"medium-small\" class=\"ms-2\" />\n\n      <label class=\"label mb-0 ms-2\">{{ item.label }}</label>\n    </div>\n    <!-- NODES -->\n    <ul *ngIf=\"item.expanded\">\n      <app-tree\n        (onSelect)=\"item.is_selected = $event\"\n        (onEvent)=\"item.is_selected = $event\"\n        [items]=\"item.children ?? []\"\n        [checkbox]=\"checkbox\"\n      ></app-tree>\n    </ul>\n  </ng-container>\n</ul>", styles: ["*{font-family:Open Sans,Arial,Helvetica,sans-serif;color:#000;box-sizing:border-box;list-style:none;font-size:1rem}.tree-view{margin:0;padding:0;list-style-type:none;transition:all .3s ease-in-out}.container{margin:0;padding:0;display:flex;align-items:center}.chevron{position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0);-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out;color:#000;cursor:pointer}.chevron:hover{color:#0d6efd;transform:rotate(30deg)}.chevron.rotate{transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transition:.3s}.form-check-input{cursor:pointer}.children{padding-left:20px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{
                 type: Input
             }], openAll: [{