matcha-components 20.163.0 → 20.166.0

package/fesm2022/matcha-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, HostBinding, Input, Component, ContentChildren, ElementRef, Renderer2, Inject, ViewEncapsulation, ChangeDetectionStrategy, HostListener, ContentChild, Directive, forwardRef, ViewChild, InjectionToken, inject, Injectable, TemplateRef, Optional, NgModule, createComponent, Pipe, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, EventEmitter, Output, HostBinding, Input, Component, ContentChildren, ElementRef, Renderer2, Inject, ViewEncapsulation, ChangeDetectionStrategy, HostListener, ContentChild, Directive, forwardRef, ViewChild, inject, Injectable, TemplateRef, Optional, NgModule, createComponent, Pipe, PLATFORM_ID } from '@angular/core';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
 import { Subscription, Subject, BehaviorSubject, fromEvent, of } from 'rxjs';
 import { debounceTime, takeUntil, filter, startWith, map, distinctUntilChanged } from 'rxjs/operators';
@@ -13,7 +13,7 @@ import * as i1$1 from '@angular/common/http';
  * Token de injeção para MatchaOptionParent
  * Usado para injetar o componente pai no matcha-option
  */
-const MATCHA_OPTION_PARENT = Symbol('MatchaOptionParent');
+const MATCHA_OPTION_PARENT = new InjectionToken('MatchaOptionParent');
 
 const customAnimation = animation([
     style({
@@ -3202,17 +3202,14 @@ class MatchaTabsComponent {
         }
     }
     handleKeyboardEvent(event) {
+        // Ignorar se o evento vier de um input, textarea ou select
+        const target = event.target;
+        if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) || target.isContentEditable) {
+            return;
+        }
         const tabsArray = this.tabs.toArray();
         const currentIndex = tabsArray.findIndex(tab => tab.active);
-        if (event.key === 'ArrowRight') {
-            const nextIndex = (currentIndex + 1) % tabsArray.length;
-            this.selectTabByIndex(nextIndex);
-        }
-        else if (event.key === 'ArrowLeft') {
-            const prevIndex = (currentIndex - 1 + tabsArray.length) % tabsArray.length;
-            this.selectTabByIndex(prevIndex);
-        }
-        else if (event.key === 'Home') {
+        if (event.key === 'Home') {
             this.selectTabByIndex(0);
         }
         else if (event.key === 'End') {
@@ -8507,18 +8504,11 @@ class MatchaOptionComponent {
     onClick() {
         if (this.disabled)
             return;
-        console.log('MatchaOption: Clique na opção', {
-            value: this.value,
-            parent: this.parent,
-            disabled: this.disabled
-        });
         // ✅ Notifica o pai (se houver) - qualquer componente que implemente MatchaOptionParent
         if (this.parent) {
-            console.log('MatchaOption: Usando parent.selectOption');
             this.parent.selectOption(this);
         }
         else {
-            console.log('MatchaOption: Usando fallback findParentAndSelect');
             // Fallback: busca o pai via DOM
             this.findParentAndSelect();
         }
@@ -8531,27 +8521,20 @@ class MatchaOptionComponent {
         const autocompleteEl = this.elRef.nativeElement.closest('matcha-autocomplete');
         const selectEl = this.elRef.nativeElement.closest('matcha-select');
         if (autocompleteEl) {
-            console.log('MatchaOption: Encontrou autocomplete element', autocompleteEl);
             // Dispara um evento customizado que o autocomplete pode escutar
             const event = new CustomEvent('matcha-option-selected', {
                 detail: { option: this, value: this.value },
                 bubbles: true
             });
             autocompleteEl.dispatchEvent(event);
-            console.log('MatchaOption: Evento customizado disparado', event);
         }
         else if (selectEl) {
-            console.log('MatchaOption: Encontrou select element', selectEl);
             // Dispara um evento customizado que o select pode escutar
             const event = new CustomEvent('matcha-option-selected', {
                 detail: { option: this, value: this.value },
                 bubbles: true
             });
             selectEl.dispatchEvent(event);
-            console.log('MatchaOption: Evento customizado disparado para select', event);
-        }
-        else {
-            console.log('MatchaOption: Não encontrou elemento pai (autocomplete ou select)');
         }
     }
     onKeydown(ev) {
@@ -8614,26 +8597,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class MatchaPanelComponent {
-    constructor(elRef, cdr) {
+    constructor(elRef, renderer, cdr) {
         this.elRef = elRef;
+        this.renderer = renderer;
         this.cdr = cdr;
         this.placement = 'auto';
         this.maxHeight = 280;
         this.minWidth = 160;
         this.offset = 4; // Espaçamento entre trigger e painel
         this.open = false;
+        this.hasOverlay = true; // Mantido por compatibilidade, mas sem efeito visual de backdrop
         this.opened = new EventEmitter();
         this.closed = new EventEmitter();
-        this.panelStyle = {};
+        // Estado de posicionamento
+        this.panePosition = { top: 0, left: 0, width: 0, maxHeight: 280 };
+        this.actualPlacement = 'bottom';
+        this.isPositioned = false;
         this.destroy$ = new Subject();
+        // Listener manual para scroll com capture: true
+        // Atualização SÍNCRONA para eliminar "dancing/jitter" (efeito de atraso de 1 frame)
+        this.scrollListener = (event) => {
+            if (!this.open)
+                return;
+            this.updatePosition();
+        };
     }
     ngOnInit() {
-        // Inicialização básica
+        // Escutar evento global de fechamento de todos os painéis
+        this.globalListener = this.renderer.listen('document', 'matcha-panel-open-global', (event) => {
+            if (event.detail?.source !== this && this.open) {
+                this.closePanel();
+            }
+        });
+        // Escutar cliques fora do painel
+        this.clickListener = this.renderer.listen('document', 'click', (event) => {
+            if (!this.open)
+                return;
+            const target = event.target;
+            // Verificar se clicou dentro do painel (via ViewChild pois *ngIf recria)
+            const panelEl = this.panelRef?.nativeElement;
+            const isInsidePanel = panelEl?.contains(target);
+            const isInsideTrigger = this.triggerElement?.contains(target);
+            if (!isInsidePanel && !isInsideTrigger) {
+                this.closePanel();
+            }
+        });
+        // Registrar listener de scroll com capture para detectar scroll em QUALQUER container
+        window.addEventListener('scroll', this.scrollListener, true);
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
-        this.cleanupListeners();
+        if (this.globalListener) {
+            this.globalListener();
+        }
+        if (this.clickListener) {
+            this.clickListener();
+        }
+        window.removeEventListener('scroll', this.scrollListener, true);
+        // this.cleanupPortal(); // Removed
+    }
+    onWindowResize() {
+        if (this.open) {
+            this.closePanel();
+        }
     }
     /**
      * Anexa o painel a um elemento trigger
@@ -8641,22 +8668,17 @@ class MatchaPanelComponent {
     attachTo(trigger) {
         this.triggerElement = trigger;
     }
-    ngAfterViewInit() {
-        // Aguarda a view ser inicializada antes de calcular posição
-        if (this.triggerElement && this.open) {
-            this.cdr.detectChanges();
-            this.updatePosition();
-        }
-    }
-    /**
-     * Lifecycle hook para detectar mudanças no triggerElement
-     */
+    // ngAfterViewInit() { // Removed
+    //     // Garantir que o painel esteja no body desde o início para evitar clipping
+    //     if (this.panelRef) {
+    //         this.renderer.appendChild(document.body, this.panelRef.nativeElement);
+    //     }
+    //     if (this.triggerElement && this.open) {
+    //         this.updatePosition(); // Apenas atualiza posição se já nascer aberto
+    //     }
+    // }
     ngOnChanges() {
-        // Só logar quando há mudanças significativas
         if (this.triggerElement && this.open) {
-            console.log('MatchaPanel: ngOnChanges - painel aberto, atualizando posição');
-            // Usar detectChanges para forçar a detecção de mudanças
-            this.cdr.detectChanges();
             this.updatePosition();
         }
     }
@@ -8665,27 +8687,38 @@ class MatchaPanelComponent {
      */
     openPanel() {
         if (!this.triggerElement) {
-            console.log('MatchaPanel: triggerElement não encontrado');
             return;
         }
-        // Força a detecção de mudanças antes de atualizar a posição
+        this.open = true;
+        this.isPositioned = false; // Oculta até calcular
+        // Notificar outros painéis para fecharem
+        const event = new CustomEvent('matcha-panel-open-global', {
+            detail: { source: this }
+        });
+        document.dispatchEvent(event);
+        // Forçar renderização (aguardar *ngIf)
         this.cdr.detectChanges();
+        // Garantir que está no body (caso ngAfterViewInit não tenha rodado ou algo tenha removido)
+        // if (this.panelRef && this.panelRef.nativeElement.parentNode !== document.body) { // Removed
+        //     this.renderer.appendChild(document.body, this.panelRef.nativeElement); // Removed
+        // }
+        // Calcular posição inicial
         this.updatePosition();
-        this.setupListeners();
+        // Revelar painel
+        this.isPositioned = true;
         this.opened.emit();
     }
     /**
      * Fecha o painel
      */
     closePanel() {
-        console.log('MatchaPanel: Fechando painel', {
-            open: this.open,
-            triggerElement: this.triggerElement,
-            stackTrace: new Error().stack
-        });
-        this.cleanupListeners();
+        if (!this.open) {
+            return;
+        }
+        this.open = false;
+        this.isPositioned = false;
+        // Scroll lock removido
         this.closed.emit();
-        // Forçar detecção de mudanças para garantir que o painel seja fechado
         this.cdr.detectChanges();
     }
     /**
@@ -8695,116 +8728,157 @@ class MatchaPanelComponent {
         this.open ? this.closePanel() : this.openPanel();
     }
     /**
-     * Atualiza a posição do painel (simplificado para absolute)
+     * Atualiza a posição do painel
+     */
+    /**
+     * Atualiza a posição do painel
+     * @param sync Se true, atualiza imediatamente (usado no scroll). Se false/undefined, usa microtask (usado na abertura).
      */
     updatePosition() {
-        if (!this.triggerElement) {
-            console.log('MatchaPanel: updatePosition - triggerElement não encontrado');
+        if (!this.triggerElement || !this.open) {
             return;
         }
+        // const runUpdate = () => { // Removed runUpdate wrapper
+        if (!this.triggerElement || !this.open)
+            return;
         const position = this.calculatePosition();
-        this.panelStyle = {
-            //   top: `${position.top}px`,
-            //   left: `${position.left}px`,
-            //   minWidth: `${position.width}px`,
-            top: 0,
+        this.actualPlacement = position.actualPlacement;
+        this.panePosition = {
+            top: 0, // Resetar top/left para usar transform
             left: 0,
-            width: '100%',
-            maxHeight: `${position.maxHeight || this.maxHeight}px`,
-            zIndex: 1
+            width: position.width,
+            maxHeight: position.maxHeight || this.maxHeight
         };
+        // Aplicação DIRETA no DOM usando TRANSFORM (GPU) para Zero-Lag
+        if (this.paneRef) {
+            const style = this.paneRef.nativeElement.style;
+            // Usar translate3d força aceleração de hardware
+            style.transform = `translate3d(${position.left}px, ${position.top}px, 0)`;
+            style.width = `${position.width}px`;
+            style.top = '0px';
+            style.left = '0px';
+        }
+        // Detectar mudanças para atualizar classes (bindings)
+        this.cdr.detectChanges();
     }
     /**
-     * Calcula a posição ideal do painel (simplificado para absolute)
+     * Calcula a posição ideal do painel baseado no espaço disponível
      */
     calculatePosition() {
-        if (!this.triggerElement) {
-            return { top: 0, left: 0, width: this.minWidth };
-        }
         const rect = this.triggerElement.getBoundingClientRect();
-        const containerRect = this.triggerElement.offsetParent?.getBoundingClientRect() || { top: 0, left: 0 };
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        const margin = 10;
         let top;
         let left;
         let width = Math.max(rect.width, this.minWidth);
         let maxHeight = this.maxHeight;
-        // Calcular posição horizontal (relativa ao container)
-        left = rect.left - containerRect.left;
-        // Calcular posição vertical (relativa ao container)
-        if (this.placement === 'top') {
-            // Posicionar acima
-            top = rect.top - containerRect.top - this.maxHeight - this.offset;
+        let placement = 'bottom';
+        let actualHeight = 0;
+        // Determinar se deve abrir para cima ou para baixo
+        const spaceBelow = viewportHeight - rect.bottom - margin;
+        const spaceAbove = rect.top - margin;
+        // Lógica de decisão de direção
+        if (this.placement === 'top' || (this.placement === 'auto' && spaceBelow < Math.min(this.maxHeight, 100) && spaceAbove > spaceBelow)) {
+            placement = 'top';
+            maxHeight = Math.min(this.maxHeight, spaceAbove);
+            // Medir altura real do conteúdo para evitar buraco (gap)
+            // Se o conteúdo for menor que maxHeight, usamos a altura real
+            const contentHeight = this.panelRef?.nativeElement.offsetHeight || maxHeight;
+            actualHeight = Math.min(contentHeight, maxHeight);
+            top = rect.top - actualHeight - this.offset;
         }
         else {
-            // Posicionar abaixo (padrão)
-            top = rect.bottom - containerRect.top + this.offset;
+            placement = 'bottom';
+            maxHeight = Math.min(this.maxHeight, spaceBelow);
+            top = rect.bottom + this.offset;
         }
-        return { top, left, width, maxHeight };
-    }
-    /**
-     * Configura listeners para scroll e resize
-     */
-    setupListeners() {
-        // Com position absolute, não precisamos de listeners de scroll/resize
-        console.log('MatchaPanel: setupListeners - position absolute, sem listeners necessários');
-    }
-    /**
-     * Remove listeners
-     */
-    cleanupListeners() {
-        if (this.scrollListener) {
-            window.removeEventListener('scroll', this.scrollListener);
-            this.scrollListener = undefined;
-        }
-        if (this.resizeListener) {
-            window.removeEventListener('resize', this.resizeListener);
-            this.resizeListener = undefined;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaPanelComponent, isStandalone: false, selector: "matcha-panel", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", offset: "offset", triggerElement: "triggerElement", open: "open" }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="matcha-panel-container" style="position: relative;">
-      <ng-container *ngIf="open">
-        <!-- Painel -->
-        <div
-          #panel
-          class="matcha-panel"
-          [class.matcha-panel-top]="placement === 'top'"
-          [class.matcha-panel-bottom]="placement === 'bottom'"
-          [ngStyle]="panelStyle"
-          role="listbox"
-          [attr.aria-expanded]="open"
-          [attr.aria-hidden]="!open">
-          <ng-content></ng-content>
+        // Posicionamento horizontal (tentar alinhar à esquerda do trigger)
+        left = rect.left;
+        // Garantir que não saia da tela horizontalmente
+        if (left + width > viewportWidth - margin) {
+            left = viewportWidth - width - margin;
+        }
+        if (left < margin) {
+            left = margin;
+            width = Math.min(width, viewportWidth - 2 * margin);
+        }
+        // Fallback de segurança se algo der errado nas medidas
+        if (isNaN(top) || isNaN(left)) {
+            top = 20;
+            left = 20;
+        }
+        return { top, left, width, maxHeight, actualPlacement: placement };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaPanelComponent, isStandalone: false, selector: "matcha-panel", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", offset: "offset", triggerElement: "triggerElement", open: "open", hasOverlay: "hasOverlay" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true }, { propertyName: "paneRef", first: true, predicate: ["pane"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <!-- Container âncora (referência local) -->
+    <div class="matcha-panel-anchor" style="display: none;"></div>
+
+    <!-- Estrutura Overlay Local (Material-Like) -->
+    <!-- Carrega apenas quando aberto (*ngIf) e usa position: fixed para escapar do overflow -->
+    <div *ngIf="open" class="matcha-panel-overlay">
+        <!-- Pane de Posicionamento (Absolute dentro do Fixed) -->
+        <div #pane class="matcha-panel-pane" 
+             [style.top.px]="panePosition.top"
+             [style.left.px]="panePosition.left"
+             [style.width.px]="panePosition.width"
+             [style.visibility]="isPositioned ? 'visible' : 'hidden'">
+            
+            <!-- Painel (Conteúdo scrollável) -->
+            <div #panel
+                 class="matcha-panel"
+                 [class.matcha-panel-top]="actualPlacement === 'top'"
+                 [class.matcha-panel-bottom]="actualPlacement === 'bottom'"
+                 [class.matcha-panel-open]="open"
+                 [style.max-height.px]="panePosition.maxHeight"
+                 role="listbox"
+                 [attr.aria-expanded]="open"
+                 [attr.aria-hidden]="!open"
+                 (mousedown)="$event.stopPropagation()"> <!-- Impedir fechamento ao clicar no scroll/painel -->
+                <ng-content></ng-content>
+            </div>
         </div>
-      </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPanelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'matcha-panel',
                     template: `
-    <div class="matcha-panel-container" style="position: relative;">
-      <ng-container *ngIf="open">
-        <!-- Painel -->
-        <div
-          #panel
-          class="matcha-panel"
-          [class.matcha-panel-top]="placement === 'top'"
-          [class.matcha-panel-bottom]="placement === 'bottom'"
-          [ngStyle]="panelStyle"
-          role="listbox"
-          [attr.aria-expanded]="open"
-          [attr.aria-hidden]="!open">
-          <ng-content></ng-content>
+    <!-- Container âncora (referência local) -->
+    <div class="matcha-panel-anchor" style="display: none;"></div>
+
+    <!-- Estrutura Overlay Local (Material-Like) -->
+    <!-- Carrega apenas quando aberto (*ngIf) e usa position: fixed para escapar do overflow -->
+    <div *ngIf="open" class="matcha-panel-overlay">
+        <!-- Pane de Posicionamento (Absolute dentro do Fixed) -->
+        <div #pane class="matcha-panel-pane" 
+             [style.top.px]="panePosition.top"
+             [style.left.px]="panePosition.left"
+             [style.width.px]="panePosition.width"
+             [style.visibility]="isPositioned ? 'visible' : 'hidden'">
+            
+            <!-- Painel (Conteúdo scrollável) -->
+            <div #panel
+                 class="matcha-panel"
+                 [class.matcha-panel-top]="actualPlacement === 'top'"
+                 [class.matcha-panel-bottom]="actualPlacement === 'bottom'"
+                 [class.matcha-panel-open]="open"
+                 [style.max-height.px]="panePosition.maxHeight"
+                 role="listbox"
+                 [attr.aria-expanded]="open"
+                 [attr.aria-hidden]="!open"
+                 (mousedown)="$event.stopPropagation()"> <!-- Impedir fechamento ao clicar no scroll/painel -->
+                <ng-content></ng-content>
+            </div>
         </div>
-      </ng-container>
     </div>
   `,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { placement: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { placement: [{
                 type: Input
             }], maxHeight: [{
                 type: Input
@@ -8816,6 +8890,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], open: [{
                 type: Input
+            }], hasOverlay: [{
+                type: Input
             }], opened: [{
                 type: Output
             }], closed: [{
@@ -8823,6 +8899,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], panelRef: [{
                 type: ViewChild,
                 args: ['panel', { static: false }]
+            }], paneRef: [{
+                type: ViewChild,
+                args: ['pane', { static: false }]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 class MatchaAutocompleteComponent {
@@ -8879,34 +8961,13 @@ class MatchaAutocompleteComponent {
         this.cdr.detectChanges();
         // Escuta eventos customizados das opções
         this.elRef.nativeElement.addEventListener('matcha-option-selected', (event) => {
-            console.log('MatchaAutocomplete: Evento matcha-option-selected recebido', event.detail);
             const { option, value } = event.detail;
             this.selectOption(option);
         });
-        // Escuta evento para fechar este painel quando outro for aberto
-        this.elRef.nativeElement.addEventListener('matcha-autocomplete-close', () => {
-            if (this.open) {
-                console.log('MatchaAutocomplete: Fechando painel por evento de outro autocomplete');
-                this.closePanel();
-            }
-        });
     }
     attachTo(input) {
         this.triggerElement = input;
     }
-    closeOtherPanels() {
-        // Buscar todos os outros autocompletes na página e fechá-los
-        const allAutocompletes = document.querySelectorAll('matcha-autocomplete');
-        allAutocompletes.forEach(autocompleteEl => {
-            if (autocompleteEl !== this.elRef.nativeElement) {
-                // Disparar evento para fechar outros painéis
-                const closeEvent = new CustomEvent('matcha-autocomplete-close', {
-                    bubbles: true
-                });
-                autocompleteEl.dispatchEvent(closeEvent);
-            }
-        });
-    }
     notifyDirectiveOfSelection(data) {
         // Disparar evento customizado para notificar a diretiva sobre a seleção
         const selectionEvent = new CustomEvent('matcha-autocomplete-selection', {
@@ -8914,22 +8975,13 @@ class MatchaAutocompleteComponent {
             bubbles: true
         });
         this.elRef.nativeElement.dispatchEvent(selectionEvent);
-        console.log('MatchaAutocomplete: Evento de seleção disparado', data);
     }
     openPanel() {
         if (this.disabled)
             return;
         if (!this.triggerElement) {
-            console.log('MatchaAutocomplete: triggerElement não encontrado');
             return;
         }
-        console.log('MatchaAutocomplete: Abrindo painel', {
-            triggerElement: this.triggerElement,
-            panel: this.panel,
-            open: this.open
-        });
-        // Fechar outros painéis abertos antes de abrir este
-        this.closeOtherPanels();
         this.open = true;
         this.cdr.detectChanges(); // Força detecção de mudanças
         this.panel.attachTo(this.triggerElement);
@@ -8938,10 +8990,8 @@ class MatchaAutocompleteComponent {
         this.opened.emit();
     }
     closePanel() {
-        console.log('MatchaAutocomplete: Fechando painel', {
-            open: this.open,
-            stackTrace: new Error().stack
-        });
+        if (!this.open)
+            return;
         this.open = false;
         this.activeIndex = -1;
         this.updateSelectedStates();
@@ -8996,13 +9046,6 @@ class MatchaAutocompleteComponent {
     }
     // chamado por matcha-option quando clicado
     selectOption(option) {
-        console.log('MatchaAutocomplete: Opção selecionada', {
-            option,
-            value: option.value,
-            selected: option.selected,
-            optionsLength: this.options.length,
-            allOptions: this.options.toArray()
-        });
         // Armazenar o valor selecionado
         this.selectedValue = option.value;
         // Marcar a opção como selecionada diretamente
@@ -9013,12 +9056,6 @@ class MatchaAutocompleteComponent {
                 o.selected = false;
             }
         });
-        console.log('MatchaAutocomplete: Após marcar seleção', {
-            selectedOption: option,
-            selected: option.selected,
-            selectedValue: this.selectedValue,
-            allOptions: this.options.toArray().map(o => ({ value: o.value, selected: o.selected }))
-        });
         // Notificar a diretiva sobre a seleção antes de fechar o painel
         // Passar tanto o valor quanto o texto de exibição
         const displayText = this.getDisplayValue(option.value);
@@ -9027,7 +9064,6 @@ class MatchaAutocompleteComponent {
             displayText: displayText
         });
         // Fechamos painel automaticamente
-        console.log('MatchaAutocomplete: Fechando painel após seleção');
         this.closePanel();
         // Forçar detecção de mudanças para garantir que o painel seja fechado
         this.cdr.detectChanges();
@@ -9036,11 +9072,6 @@ class MatchaAutocompleteComponent {
     getSelectedValue() {
         // Usar o valor armazenado se disponível, senão buscar na QueryList
         const value = this.selectedValue !== undefined ? this.selectedValue : this.options.find(o => o.selected)?.value;
-        console.log('MatchaAutocomplete: getSelectedValue chamado', {
-            selectedValue: this.selectedValue,
-            value,
-            allOptions: this.options.toArray().map(o => ({ value: o.value, selected: o.selected }))
-        });
         return value;
     }
     hasSelection() {
@@ -9095,11 +9126,21 @@ class MatchaAutocompleteComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", disabled: "disabled", autoSelectOnBlur: "autoSelectOnBlur", displayWith: "displayWith", displayProperty: "displayProperty", showClearButton: "showClearButton", clearButtonIcon: "clearButtonIcon", clearButtonAriaLabel: "clearButtonAriaLabel" }, outputs: { opened: "opened", closed: "closed", cleared: "cleared", autoSelected: "autoSelected" }, host: { properties: { "class.matcha-autocomplete-disabled": "this.hostDisabledClass", "attr.disabled": "this.hostDisabledAttr" } }, queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-autocomplete-container\">\n    <matcha-panel\n        #panel\n        [open]=\"open\"\n        [placement]=\"placement\"\n        [maxHeight]=\"maxHeight\"\n        [minWidth]=\"minWidth\"\n        [triggerElement]=\"triggerElement\"\n        (opened)=\"opened.emit()\"\n        (closed)=\"closed.emit()\">\n        <div class=\"matcha-panel-content flex-column\">\n            <ng-content></ng-content>\n        </div>\n    </matcha-panel>\n</div>\n", dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", disabled: "disabled", autoSelectOnBlur: "autoSelectOnBlur", displayWith: "displayWith", displayProperty: "displayProperty", showClearButton: "showClearButton", clearButtonIcon: "clearButtonIcon", clearButtonAriaLabel: "clearButtonAriaLabel" }, outputs: { opened: "opened", closed: "closed", cleared: "cleared", autoSelected: "autoSelected" }, host: { properties: { "class.matcha-autocomplete-disabled": "this.hostDisabledClass", "attr.disabled": "this.hostDisabledAttr" } }, providers: [
+            {
+                provide: MATCHA_OPTION_PARENT,
+                useExisting: forwardRef(() => MatchaAutocompleteComponent)
+            }
+        ], queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-autocomplete-container\">\n    <matcha-panel #panel [open]=\"open\" [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\"\n        [triggerElement]=\"triggerElement\" (opened)=\"opened.emit()\" (closed)=\"closePanel()\">\n        <div class=\"matcha-panel-content flex-column\">\n            <ng-content></ng-content>\n        </div>\n    </matcha-panel>\n</div>", dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open", "hasOverlay"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-autocomplete', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"matcha-autocomplete-container\">\n    <matcha-panel\n        #panel\n        [open]=\"open\"\n        [placement]=\"placement\"\n        [maxHeight]=\"maxHeight\"\n        [minWidth]=\"minWidth\"\n        [triggerElement]=\"triggerElement\"\n        (opened)=\"opened.emit()\"\n        (closed)=\"closed.emit()\">\n        <div class=\"matcha-panel-content flex-column\">\n            <ng-content></ng-content>\n        </div>\n    </matcha-panel>\n</div>\n" }]
+            args: [{ selector: 'matcha-autocomplete', encapsulation: ViewEncapsulation.None, standalone: false, providers: [
+                        {
+                            provide: MATCHA_OPTION_PARENT,
+                            useExisting: forwardRef(() => MatchaAutocompleteComponent)
+                        }
+                    ], template: "<div class=\"matcha-autocomplete-container\">\n    <matcha-panel #panel [open]=\"open\" [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\"\n        [triggerElement]=\"triggerElement\" (opened)=\"opened.emit()\" (closed)=\"closePanel()\">\n        <div class=\"matcha-panel-content flex-column\">\n            <ng-content></ng-content>\n        </div>\n    </matcha-panel>\n</div>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [MatchaOptionComponent, { descendants: true }]
@@ -9188,8 +9229,16 @@ class MatchaSelectComponent {
         this.isDisabledByForm = false;
     }
     ngAfterContentInit() {
+        // Se já tivermos um valor (ex: via writeValue antes do init), buscamos o label agora que os options estão prontos
+        if (this.selectedValue !== undefined && this.selectedValue !== null) {
+            this.updateLabelFromValue(this.selectedValue);
+        }
         // quando options mudarem, resetamos estado relevante
         this.options.changes.subscribe(() => {
+            // Se tivermos um valor selecionado, atualizamos o label (útil para carregamento assíncrono de opções)
+            if (this.selectedValue !== undefined && this.selectedValue !== null) {
+                this.updateLabelFromValue(this.selectedValue);
+            }
             if (this.open) {
                 this.resetActive();
                 this.cdr.detectChanges();
@@ -9211,20 +9260,6 @@ class MatchaSelectComponent {
             const { option, value } = event.detail;
             this.selectOption(option);
         });
-        // Escuta evento para fechar este painel quando outro for aberto
-        this.elRef.nativeElement.addEventListener('matcha-select-close', () => {
-            if (this.open) {
-                this.closePanel();
-            }
-        });
-        // Escuta click outside para fechar o painel
-        document.addEventListener('click', (event) => {
-            const target = event.target;
-            const isInsideSelect = this.elRef.nativeElement.contains(target);
-            if (!isInsideSelect && this.open) {
-                this.closePanel();
-            }
-        });
     }
     setupKeyboardNavigation() {
         if (!this.triggerElement)
@@ -9294,19 +9329,6 @@ class MatchaSelectComponent {
             this.closePanel();
         }
     }
-    closeOtherPanels() {
-        // Buscar todos os outros selects na página e fechá-los
-        const allSelects = document.querySelectorAll('matcha-select');
-        allSelects.forEach(selectEl => {
-            if (selectEl !== this.elRef.nativeElement) {
-                // Disparar evento para fechar outros painéis
-                const closeEvent = new CustomEvent('matcha-select-close', {
-                    bubbles: true
-                });
-                selectEl.dispatchEvent(closeEvent);
-            }
-        });
-    }
     notifyDirectiveOfSelection(value) {
         // Disparar evento customizado para notificar a diretiva sobre a seleção
         const selectionEvent = new CustomEvent('matcha-select-selection', {
@@ -9334,8 +9356,6 @@ class MatchaSelectComponent {
         if (!this.triggerElement) {
             return;
         }
-        // Fechar outros painéis abertos antes de abrir este
-        this.closeOtherPanels();
         this.open = true;
         this.cdr.detectChanges(); // Força detecção de mudanças
         this.panel.attachTo(this.triggerElement);
@@ -9346,6 +9366,8 @@ class MatchaSelectComponent {
         this.opened.emit();
     }
     closePanel() {
+        if (!this.open)
+            return;
         this.open = false;
         this.activeIndex = -1;
         this.updateSelectedStates();
@@ -9496,6 +9518,15 @@ class MatchaSelectComponent {
         // Retorna o label armazenado ou placeholder
         return this.selectedLabel || '';
     }
+    updateLabelFromValue(value) {
+        if (this.options) {
+            const selectedOption = this.options.find(o => o.value === value);
+            if (selectedOption) {
+                this.selectedLabel = selectedOption.getTextContent();
+                this.cdr.detectChanges();
+            }
+        }
+    }
     // Método para definir valor programaticamente
     setValue(value) {
         this.selectedValue = value;
@@ -9556,8 +9587,12 @@ class MatchaSelectComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaSelectComponent),
                 multi: true
+            },
+            {
+                provide: MATCHA_OPTION_PARENT,
+                useExisting: forwardRef(() => MatchaSelectComponent)
             }
-        ], queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"isCurrentlyDisabled\">\n  <div\n    class=\"matcha-select-trigger\"\n    [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"isCurrentlyDisabled\"\n    (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n    <span class=\"matcha-select-value\" [class.matcha-select-placeholder]=\"!selectedValue\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      <span class=\"i-matcha-action_arrow_down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel\n    #panel\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [open]=\"open\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"isCurrentlyDisabled\">\n  <div class=\"matcha-select-trigger\" [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\" [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n    <span class=\"matcha-select-value\"\n      [class.matcha-select-placeholder]=\"selectedValue === undefined || selectedValue === null || selectedValue === ''\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      <span class=\"i-matcha-action_arrow_down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n    (closed)=\"closePanel()\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>", styles: [""], dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open", "hasOverlay"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSelectComponent, decorators: [{
             type: Component,
@@ -9566,8 +9601,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MatchaSelectComponent),
                             multi: true
+                        },
+                        {
+                            provide: MATCHA_OPTION_PARENT,
+                            useExisting: forwardRef(() => MatchaSelectComponent)
                         }
-                    ], template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"isCurrentlyDisabled\">\n  <div\n    class=\"matcha-select-trigger\"\n    [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"isCurrentlyDisabled\"\n    (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n    <span class=\"matcha-select-value\" [class.matcha-select-placeholder]=\"!selectedValue\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      <span class=\"i-matcha-action_arrow_down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel\n    #panel\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [open]=\"open\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>\n" }]
+                    ], template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"isCurrentlyDisabled\">\n  <div class=\"matcha-select-trigger\" [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\" [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n    <span class=\"matcha-select-value\"\n      [class.matcha-select-placeholder]=\"selectedValue === undefined || selectedValue === null || selectedValue === ''\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      <span class=\"i-matcha-action_arrow_down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n    (closed)=\"closePanel()\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [MatchaOptionComponent, { descendants: true }]