matcha-components 20.159.0 → 20.161.0

package/fesm2022/matcha-components.mjs

@@ -372,6 +372,7 @@ class MatchaAccordionItemComponent {
         this._isOpen = false;
         this._clickableHeader = true;
         this.opened = new EventEmitter();
+        this.isOpenChange = new EventEmitter();
         this.toggleRequested = new EventEmitter();
     }
     set stretch(value) {
@@ -390,7 +391,12 @@ class MatchaAccordionItemComponent {
         return this._clickableHeader;
     }
     set isOpen(value) {
-        this._isOpen = value != null && `${value}` !== 'false';
+        const newValue = value != null && `${value}` !== 'false';
+        if (this._isOpen !== newValue) {
+            this._isOpen = newValue;
+            this.isOpenChange.emit(this._isOpen);
+            this.opened.emit(this._isOpen);
+        }
     }
     get isOpen() {
         return this._isOpen;
@@ -402,20 +408,19 @@ class MatchaAccordionItemComponent {
         this.opened.emit(this.isOpen);
     }
     ngOnChanges(changes) {
-        if (changes['isOpen']) {
-            this.opened.emit(this.isOpen);
-        }
+        // O setter já lida com a emissão de mudanças, 
+        // mas mantemos o gancho se necessário para outros inputs no futuro.
     }
     toggleAccordion() {
         // Emite evento para o accordion pai controlar o estado
         this.toggleRequested.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAccordionItemComponent, isStandalone: false, selector: "matcha-accordion-item", inputs: { stretch: "stretch", clickableHeader: "clickableHeader", isOpen: "isOpen" }, outputs: { opened: "opened", toggleRequested: "toggleRequested" }, host: { properties: { "class.stretch": "this.stretchClass", "class.is-open": "this.isOpenClass" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\"\n             [class.cursor-pointer]=\"clickableHeader\"\n             (click)=\"clickableHeader ? toggleAccordion() : null\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], animations: [...createAnimations] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAccordionItemComponent, isStandalone: false, selector: "matcha-accordion-item", inputs: { stretch: "stretch", clickableHeader: "clickableHeader", isOpen: "isOpen" }, outputs: { opened: "opened", isOpenChange: "isOpenChange", toggleRequested: "toggleRequested" }, host: { properties: { "class.stretch": "this.stretchClass", "class.is-open": "this.isOpenClass" } }, exportAs: ["matchaAccordionItem"], usesOnChanges: true, ngImport: i0, template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\"\n             [class.cursor-pointer]=\"clickableHeader\"\n             (click)=\"clickableHeader ? toggleAccordion() : null\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], animations: [...createAnimations] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-accordion-item', standalone: false, animations: [...createAnimations], template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\"\n             [class.cursor-pointer]=\"clickableHeader\"\n             (click)=\"clickableHeader ? toggleAccordion() : null\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'matcha-accordion-item', standalone: false, animations: [...createAnimations], exportAs: 'matchaAccordionItem', template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\"\n             [class.cursor-pointer]=\"clickableHeader\"\n             (click)=\"clickableHeader ? toggleAccordion() : null\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
         }], propDecorators: { stretch: [{
                 type: Input
             }], stretchClass: [{
@@ -430,6 +435,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['class.is-open']
             }], opened: [{
                 type: Output
+            }], isOpenChange: [{
+                type: Output
             }], toggleRequested: [{
                 type: Output
             }] } });
@@ -8562,7 +8569,7 @@ class MatchaOptionComponent {
         return this.elRef.nativeElement.textContent?.trim() || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOptionComponent, deps: [{ token: MATCHA_OPTION_PARENT, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaOptionComponent, isStandalone: false, selector: "matcha-option", inputs: { value: "value", disabled: "disabled" }, outputs: { optionClick: "optionClick", optionSelect: "optionSelect" }, host: { attributes: { "role": "option", "tabindex": "0" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.disabled": "this.disabledAttr", "class.matcha-disabled": "this.disabledClass", "attr.aria-selected": "this.selected" }, classAttribute: "matcha-option" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaOptionComponent, isStandalone: false, selector: "matcha-option", inputs: { value: "value", disabled: "disabled" }, outputs: { optionClick: "optionClick", optionSelect: "optionSelect" }, host: { attributes: { "role": "option", "tabindex": "0" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.disabled": "this.disabledAttr", "class.matcha-option-disabled": "this.disabledClass", "attr.aria-selected": "this.selected" }, classAttribute: "matcha-option" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOptionComponent, decorators: [{
             type: Component,
@@ -8590,7 +8597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['attr.disabled']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.matcha-disabled']
+                args: ['class.matcha-option-disabled']
             }], selected: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']
@@ -12209,24 +12216,14 @@ class MatchaAutocompleteTriggerDirective {
             const target = ev.target;
             const isInsideInput = this.el.nativeElement.contains(target) || this.el.nativeElement === target;
             const isInsidePanel = this.panel?.elRef?.nativeElement?.contains?.(target);
-            console.log('MatchaAutocomplete: Click outside check', {
-                target: target,
-                inputElement: this.el.nativeElement,
-                isInsideInput,
-                isInsidePanel,
-                shouldClose: !isInsideInput && !isInsidePanel,
-                panelOpen: this.panel?.open
-            });
             // Só fechar se o painel estiver aberto e clicou fora
             return this.panel?.open && !isInsideInput && !isInsidePanel;
         })).subscribe(() => {
-            console.log('MatchaAutocomplete: Fechando painel por click outside');
             this.panel.closePanel();
         });
         this.subs.add(clickSub);
         // Escutar evento de seleção do autocomplete
         const selectionSub = fromEvent(this.panel.elRef.nativeElement, 'matcha-autocomplete-selection').subscribe((event) => {
-            console.log('MatchaAutocomplete: Evento de seleção recebido na diretiva', event.detail);
             const { value, displayText } = event.detail;
             if (value !== undefined) {
                 // Usar displayText se fornecido, senão usar o valor diretamente
@@ -12237,7 +12234,6 @@ class MatchaAutocompleteTriggerDirective {
         this.subs.add(selectionSub);
         // Escutar evento de limpeza
         const clearSub = fromEvent(this.panel.elRef.nativeElement, 'matcha-autocomplete-clear').subscribe(() => {
-            console.log('MatchaAutocomplete: Evento de limpeza recebido na diretiva');
             this.clearInput();
         });
         this.subs.add(clearSub);
@@ -12268,11 +12264,9 @@ class MatchaAutocompleteTriggerDirective {
         // Observar mudanças no FormControl para sincronizar o input com displayWith
         if (this.ngControl && this.ngControl.control) {
             const controlValueSub = this.ngControl.control.valueChanges.subscribe((value) => {
-                console.log('MatchaAutocomplete: FormControl valor mudou', value);
                 // Se o valor é um objeto, usar displayWith para exibir no input
                 if (value && typeof value === 'object') {
                     const displayText = this.panel.getDisplayValue(value);
-                    console.log('MatchaAutocomplete: Atualizando input com displayWith', { value, displayText });
                     // Atualizar apenas o input visual, sem disparar eventos do FormControl
                     const input = this.el.nativeElement;
                     if (input.value !== displayText) {
@@ -12297,18 +12291,11 @@ class MatchaAutocompleteTriggerDirective {
         }
     }
     writeValueToInput(displayText, actualValue) {
-        console.log('MatchaAutocomplete: writeValueToInput chamado', {
-            displayText,
-            actualValue,
-            input: this.el.nativeElement,
-            hasNgControl: !!this.ngControl
-        });
         const input = this.el.nativeElement;
         // Se há ngControl e actualValue é um objeto (não string), atualizar FormControl diretamente
         if (this.ngControl && this.ngControl.control && actualValue !== undefined) {
             // Se actualValue é um objeto, atualizar o FormControl com o objeto completo
             if (typeof actualValue === 'object' && actualValue !== null) {
-                console.log('MatchaAutocomplete: Atualizando FormControl com objeto', actualValue);
                 // Usar setValue com emitEvent: false para evitar loop infinito, depois emitir manualmente
                 this.ngControl.control.setValue(actualValue, { emitEvent: false });
                 // Atualizar o input visual com o displayText
@@ -12339,17 +12326,12 @@ class MatchaAutocompleteTriggerDirective {
         setTimeout(() => {
             this.updateClearButtonVisibility();
         }, 0);
-        console.log('MatchaAutocomplete: Valor escrito no input', {
-            inputValue: input.value,
-            formControlValue: this.ngControl?.control?.value
-        });
     }
     clearInput() {
         const input = this.el.nativeElement;
         input.value = '';
         // Se há ngControl, limpar o FormControl diretamente
         if (this.ngControl && this.ngControl.control) {
-            console.log('MatchaAutocomplete: Limpando FormControl');
             this.ngControl.control.setValue(null, { emitEvent: true });
         }
         else {
@@ -12363,9 +12345,6 @@ class MatchaAutocompleteTriggerDirective {
         }
         // Atualizar visibilidade do botão
         this.updateClearButtonVisibility();
-        console.log('MatchaAutocomplete: Input limpo', {
-            formControlValue: this.ngControl?.control?.value
-        });
     }
     onClick() {
         // Abrir painel quando clicar no input
@@ -12403,7 +12382,6 @@ class MatchaAutocompleteTriggerDirective {
             const exactMatch = this.panel.findOptionByText(currentValue);
             if (exactMatch) {
                 // Match exato encontrado - selecionar automaticamente
-                console.log('MatchaAutocomplete: Match exato encontrado no blur, selecionando automaticamente');
                 this.panel.selectOption(exactMatch);
                 // Emitir evento de auto-seleção
                 this.panel.autoSelected.emit(exactMatch.value);
@@ -12412,14 +12390,12 @@ class MatchaAutocompleteTriggerDirective {
             }
             else {
                 // Nenhum match exato - limpar o campo
-                console.log('MatchaAutocomplete: Nenhum match exato encontrado no blur, limpando campo');
                 this.panel.clearSelection();
             }
         }
         else if (currentValue === '' || !currentValue) {
             // Campo vazio - limpar seleção se houver
             if (this.panel.hasSelection()) {
-                console.log('MatchaAutocomplete: Campo vazio no blur, limpando seleção');
                 this.panel.clearSelection();
             }
         }