matcha-components 20.5.0 → 20.12.0

package/fesm2022/matcha-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, Renderer2, HostBinding, Inject, HostListener, ContentChild, Directive, forwardRef, ChangeDetectionStrategy, TemplateRef, ViewChild, Injectable, Optional, ViewEncapsulation, NgModule, createComponent } from '@angular/core';
+import { EventEmitter, Output, HostBinding, Input, Component, ContentChildren, ElementRef, Renderer2, Inject, ViewChild, ContentChild, HostListener, Directive, forwardRef, ChangeDetectionStrategy, TemplateRef, Injectable, Optional, ViewEncapsulation, NgModule, createComponent } from '@angular/core';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
 import { Subscription, Subject, BehaviorSubject, fromEvent } from 'rxjs';
 import { debounceTime, filter } from 'rxjs/operators';
@@ -7,6 +7,12 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormControlName, NG_VALUE_ACCESSOR, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
+/**
+ * Token de injeção para MatchaOptionParent
+ * Usado para injetar o componente pai no matcha-option
+ */
+const MATCHA_OPTION_PARENT = Symbol('MatchaOptionParent');
+
 const customAnimation = animation([
     style({
         opacity: '{{opacity}}',
@@ -362,7 +368,9 @@ class MatchaAccordionItemComponent {
     constructor() {
         this._stretch = false;
         this._isOpen = false;
+        this._clickableHeader = true;
         this.opened = new EventEmitter();
+        this.toggleRequested = new EventEmitter();
     }
     set stretch(value) {
         this._stretch = value != null && `${value}` !== 'false';
@@ -370,37 +378,65 @@ class MatchaAccordionItemComponent {
     get stretch() {
         return this._stretch;
     }
+    get stretchClass() {
+        return this._stretch;
+    }
+    set clickableHeader(value) {
+        this._clickableHeader = value != null && `${value}` !== 'false';
+    }
+    get clickableHeader() {
+        return this._clickableHeader;
+    }
     set isOpen(value) {
         this._isOpen = value != null && `${value}` !== 'false';
     }
     get isOpen() {
         return this._isOpen;
     }
+    get isOpenClass() {
+        return this._isOpen;
+    }
     ngOnInit() {
         this.opened.emit(this.isOpen);
     }
+    ngOnChanges(changes) {
+        if (changes['isOpen']) {
+            this.opened.emit(this.isOpen);
+        }
+    }
     toggleAccordion() {
-        this.isOpen = !this.isOpen;
-        this.opened.emit(this.isOpen);
+        // Emite evento para o accordion pai controlar o estado
+        this.toggleRequested.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaAccordionItemComponent, isStandalone: false, selector: "matcha-accordion-item", inputs: { stretch: "stretch", isOpen: "isOpen" }, outputs: { opened: "opened" }, 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\" (click)=\"toggleAccordion()\">\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.2.1", 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] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", 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\" (click)=\"toggleAccordion()\">\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], 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: [{
+                type: HostBinding,
+                args: ['class.stretch']
+            }], clickableHeader: [{
+                type: Input
             }], isOpen: [{
                 type: Input
+            }], isOpenClass: [{
+                type: HostBinding,
+                args: ['class.is-open']
             }], opened: [{
                 type: Output
+            }], toggleRequested: [{
+                type: Output
             }] } });
 
 class MatchaAccordionComponent {
     constructor() {
         this._multiple = false;
         this.openedChange = new EventEmitter();
+        this.subscriptions = [];
     }
     set multiple(value) {
         // Converte 'false' (string) ou false (boolean) para false, e qualquer outro valor para true.
@@ -410,15 +446,34 @@ class MatchaAccordionComponent {
         return this._multiple;
     }
     ngAfterContentInit() {
+        this.setupItems();
+        // Escuta mudanças na lista de itens (para casos dinâmicos)
+        this.items.changes.subscribe(() => {
+            this.setupItems();
+        });
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+    }
+    setupItems() {
+        // Limpa subscriptions anteriores
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subscriptions = [];
         this.items.forEach(item => {
-            item.opened.subscribe((isOpen) => {
+            const toggleSub = item.toggleRequested.subscribe(() => {
                 this.toggleItem(item);
+            });
+            this.subscriptions.push(toggleSub);
+            const openedSub = item.opened.subscribe((isOpen) => {
                 this.openedChange.emit(isOpen);
             });
+            this.subscriptions.push(openedSub);
         });
     }
     toggleItem(selectedItem) {
-        // Se não permite múltiplos itens abertos e o item selecionado foi aberto, fecha os demais.
+        // Toggle o item selecionado
+        selectedItem.isOpen = !selectedItem.isOpen;
+        // Se não permite múltiplos itens abertos e o item foi aberto, fecha os demais
         if (!this.multiple && selectedItem.isOpen) {
             this.items.forEach(item => {
                 if (item !== selectedItem) {
@@ -1043,8 +1098,14 @@ class MatchaCardComponent {
     }
     get alpha() { return this._alpha; }
     set alpha(v) { this._alpha = v === 'false' ? false : !!v; }
+    get alphaAttr() {
+        return this.alpha ? 'true' : 'false';
+    }
     get tint() { return this._tint; }
     set tint(v) { this._tint = v === 'false' ? false : !!v; }
+    get tintAttr() {
+        return this.tint ? 'true' : 'false';
+    }
     get loading() { return this._loading; }
     set loading(v) { this._loading = v === 'false' ? false : !!v; }
     get classes() {
@@ -1078,7 +1139,7 @@ class MatchaCardComponent {
         return this.blockquote === 'left' || this.blockquote === 'right';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaCardComponent, isStandalone: false, selector: "matcha-card", inputs: { color: "color", blockquote: "blockquote", blockquoteColor: "blockquoteColor", class: "class", alpha: "alpha", tint: "tint", loading: "loading" }, host: { properties: { "attr.color": "this.colorAttr", "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaCardComponent, isStandalone: false, selector: "matcha-card", inputs: { color: "color", blockquote: "blockquote", blockquoteColor: "blockquoteColor", class: "class", alpha: "alpha", tint: "tint", loading: "loading" }, host: { properties: { "attr.color": "this.colorAttr", "attr.alpha": "this.alphaAttr", "attr.tint": "this.tintAttr", "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaCardComponent, decorators: [{
             type: Component,
@@ -1096,8 +1157,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Input
             }], alpha: [{
                 type: Input
+            }], alphaAttr: [{
+                type: HostBinding,
+                args: ['attr.alpha']
             }], tint: [{
                 type: Input
+            }], tintAttr: [{
+                type: HostBinding,
+                args: ['attr.tint']
             }], loading: [{
                 type: Input
             }], classes: [{
@@ -1238,70 +1305,159 @@ class MatchaDrawerComponent {
         return `matcha-drawer matcha-drawer-${this.mode} matcha-drawer-${this.position} ${this.isOpen ? 'matcha-drawer-open' : 'matcha-drawer-closed'}`;
     }
     get drawerWidth() {
-        return this.isOpen && this.mode === 'push' ? this.width : '0px';
+        if (this.mode === 'overlay') {
+            // Modo overlay: sempre 0px para não empurrar o conteúdo
+            return '0px';
+        }
+        // Modo push: ocupa espaço apenas quando aberto
+        return this.isOpen ? this.width : '0px';
+    }
+    get drawerHeight() {
+        return '100vh';
     }
-    constructor(elementRef, renderer) {
+    constructor(elementRef, renderer, cdr) {
         this.elementRef = elementRef;
         this.renderer = renderer;
+        this.cdr = cdr;
         this.isOpen = false;
-        this.mode = 'push'; // push empurra o conteúdo, overlay sobrepõe
+        this.mode = 'push';
         this.position = 'left';
-        this.width = '280px';
+        this.width = '300px';
+        this.hasBackdrop = true;
+        this.disableClose = false;
+        this.autoCloseOnMobile = true;
+        this.breakpoint = 1024;
+        this.elevation = 8;
+        this.hasFooter = false;
         this.isOpenChange = new EventEmitter();
-        this.openChange = new EventEmitter();
+        this.drawerToggle = new EventEmitter();
+        this.drawerOpened = new EventEmitter();
+        this.drawerClosed = new EventEmitter();
+        this.isMobile = false;
+        this.bodyScrollLocked = false;
+        this.setupResizeObserver();
     }
     ngOnInit() {
-        this.renderer.addClass(this.elementRef.nativeElement, 'matcha-drawer');
-        // Configurar classes utilitárias baseadas no modo
-        if (this.mode === 'overlay') {
-            this.renderer.addClass(this.elementRef.nativeElement, 'position-fixed');
-            this.renderer.addClass(this.elementRef.nativeElement, 'place-top');
-            this.renderer.addClass(this.elementRef.nativeElement, 'z-index-11'); // Aumentado para ficar acima do backdrop
-            this.renderer.setStyle(this.elementRef.nativeElement, 'height', '100vh');
+        this.checkScreenSize();
+        this.setupBodyScrollLock();
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
         }
-        else {
-            this.renderer.addClass(this.elementRef.nativeElement, 'position-relative');
+        this.unlockBodyScroll();
+    }
+    setupResizeObserver() {
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.checkScreenSize();
+            });
+            if (this.elementRef.nativeElement.parentElement) {
+                this.resizeObserver.observe(this.elementRef.nativeElement.parentElement);
+            }
         }
-        // Configurar posição left/right
-        if (this.position === 'left') {
-            this.renderer.addClass(this.elementRef.nativeElement, 'place-left');
+    }
+    checkScreenSize() {
+        const wasMobile = this.isMobile;
+        this.isMobile = window.innerWidth < this.breakpoint;
+        if (wasMobile !== this.isMobile) {
+            this.cdr.detectChanges();
+            if (!this.isMobile && this.autoCloseOnMobile && this.isOpen) {
+                this.close();
+            }
         }
-        else {
-            this.renderer.setStyle(this.elementRef.nativeElement, 'right', '0');
+    }
+    setupBodyScrollLock() {
+        if (this.mode === 'overlay' && this.isOpen) {
+            this.lockBodyScroll();
         }
     }
-    ngOnDestroy() {
-        // Cleanup se necessário
+    lockBodyScroll() {
+        if (!this.bodyScrollLocked) {
+            document.body.style.overflow = 'hidden';
+            this.bodyScrollLocked = true;
+        }
+    }
+    unlockBodyScroll() {
+        if (this.bodyScrollLocked) {
+            document.body.style.overflow = '';
+            this.bodyScrollLocked = false;
+        }
     }
     toggle() {
+        if (this.disableClose && this.isOpen) {
+            return;
+        }
         this.isOpen = !this.isOpen;
         this.isOpenChange.emit(this.isOpen);
-        this.openChange.emit(this.isOpen);
+        this.drawerToggle.emit();
+        if (this.isOpen) {
+            this.drawerOpened.emit();
+            if (this.mode === 'overlay') {
+                this.lockBodyScroll();
+            }
+        }
+        else {
+            this.drawerClosed.emit();
+            this.unlockBodyScroll();
+        }
+        if (this.isMobile && this.autoCloseOnMobile && this.isOpen) {
+            setTimeout(() => this.close(), 300);
+        }
     }
     open() {
-        if (!this.isOpen) {
+        if (!this.isOpen && !this.disableClose) {
             this.isOpen = true;
             this.isOpenChange.emit(this.isOpen);
-            this.openChange.emit(this.isOpen);
+            this.drawerToggle.emit();
+            this.drawerOpened.emit();
+            if (this.mode === 'overlay') {
+                this.lockBodyScroll();
+            }
         }
     }
     close() {
-        if (this.isOpen) {
+        if (this.isOpen && !this.disableClose) {
             this.isOpen = false;
             this.isOpenChange.emit(this.isOpen);
-            this.openChange.emit(this.isOpen);
+            this.drawerToggle.emit();
+            this.drawerClosed.emit();
+            this.unlockBodyScroll();
+        }
+    }
+    onBackdropClick() {
+        if (this.hasBackdrop && this.mode === 'overlay' && !this.disableClose) {
+            this.close();
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === 'Escape' && this.isOpen && !this.disableClose) {
+            this.close();
+        }
+    }
+    getDrawerTransform() {
+        // Centralização em telas grandes
+        if (window.innerWidth >= 1920) {
+            return `translateX(calc(50vw - 960px))`;
         }
+        return 'none';
     }
     get animationState() {
-        return this.isOpen ? this.position : 'void';
+        return this.isOpen ? 'open' : 'closed';
+    }
+    get isOverlayMode() {
+        return this.mode === 'overlay';
+    }
+    get isPushMode() {
+        return this.mode === 'push';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaDrawerComponent, isStandalone: false, selector: "matcha-drawer", inputs: { isOpen: "isOpen", mode: "mode", position: "position", width: "width" }, outputs: { isOpenChange: "isOpenChange", openChange: "openChange" }, host: { properties: { "class": "this.drawerClasses", "style.width": "this.drawerWidth" } }, ngImport: i0, template: "<!-- Backdrop para modo overlay (renderizado primeiro para ficar atr\u00E1s) -->\n<div *ngIf=\"mode === 'overlay' && isOpen\"\n     class=\"matcha-drawer-backdrop position-fixed place-top place-left z-index-9 w-100-p h-100-p\"\n     [@fadeInOut]=\"isOpen ? '1' : '0'\"\n     (click)=\"close()\">\n</div>\n\n<!-- Drawer Content Container -->\n<div class=\"matcha-drawer-container\"\n     [@slideIn]=\"animationState\"\n     [class.matcha-drawer-overlay-mode]=\"mode === 'overlay'\"\n     [class.matcha-drawer-push-mode]=\"mode === 'push'\"\n     [style.width]=\"width\">\n\n  <!-- Drawer Header (opcional) -->\n  <div class=\"matcha-drawer-header\" *ngIf=\"isOpen\">\n    <ng-content select=\"[slot=header]\"></ng-content>\n\n    <!-- Close button quando em modo overlay -->\n    <button *ngIf=\"mode === 'overlay'\"\n            matcha-button\n            icon\n            size=\"small\"\n            basic\n            (click)=\"close()\"\n            class=\"matcha-drawer-close-btn place-right\">\n      <span class=\"i-matcha-close\"></span>\n    </button>\n  </div>\n\n  <!-- Drawer Content -->\n  <div class=\"matcha-drawer-content\" *ngIf=\"isOpen\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Drawer Footer (opcional) -->\n  <div class=\"matcha-drawer-footer\" *ngIf=\"isOpen\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;transition:width .3s cubic-bezier(.4,0,.2,1)}.matcha-drawer-container{height:100%;transition:transform .3s cubic-bezier(.4,0,.2,1)}.matcha-drawer-push-mode{background-color:var(--color-background);border-right:1px solid var(--color-divider)}.matcha-drawer-overlay-mode{background-color:var(--color-card);box-shadow:var(--elevation-4);border-radius:0 8px 8px 0;position:relative;z-index:11}.matcha-drawer-header{padding:16px;border-bottom:1px solid var(--color-divider);position:relative;z-index:1}.matcha-drawer-close-btn{position:absolute;top:8px;right:8px}.matcha-drawer-content{padding:16px;overflow-y:auto;max-height:calc(100vh - 100px);position:relative;z-index:1}.matcha-drawer-footer{padding:16px;border-top:1px solid var(--color-divider);margin-top:auto;position:relative;z-index:1}.matcha-drawer-backdrop{background-color:#00000052;cursor:pointer}:host(.matcha-drawer-right) .matcha-drawer-overlay-mode{border-radius:8px 0 0 8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "color", "basic", "outline", "alpha", "pill", "link", "icon"] }], animations: createAnimations }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerComponent, 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.2.1", type: MatchaDrawerComponent, isStandalone: false, selector: "matcha-drawer", inputs: { isOpen: "isOpen", mode: "mode", position: "position", width: "width", hasBackdrop: "hasBackdrop", disableClose: "disableClose", autoCloseOnMobile: "autoCloseOnMobile", breakpoint: "breakpoint", elevation: "elevation", hasFooter: "hasFooter" }, outputs: { isOpenChange: "isOpenChange", drawerToggle: "drawerToggle", drawerOpened: "drawerOpened", drawerClosed: "drawerClosed" }, host: { properties: { "class": "this.drawerClasses", "style.width": "this.drawerWidth", "style.height": "this.drawerHeight" } }, viewQueries: [{ propertyName: "drawerContent", first: true, predicate: ["drawerContent"], descendants: true }], ngImport: i0, template: "<!-- Backdrop para modo overlay -->\n<div *ngIf=\"isOverlayMode && isOpen && hasBackdrop\"\n     class=\"matcha-backdrop\"\n     [@fadeInOut]=\"isOpen ? '1' : '0'\"\n     (click)=\"onBackdropClick()\">\n</div>\n\n<!-- Drawer Container Principal -->\n<div *ngIf=\"(isOpen && mode === 'overlay') || mode === 'push'\"\n     class=\"matcha-drawer-container\"\n     [class.matcha-drawer-overlay-mode]=\"isOverlayMode\"\n     [class.matcha-drawer-push-mode]=\"isPushMode\"\n     [class.matcha-drawer-left]=\"position === 'left'\"\n     [class.matcha-drawer-right]=\"position === 'right'\"\n     [@slideInLeft]=\"animationState\"\n     [style.transform]=\"getDrawerTransform()\"\n     [style.width]=\"drawerWidth\"\n     [style.overflow]=\"isOpen ? 'visible' : 'hidden'\"\n     (keydown)=\"onKeyDown($event)\"\n     tabindex=\"0\">\n\n  <!-- Drawer Content -->\n  <div class=\"matcha-drawer-content\"\n       [style.min-width]=\"width\">\n\n    <!-- Header do drawer -->\n    <div class=\"matcha-drawer-header\">\n      <ng-content select=\"[drawer-header]\"></ng-content>\n\n    </div>\n\n    <!-- Conte\u00FAdo principal do drawer -->\n    <div class=\"matcha-drawer-main-content\">\n      <ng-content select=\"[drawer-content]\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer do drawer -->\n    <div *ngIf=\"hasFooter\" class=\"matcha-drawer-footer\">\n      <ng-content select=\"[drawer-footer]\"></ng-content>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: createAnimations }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-drawer', animations: createAnimations, standalone: false, template: "<!-- Backdrop para modo overlay (renderizado primeiro para ficar atr\u00E1s) -->\n<div *ngIf=\"mode === 'overlay' && isOpen\"\n     class=\"matcha-drawer-backdrop position-fixed place-top place-left z-index-9 w-100-p h-100-p\"\n     [@fadeInOut]=\"isOpen ? '1' : '0'\"\n     (click)=\"close()\">\n</div>\n\n<!-- Drawer Content Container -->\n<div class=\"matcha-drawer-container\"\n     [@slideIn]=\"animationState\"\n     [class.matcha-drawer-overlay-mode]=\"mode === 'overlay'\"\n     [class.matcha-drawer-push-mode]=\"mode === 'push'\"\n     [style.width]=\"width\">\n\n  <!-- Drawer Header (opcional) -->\n  <div class=\"matcha-drawer-header\" *ngIf=\"isOpen\">\n    <ng-content select=\"[slot=header]\"></ng-content>\n\n    <!-- Close button quando em modo overlay -->\n    <button *ngIf=\"mode === 'overlay'\"\n            matcha-button\n            icon\n            size=\"small\"\n            basic\n            (click)=\"close()\"\n            class=\"matcha-drawer-close-btn place-right\">\n      <span class=\"i-matcha-close\"></span>\n    </button>\n  </div>\n\n  <!-- Drawer Content -->\n  <div class=\"matcha-drawer-content\" *ngIf=\"isOpen\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Drawer Footer (opcional) -->\n  <div class=\"matcha-drawer-footer\" *ngIf=\"isOpen\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;transition:width .3s cubic-bezier(.4,0,.2,1)}.matcha-drawer-container{height:100%;transition:transform .3s cubic-bezier(.4,0,.2,1)}.matcha-drawer-push-mode{background-color:var(--color-background);border-right:1px solid var(--color-divider)}.matcha-drawer-overlay-mode{background-color:var(--color-card);box-shadow:var(--elevation-4);border-radius:0 8px 8px 0;position:relative;z-index:11}.matcha-drawer-header{padding:16px;border-bottom:1px solid var(--color-divider);position:relative;z-index:1}.matcha-drawer-close-btn{position:absolute;top:8px;right:8px}.matcha-drawer-content{padding:16px;overflow-y:auto;max-height:calc(100vh - 100px);position:relative;z-index:1}.matcha-drawer-footer{padding:16px;border-top:1px solid var(--color-divider);margin-top:auto;position:relative;z-index:1}.matcha-drawer-backdrop{background-color:#00000052;cursor:pointer}:host(.matcha-drawer-right) .matcha-drawer-overlay-mode{border-radius:8px 0 0 8px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { isOpen: [{
+            args: [{ selector: 'matcha-drawer', animations: createAnimations, standalone: false, template: "<!-- Backdrop para modo overlay -->\n<div *ngIf=\"isOverlayMode && isOpen && hasBackdrop\"\n     class=\"matcha-backdrop\"\n     [@fadeInOut]=\"isOpen ? '1' : '0'\"\n     (click)=\"onBackdropClick()\">\n</div>\n\n<!-- Drawer Container Principal -->\n<div *ngIf=\"(isOpen && mode === 'overlay') || mode === 'push'\"\n     class=\"matcha-drawer-container\"\n     [class.matcha-drawer-overlay-mode]=\"isOverlayMode\"\n     [class.matcha-drawer-push-mode]=\"isPushMode\"\n     [class.matcha-drawer-left]=\"position === 'left'\"\n     [class.matcha-drawer-right]=\"position === 'right'\"\n     [@slideInLeft]=\"animationState\"\n     [style.transform]=\"getDrawerTransform()\"\n     [style.width]=\"drawerWidth\"\n     [style.overflow]=\"isOpen ? 'visible' : 'hidden'\"\n     (keydown)=\"onKeyDown($event)\"\n     tabindex=\"0\">\n\n  <!-- Drawer Content -->\n  <div class=\"matcha-drawer-content\"\n       [style.min-width]=\"width\">\n\n    <!-- Header do drawer -->\n    <div class=\"matcha-drawer-header\">\n      <ng-content select=\"[drawer-header]\"></ng-content>\n\n    </div>\n\n    <!-- Conte\u00FAdo principal do drawer -->\n    <div class=\"matcha-drawer-main-content\">\n      <ng-content select=\"[drawer-content]\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer do drawer -->\n    <div *ngIf=\"hasFooter\" class=\"matcha-drawer-footer\">\n      <ng-content select=\"[drawer-footer]\"></ng-content>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { isOpen: [{
                 type: Input
             }], mode: [{
                 type: Input
@@ -1309,16 +1465,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Input
             }], width: [{
                 type: Input
+            }], hasBackdrop: [{
+                type: Input
+            }], disableClose: [{
+                type: Input
+            }], autoCloseOnMobile: [{
+                type: Input
+            }], breakpoint: [{
+                type: Input
+            }], elevation: [{
+                type: Input
+            }], hasFooter: [{
+                type: Input
             }], isOpenChange: [{
                 type: Output
-            }], openChange: [{
+            }], drawerToggle: [{
+                type: Output
+            }], drawerOpened: [{
+                type: Output
+            }], drawerClosed: [{
                 type: Output
+            }], drawerContent: [{
+                type: ViewChild,
+                args: ['drawerContent', { static: false }]
             }], drawerClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], drawerWidth: [{
                 type: HostBinding,
                 args: ['style.width']
+            }], drawerHeight: [{
+                type: HostBinding,
+                args: ['style.height']
+            }] } });
+
+class MatchaDrawerContainerComponent {
+    constructor() {
+        this.hasBackdrop = true;
+        this.autoFocus = true;
+    }
+    ngOnInit() {
+        if (this.drawer) {
+            this.setupDrawerEvents();
+        }
+    }
+    ngOnDestroy() {
+        // Cleanup se necessário
+    }
+    setupDrawerEvents() {
+        if (this.drawer) {
+            this.drawer.drawerOpened.subscribe(() => {
+                if (this.autoFocus) {
+                    setTimeout(() => {
+                        // Focus será gerenciado pelo próprio drawer component
+                    }, 100);
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaDrawerContainerComponent, isStandalone: false, selector: "matcha-drawer-container", inputs: { hasBackdrop: "hasBackdrop", autoFocus: "autoFocus" }, queries: [{ propertyName: "drawer", first: true, predicate: MatchaDrawerComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-drawer-container-wrapper\">\n    <ng-content></ng-content>\n</div>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-drawer-container', standalone: false, template: "<div class=\"matcha-drawer-container-wrapper\">\n    <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { hasBackdrop: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], drawer: [{
+                type: ContentChild,
+                args: [MatchaDrawerComponent]
+            }] } });
+
+class MatchaDrawerContentComponent {
+    constructor() {
+        this.padding = '24px';
+        this.scrollable = true;
+        this.maxHeight = 'auto';
+    }
+    get contentClasses() {
+        return `matcha-drawer-content ${this.scrollable ? 'scrollable' : 'no-scroll'}`;
+    }
+    get maxHeightStyle() {
+        return this.maxHeight;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaDrawerContentComponent, isStandalone: false, selector: "matcha-drawer-content", inputs: { padding: "padding", scrollable: "scrollable", maxHeight: "maxHeight" }, host: { properties: { "class": "this.contentClasses", "style.max-height": "this.maxHeightStyle" } }, ngImport: i0, template: `
+    <div class="matcha-drawer-content-wrapper">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'matcha-drawer-content',
+                    template: `
+    <div class="matcha-drawer-content-wrapper">
+      <ng-content></ng-content>
+    </div>
+  `,
+                    standalone: false
+                }]
+        }], propDecorators: { padding: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], contentClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], maxHeightStyle: [{
+                type: HostBinding,
+                args: ['style.max-height']
             }] } });
 
 class MatchaIconComponent {
@@ -1737,9 +1998,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
 
 class MatchaToolbarComponent {
     constructor() {
+        this.elevation = 1;
         this.isMobileScreen = false;
         this.mobileBreakpoint = 1024;
     }
+    get elevationClass() {
+        return `elevation-z-${this.elevation}`;
+    }
     ngOnInit() {
         this.checkScreenWidth();
     }
@@ -1756,12 +2021,14 @@ class MatchaToolbarComponent {
         clearTimeout(this.resizeTimeout);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaToolbarComponent, isStandalone: false, selector: "matcha-toolbar", host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar>\n    <matcha-title type=\"icon\" icon=\"settings-out\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n        {{'FINANCIAL.CATEGORY.TITLE' | translate}}\n    </matcha-title>\n    <search-form toolbar-form-field (searchText)=\"searchText($event)\"></search-form>\n    <matcha-toolbar-button icon=\"home-out\" (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-button>\n    <matcha-toolbar-content>\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-content>\n    <matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-main-button>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</matcha-toolbar>\n-->\n<ng-template #toolbarMainButton>\n    <ng-content select=\"matcha-toolbar-main-button\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarCustomButton>\n    <ng-content select=\"matcha-toolbar-custom-button\"></ng-content>\n</ng-template>\n<!-- CONTENT HEADER -->\n<div class=\"flex-column background-surface radius-8 matcha-elevation-z1\">\n    <div class=\"flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-40 flex-wrap\">\n        <div class=\"w-100-p--force w-md-auto--force flex-space-between flex-wrap\">\n            <div class=\"min-h-32 flex-center-center\">\n                <ng-content select=\"matcha-title\"></ng-content>\n            </div>\n            <ng-container *ngIf=\"isMobileScreen\">\n                <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n            </ng-container>\n        </div>\n        <div class=\"w-100-p--force w-md-auto--force flex-row flex-end gap-8\">\n            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <ng-content select=\"search-form\"></ng-content>\n            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <div class=\"flex-row gap-8\">\n                <ng-content select=\"matcha-toolbar-button\"></ng-content>\n                <ng-content select=\"matcha-toolbar-content\"></ng-content>\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!isMobileScreen\">\n                    <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- / CONTENT HEADER -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaToolbarComponent, isStandalone: false, selector: "matcha-toolbar", inputs: { elevation: "elevation" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar>\n    <matcha-title type=\"icon\" icon=\"settings-out\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n        {{'FINANCIAL.CATEGORY.TITLE' | translate}}\n    </matcha-title>\n    <search-form toolbar-form-field (searchText)=\"searchText($event)\"></search-form>\n    <matcha-toolbar-button icon=\"home-out\" (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-button>\n    <matcha-toolbar-content>\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-content>\n    <matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-main-button>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</matcha-toolbar>\n-->\n<ng-template #toolbarMainButton>\n    <ng-content select=\"matcha-toolbar-main-button\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarCustomButton>\n    <ng-content select=\"matcha-toolbar-custom-button\"></ng-content>\n</ng-template>\n<!-- CONTENT HEADER -->\n<div class=\"flex-column background-surface radius-8\" [ngClass]=\"elevationClass\">\n    <div class=\"flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-40 flex-wrap\">\n        <div class=\"w-100-p--force w-md-auto--force flex-space-between flex-wrap\">\n            <div class=\"min-h-32 flex-center-center\">\n                <ng-content select=\"matcha-title\"></ng-content>\n            </div>\n            <ng-container *ngIf=\"isMobileScreen\">\n                <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n            </ng-container>\n        </div>\n        <div class=\"w-100-p--force w-md-auto--force flex-row flex-end gap-8\">\n            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <ng-content select=\"search-form\"></ng-content>\n            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <div class=\"flex-row gap-8\">\n                <ng-content select=\"matcha-toolbar-button\"></ng-content>\n                <ng-content select=\"matcha-toolbar-content\"></ng-content>\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!isMobileScreen\">\n                    <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- / CONTENT HEADER -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-toolbar', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar>\n    <matcha-title type=\"icon\" icon=\"settings-out\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n        {{'FINANCIAL.CATEGORY.TITLE' | translate}}\n    </matcha-title>\n    <search-form toolbar-form-field (searchText)=\"searchText($event)\"></search-form>\n    <matcha-toolbar-button icon=\"home-out\" (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-button>\n    <matcha-toolbar-content>\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-content>\n    <matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-main-button>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</matcha-toolbar>\n-->\n<ng-template #toolbarMainButton>\n    <ng-content select=\"matcha-toolbar-main-button\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarCustomButton>\n    <ng-content select=\"matcha-toolbar-custom-button\"></ng-content>\n</ng-template>\n<!-- CONTENT HEADER -->\n<div class=\"flex-column background-surface radius-8 matcha-elevation-z1\">\n    <div class=\"flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-40 flex-wrap\">\n        <div class=\"w-100-p--force w-md-auto--force flex-space-between flex-wrap\">\n            <div class=\"min-h-32 flex-center-center\">\n                <ng-content select=\"matcha-title\"></ng-content>\n            </div>\n            <ng-container *ngIf=\"isMobileScreen\">\n                <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n            </ng-container>\n        </div>\n        <div class=\"w-100-p--force w-md-auto--force flex-row flex-end gap-8\">\n            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <ng-content select=\"search-form\"></ng-content>\n            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <div class=\"flex-row gap-8\">\n                <ng-content select=\"matcha-toolbar-button\"></ng-content>\n                <ng-content select=\"matcha-toolbar-content\"></ng-content>\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!isMobileScreen\">\n                    <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- / CONTENT HEADER -->\n" }]
-        }], propDecorators: { onResize: [{
+            args: [{ selector: 'matcha-toolbar', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar>\n    <matcha-title type=\"icon\" icon=\"settings-out\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n        {{'FINANCIAL.CATEGORY.TITLE' | translate}}\n    </matcha-title>\n    <search-form toolbar-form-field (searchText)=\"searchText($event)\"></search-form>\n    <matcha-toolbar-button icon=\"home-out\" (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-button>\n    <matcha-toolbar-content>\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-content>\n    <matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-main-button>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</matcha-toolbar>\n-->\n<ng-template #toolbarMainButton>\n    <ng-content select=\"matcha-toolbar-main-button\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarCustomButton>\n    <ng-content select=\"matcha-toolbar-custom-button\"></ng-content>\n</ng-template>\n<!-- CONTENT HEADER -->\n<div class=\"flex-column background-surface radius-8\" [ngClass]=\"elevationClass\">\n    <div class=\"flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-40 flex-wrap\">\n        <div class=\"w-100-p--force w-md-auto--force flex-space-between flex-wrap\">\n            <div class=\"min-h-32 flex-center-center\">\n                <ng-content select=\"matcha-title\"></ng-content>\n            </div>\n            <ng-container *ngIf=\"isMobileScreen\">\n                <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n            </ng-container>\n        </div>\n        <div class=\"w-100-p--force w-md-auto--force flex-row flex-end gap-8\">\n            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <ng-content select=\"search-form\"></ng-content>\n            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <div class=\"flex-row gap-8\">\n                <ng-content select=\"matcha-toolbar-button\"></ng-content>\n                <ng-content select=\"matcha-toolbar-content\"></ng-content>\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!isMobileScreen\">\n                    <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- / CONTENT HEADER -->\n" }]
+        }], propDecorators: { elevation: [{
+                type: Input
+            }], onResize: [{
                 type: HostListener,
                 args: ['window:resize', []]
             }] } });
@@ -1843,11 +2110,11 @@ class MatchaFormFieldComponent {
         return !!this.control?.invalid && (this.control?.touched || this.control?.dirty);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n" }]
+            args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n" }]
         }], propDecorators: { color: [{
                 type: Input
             }], size: [{
@@ -1977,19 +2244,21 @@ class MatchaCheckboxComponent {
         this.onChange = () => { };
         this.onTouched = () => { };
     }
+    get disabled() {
+        return this._disabled;
+    }
     set disabled(value) {
         // Converte 'false' (string) ou false (boolean) para false, e qualquer outro valor para true.
         this._disabled = value != null && `${value}` !== 'false';
     }
-    get disabled() {
-        return this._disabled;
-    }
     get checked() {
         return this._checked;
     }
     set checked(value) {
-        if (value !== this._checked) {
-            this._checked = value;
+        // Converte string para boolean: 'false' (string) ou false (boolean) para false, qualquer outro valor para true
+        const booleanValue = value != null && `${value}` !== 'false';
+        if (booleanValue !== this._checked) {
+            this._checked = booleanValue;
             this.onChange(this._checked);
         }
     }
@@ -2332,11 +2601,11 @@ class MatchaHintTextComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaHintTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaHintTextComponent, isStandalone: false, selector: "matcha-hint-text", inputs: { type: "type", size: "size" }, ngImport: i0, template: "<div class=\"d-flex gap-4\">\n    <matcha-icon color=\"{{ iconColor }}\" name=\"{{ iconName }}\"> </matcha-icon>\n    <span class=\"text\"><ng-content></ng-content></span>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaHintTextComponent, isStandalone: false, selector: "matcha-hint-text", inputs: { type: "type", size: "size" }, ngImport: i0, template: "<div class=\"d-flex flex-align-center gap-4\">\n    <matcha-icon color=\"{{ iconColor }}\" name=\"{{ iconName }}\"> </matcha-icon>\n    <span class=\"text\"><ng-content></ng-content></span>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaHintTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-hint-text', standalone: false, template: "<div class=\"d-flex gap-4\">\n    <matcha-icon color=\"{{ iconColor }}\" name=\"{{ iconName }}\"> </matcha-icon>\n    <span class=\"text\"><ng-content></ng-content></span>\n</div>\n" }]
+            args: [{ selector: 'matcha-hint-text', standalone: false, template: "<div class=\"d-flex flex-align-center gap-4\">\n    <matcha-icon color=\"{{ iconColor }}\" name=\"{{ iconName }}\"> </matcha-icon>\n    <span class=\"text\"><ng-content></ng-content></span>\n</div>\n" }]
         }], propDecorators: { type: [{
                 type: Input,
                 args: ['type']
@@ -2630,11 +2899,11 @@ class MatchaTabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { activeTabIndex: "activeTabIndex" }, outputs: { tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], ngImport: i0, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\" \n            [attr.aria-selected]=\"tab.active\" \n            [attr.aria-controls]=\"'tab-content-' + i\" \n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-88 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"text-label fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], animations: [...createAnimations] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { activeTabIndex: "activeTabIndex" }, outputs: { tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], ngImport: i0, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-88 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"color-fg fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], animations: [...createAnimations] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-tabs', animations: [...createAnimations], standalone: false, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\" \n            [attr.aria-selected]=\"tab.active\" \n            [attr.aria-controls]=\"'tab-content-' + i\" \n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-88 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"text-label fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'matcha-tabs', animations: [...createAnimations], standalone: false, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-88 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"color-fg fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [MatchaTabItemComponent]
@@ -3657,11 +3926,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
             args: [{ selector: 'matcha-page-layout', standalone: false, template: "<div class=\"page-layout carded fullwidth\">\n    <!-- TOP BACKGROUND -->\n    <div class=\"top-bg\"></div>\n    <!--/ TOP BACKGROUND -->\n\n    <!-- CENTER -->\n    <div class=\"center pt-24 gap-16\">\n        <!-- CONTENT CARD -->\n        <div class=\"content-card flatten flex-column h-100-p\">\n            <!-- CONTENT -->\n            <div class=\"content flex-column h-100-p\">\n                <div class=\"content-card card-flat flex-column h-100-p background-bg border-radius-0 pb-16\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [":host{display:flex;flex-direction:column;width:100%}\n"] }]
         }] });
 
-/**
- * Token de injeção para MatchaOptionParent
- * Usado para injetar o componente pai no matcha-option
- */
-const MATCHA_OPTION_PARENT = Symbol('MatchaOptionParent');
+class MatchaAvatarComponent {
+    constructor() {
+        this.src = '';
+        this.name = '';
+        this.size = 'medium';
+        this.color = 'blue';
+        this._disabled = false;
+    }
+    set disabled(value) {
+        this._disabled = value != null && `${value}` !== 'false';
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    get initials() {
+        if (!this.name.trim()) {
+            return '';
+        }
+        const words = this.name.trim().split(/\s+/);
+        if (this.size === 'tiny') {
+            return words[0].charAt(0).toUpperCase();
+        }
+        if (words.length >= 2) {
+            return (words[0].charAt(0) + words[1].charAt(0)).toUpperCase();
+        }
+        else if (words.length === 1 && words[0].length >= 2) {
+            return words[0].substring(0, 2).toUpperCase();
+        }
+        else {
+            return words[0].charAt(0).toUpperCase();
+        }
+    }
+    get hasImage() {
+        return !!(this.src && this.src.trim() !== '');
+    }
+    get hasName() {
+        return !!(this.name && this.name.trim() !== '');
+    }
+    get showDefaultIcon() {
+        return !this.hasImage && !this.hasName;
+    }
+    get sizeClass() {
+        return `matcha-avatar-${this.size}`;
+    }
+    get avatarClasses() {
+        let classes = `matcha-avatar radius-full ${this.sizeClass}`;
+        if (!this.showDefaultIcon) {
+            classes += ' ' + this.color;
+        }
+        if (this.disabled) {
+            classes += ' color-disabled';
+        }
+        return classes;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaAvatarComponent, isStandalone: false, selector: "matcha-avatar", inputs: { src: "src", name: "name", size: "size", color: "color", disabled: "disabled" }, ngImport: i0, template: "<span [class]=\"avatarClasses\">\n    <!-- Imagem do usu\u00E1rio -->\n    <img \n      *ngIf=\"hasImage\" \n      [src]=\"src\" \n      [alt]=\"name || 'Avatar'\"\n      class=\"matcha-avatar-image\">\n    \n    <!-- Iniciais do nome -->\n    <span \n      *ngIf=\"!hasImage && hasName\" \n      class=\"matcha-avatar-initials\">\n      {{ initials }}\n    </span>\n    \n\n    <svg \n      *ngIf=\"showDefaultIcon\"\n      class=\"matcha-avatar-icon\"\n      viewBox=\"0 0 56 56\" \n      fill=\"none\" \n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path \n        fill-rule=\"evenodd\" \n        clip-rule=\"evenodd\" \n        d=\"M28 0C12.544 0 0 12.544 0 28C0 43.456 12.544 56 28 56C43.456 56 56 43.456 56 28C56 12.544 43.456 0 28 0ZM28.0022 8.4C32.6502 8.4 36.4022 12.152 36.4022 16.8C36.4022 21.448 32.6502 25.2 28.0022 25.2C23.3542 25.2 19.6022 21.448 19.6022 16.8C19.6022 12.152 23.3542 8.4 28.0022 8.4ZM28.0022 48.1601C21.0022 48.1601 14.8142 44.5761 11.2022 39.1441C11.2862 33.5721 22.4022 30.5201 28.0022 30.5201C33.5742 30.5201 44.7182 33.5721 44.8022 39.1441C41.1902 44.5761 35.0022 48.1601 28.0022 48.1601Z\" \n        fill=\"currentColor\"/>\n    </svg>\n  </span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-avatar', standalone: false, template: "<span [class]=\"avatarClasses\">\n    <!-- Imagem do usu\u00E1rio -->\n    <img \n      *ngIf=\"hasImage\" \n      [src]=\"src\" \n      [alt]=\"name || 'Avatar'\"\n      class=\"matcha-avatar-image\">\n    \n    <!-- Iniciais do nome -->\n    <span \n      *ngIf=\"!hasImage && hasName\" \n      class=\"matcha-avatar-initials\">\n      {{ initials }}\n    </span>\n    \n\n    <svg \n      *ngIf=\"showDefaultIcon\"\n      class=\"matcha-avatar-icon\"\n      viewBox=\"0 0 56 56\" \n      fill=\"none\" \n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path \n        fill-rule=\"evenodd\" \n        clip-rule=\"evenodd\" \n        d=\"M28 0C12.544 0 0 12.544 0 28C0 43.456 12.544 56 28 56C43.456 56 56 43.456 56 28C56 12.544 43.456 0 28 0ZM28.0022 8.4C32.6502 8.4 36.4022 12.152 36.4022 16.8C36.4022 21.448 32.6502 25.2 28.0022 25.2C23.3542 25.2 19.6022 21.448 19.6022 16.8C19.6022 12.152 23.3542 8.4 28.0022 8.4ZM28.0022 48.1601C21.0022 48.1601 14.8142 44.5761 11.2022 39.1441C11.2862 33.5721 22.4022 30.5201 28.0022 30.5201C33.5742 30.5201 44.7182 33.5721 44.8022 39.1441C41.1902 44.5761 35.0022 48.1601 28.0022 48.1601Z\" \n        fill=\"currentColor\"/>\n    </svg>\n  </span>" }]
+        }], propDecorators: { src: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
 
 class MatchaOptionComponent {
     constructor(parent, elRef) {
@@ -3676,12 +4011,42 @@ 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
-        this.parent?.selectOption(this);
+        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();
+        }
         // ✅ Emite eventos para uso standalone
         this.optionClick.emit(this.value);
         this.optionSelect.emit(this);
     }
+    findParentAndSelect() {
+        // Busca o elemento pai matcha-autocomplete
+        const autocompleteEl = this.elRef.nativeElement.closest('matcha-autocomplete');
+        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 {
+            console.log('MatchaOption: Não encontrou elemento matcha-autocomplete');
+        }
+    }
     onKeydown(ev) {
         if (ev.key === 'Enter' || ev.key === ' ') {
             ev.preventDefault();
@@ -3731,13 +4096,231 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
+class MatchaPanelComponent {
+    constructor(elRef, cdr) {
+        this.elRef = elRef;
+        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.opened = new EventEmitter();
+        this.closed = new EventEmitter();
+        this.panelStyle = {};
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        // Inicialização básica
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.cleanupListeners();
+    }
+    /**
+     * Anexa o painel a um elemento trigger
+     */
+    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
+     */
+    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();
+        }
+    }
+    /**
+     * Abre o painel
+     */
+    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.cdr.detectChanges();
+        this.updatePosition();
+        this.setupListeners();
+        this.opened.emit();
+    }
+    /**
+     * Fecha o painel
+     */
+    closePanel() {
+        console.log('MatchaPanel: Fechando painel', {
+            open: this.open,
+            triggerElement: this.triggerElement,
+            stackTrace: new Error().stack
+        });
+        this.cleanupListeners();
+        this.closed.emit();
+    }
+    /**
+     * Alterna o estado do painel
+     */
+    togglePanel() {
+        this.open ? this.closePanel() : this.openPanel();
+    }
+    /**
+     * Atualiza a posição do painel (simplificado para absolute)
+     */
+    updatePosition() {
+        if (!this.triggerElement) {
+            console.log('MatchaPanel: updatePosition - triggerElement não encontrado');
+            return;
+        }
+        const position = this.calculatePosition();
+        this.panelStyle = {
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+            minWidth: `${position.width}px`,
+            maxHeight: `${position.maxHeight || this.maxHeight}px`,
+            zIndex: 1003
+        };
+        console.log('MatchaPanel: Posição calculada (absolute)', {
+            position,
+            panelStyle: this.panelStyle
+        });
+    }
+    /**
+     * Calcula a posição ideal do painel (simplificado para absolute)
+     */
+    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 };
+        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;
+        }
+        else {
+            // Posicionar abaixo (padrão)
+            top = rect.bottom - containerRect.top + 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.2.1", 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.2.1", 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>
+        </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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", 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>
+        </div>
+      </ng-container>
+    </div>
+  `,
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { placement: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], triggerElement: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], panelRef: [{
+                type: ViewChild,
+                args: ['panel', { static: false }]
+            }] } });
+
 class MatchaAutocompleteComponent {
     constructor(elRef, renderer, cdr) {
         this.elRef = elRef;
         this.renderer = renderer;
         this.cdr = cdr;
+        // Armazenar o valor selecionado independente da QueryList
+        this.selectedValue = undefined;
+        // Configurações do painel
+        this.placement = 'auto';
+        this.maxHeight = 280;
+        this.minWidth = 160;
+        this.opened = new EventEmitter();
+        this.closed = new EventEmitter();
         this.open = false;
-        this.panelStyle = {};
         this.activeIndex = -1;
     }
     ngAfterContentInit() {
@@ -3749,37 +4332,50 @@ class MatchaAutocompleteComponent {
             }
         });
     }
+    ngAfterViewInit() {
+        // Aguarda a view ser inicializada
+        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);
+        });
+    }
     attachTo(input) {
         this.triggerElement = input;
     }
     openPanel() {
-        if (!this.triggerElement)
+        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
+        });
         this.open = true;
-        this.setPanelPosition();
+        this.cdr.detectChanges(); // Força detecção de mudanças
+        this.panel.attachTo(this.triggerElement);
+        this.panel.openPanel();
         this.resetActive();
+        this.opened.emit();
     }
     closePanel() {
+        console.log('MatchaAutocomplete: Fechando painel', {
+            open: this.open,
+            stackTrace: new Error().stack
+        });
         this.open = false;
         this.activeIndex = -1;
         this.updateSelectedStates();
+        this.panel.closePanel();
+        this.closed.emit();
     }
     togglePanel() {
         this.open ? this.closePanel() : this.openPanel();
     }
-    setPanelPosition() {
-        if (!this.triggerElement)
-            return;
-        const rect = this.triggerElement.getBoundingClientRect();
-        const top = rect.bottom + window.scrollY;
-        const left = rect.left + window.scrollX;
-        this.panelStyle = {
-            position: 'absolute',
-            top: `${top}px`,
-            left: `${left}px`,
-            minWidth: `${rect.width}px`
-        };
-    }
     resetActive() {
         this.activeIndex = -1;
         this.updateSelectedStates();
@@ -3823,32 +4419,66 @@ class MatchaAutocompleteComponent {
     }
     // chamado por matcha-option quando clicado
     selectOption(option) {
-        this.options.forEach(o => o.selected = (o === 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
+        option.selected = true;
+        // Marcar todas as outras como não selecionadas
+        this.options.forEach(o => {
+            if (o !== option) {
+                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 }))
+        });
         // Fechamos painel automaticamente
+        console.log('MatchaAutocomplete: Fechando painel após seleção');
         this.closePanel();
         // indireto: a directive pode ler o value via getSelectedValue()
     }
     getSelectedValue() {
-        const selected = this.options.find(o => o.selected);
-        return selected ? selected.value : undefined;
+        // 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;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", 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.2.1", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], ngImport: i0, template: `
-    <div class="matcha-autocomplete-panel" *ngIf="open" [ngStyle]="panelStyle" role="listbox">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, styles: [":host{position:absolute;z-index:1000;display:block}.matcha-autocomplete-panel{box-shadow:0 4px 10px #0000001f;border-radius:6px;background:#fff;max-height:280px;overflow:auto;min-width:160px;display:flex;flex-direction:column}.matcha-option{padding:8px 12px;cursor:pointer}.matcha-option[aria-selected=true]{background:#00000014}.matcha-option[disabled]{opacity:.5;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<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", dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-autocomplete', template: `
-    <div class="matcha-autocomplete-panel" *ngIf="open" [ngStyle]="panelStyle" role="listbox">
-      <ng-content></ng-content>
-    </div>
-  `, encapsulation: ViewEncapsulation.None, standalone: false, styles: [":host{position:absolute;z-index:1000;display:block}.matcha-autocomplete-panel{box-shadow:0 4px 10px #0000001f;border-radius:6px;background:#fff;max-height:280px;overflow:auto;min-width:160px;display:flex;flex-direction:column}.matcha-option{padding:8px 12px;cursor:pointer}.matcha-option[aria-selected=true]{background:#00000014}.matcha-option[disabled]{opacity:.5;cursor:default}\n"] }]
+            args: [{ selector: 'matcha-autocomplete', encapsulation: ViewEncapsulation.None, standalone: false, template: "<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" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [MatchaOptionComponent, { descendants: true }]
+            }], panel: [{
+                type: ViewChild,
+                args: [MatchaPanelComponent]
+            }], placement: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
             }] } });
 
 class MatchaTooltipDirective {
@@ -4612,30 +5242,51 @@ class MatchaAutocompleteTriggerDirective {
             throw new Error('Você precisa passar uma referência para <matcha-autocomplete> ex: [matchaAutocomplete]="auto"');
         }
         this.panel.attachTo(this.el.nativeElement);
-        // close panel ao clicar fora
+        // close panel ao clicar fora - usando click para evitar conflito com focus
         const clickSub = fromEvent(document, 'click').pipe(filter((ev) => {
             const target = ev.target;
-            return !this.el.nativeElement.contains(target) && !(this.panel?.elRef?.nativeElement?.contains?.(target));
-        })).subscribe(() => this.panel.closePanel());
+            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
+            });
+            // Não fechar se clicou no input ou painel
+            return !isInsideInput && !isInsidePanel;
+        })).subscribe(() => {
+            console.log('MatchaAutocomplete: Fechando painel por click outside');
+            this.panel.closePanel();
+        });
         this.subs.add(clickSub);
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
     writeValueToInput(value) {
+        console.log('MatchaAutocomplete: writeValueToInput chamado', {
+            value,
+            input: this.el.nativeElement
+        });
         const input = this.el.nativeElement;
         input.value = value == null ? '' : value;
         // dispatch input event para Angular Forms
         const ev = new Event('input', { bubbles: true });
         input.dispatchEvent(ev);
+        console.log('MatchaAutocomplete: Valor escrito no input', input.value);
     }
-    onFocus() {
-        // ao focar podemos abrir (ou não — depende do UX desejado)
+    onClick() {
+        // Abrir painel quando clicar no input
         this.panel.openPanel();
     }
+    onFocus() {
+        // Não abrir automaticamente no focus para evitar conflito com click outside
+        // O painel será aberto apenas quando o usuário clicar ou digitar
+    }
     onInput(e) {
-        // se o usuário digitar, apenas reabre/posiciona painel. O filtro de opções geralmente é controlado pelo componente pai
-        this.panel.setPanelPosition();
+        // se o usuário digitar, apenas reabre painel. O filtro de opções geralmente é controlado pelo componente pai
         if (!this.panel.open)
             this.panel.openPanel();
     }
@@ -4677,14 +5328,16 @@ class MatchaAutocompleteTriggerDirective {
         if (!this.panel || !this.panel.open) {
             // se painel fechado, pode ter sido selecionado; então buscarmos selected value
             setTimeout(() => {
-                const val = this.panel.getSelectedValue();
-                if (val !== undefined)
-                    this.writeValueToInput(val);
+                if (this.panel && typeof this.panel.getSelectedValue === 'function') {
+                    const val = this.panel.getSelectedValue();
+                    if (val !== undefined)
+                        this.writeValueToInput(val);
+                }
             }, 10);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: MatchaAutocompleteTriggerDirective, isStandalone: false, selector: "[matchaAutocomplete]", inputs: { panel: ["matchaAutocomplete", "panel"] }, host: { listeners: { "focus": "onFocus()", "input": "onInput($event)", "keydown": "onKeydown($event)", "document:click": "onDocClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: MatchaAutocompleteTriggerDirective, isStandalone: false, selector: "[matchaAutocomplete]", inputs: { panel: ["matchaAutocomplete", "panel"] }, host: { listeners: { "click": "onClick()", "focus": "onFocus()", "input": "onInput($event)", "keydown": "onKeydown($event)", "document:click": "onDocClick($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteTriggerDirective, decorators: [{
             type: Directive,
@@ -4695,6 +5348,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { panel: [{
                 type: Input,
                 args: ['matchaAutocomplete']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
             }], onFocus: [{
                 type: HostListener,
                 args: ['focus']
@@ -4729,19 +5385,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 }]
         }] });
 
+class MatchaPanelModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaPanelModule, declarations: [MatchaPanelComponent], imports: [CommonModule], exports: [MatchaPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaPanelModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaPanelComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        MatchaPanelComponent
+                    ]
+                }]
+        }] });
+
 class MatchaAutocompleteModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteComponent,
             MatchaAutocompleteTriggerDirective], imports: [CommonModule,
-            MatchaOptionModule], exports: [MatchaAutocompleteComponent,
+            MatchaOptionModule,
+            MatchaPanelModule], exports: [MatchaAutocompleteComponent,
             MatchaAutocompleteTriggerDirective,
             MatchaOptionModule // Re-exporta para conveniência
         ] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteModule, providers: [
-            // ✅ Provider para permitir injeção da interface MatchaOptionParent
+            // Provider para permitir injeção da interface MatchaOptionParent
             { provide: MATCHA_OPTION_PARENT, useExisting: MatchaAutocompleteComponent }
         ], imports: [CommonModule,
-            MatchaOptionModule, MatchaOptionModule // Re-exporta para conveniência
+            MatchaOptionModule,
+            MatchaPanelModule, MatchaOptionModule // Re-exporta para conveniência
         ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
@@ -4753,7 +5431,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        MatchaOptionModule
+                        MatchaOptionModule,
+                        MatchaPanelModule
                     ],
                     exports: [
                         MatchaAutocompleteComponent,
@@ -4761,7 +5440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatchaOptionModule // Re-exporta para conveniência
                     ],
                     providers: [
-                        // ✅ Provider para permitir injeção da interface MatchaOptionParent
+                        // Provider para permitir injeção da interface MatchaOptionParent
                         { provide: MATCHA_OPTION_PARENT, useExisting: MatchaAutocompleteComponent }
                     ]
                 }]
@@ -4865,41 +5544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
             args: [{
                     declarations: [MatchaChipsDirective],
                     imports: [],
-                    exports: [
-                        MatchaChipsDirective
-                    ]
-                }]
-        }] });
-
-class MatchaDatepickerDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-datepicker');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDatepickerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: MatchaDatepickerDirective, isStandalone: false, selector: "[matcha-datepicker]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDatepickerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-datepicker]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaDatepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaDatepickerModule, declarations: [MatchaDatepickerDirective], exports: [MatchaDatepickerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDatepickerModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDatepickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaDatepickerDirective],
-                    imports: [],
-                    exports: [MatchaDatepickerDirective],
+                    exports: [MatchaChipsDirective]
                 }]
         }] });
 
@@ -5149,38 +5794,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 }]
         }] });
 
-class MatchaSelectDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-select');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaSelectDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: MatchaSelectDirective, isStandalone: false, selector: "[matcha-select]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaSelectDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-select]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaSelectModule, declarations: [MatchaSelectDirective], imports: [CommonModule], exports: [MatchaSelectDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaSelectModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaSelectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaSelectDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaSelectDirective],
-                }]
-        }] });
-
 class MatchaSidenavDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
@@ -5633,10 +6246,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 }]
         }] });
 
+class MatchaAvatarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaAvatarModule, declarations: [MatchaAvatarComponent], imports: [CommonModule], exports: [MatchaAvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAvatarModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAvatarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaAvatarComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [MatchaAvatarComponent]
+                }]
+        }] });
+
 class MatchaDrawerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerModule, declarations: [MatchaDrawerComponent], imports: [CommonModule,
-            MatchaButtonModule], exports: [MatchaDrawerComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerModule, declarations: [MatchaDrawerComponent,
+            MatchaDrawerContainerComponent,
+            MatchaDrawerContentComponent], imports: [CommonModule,
+            MatchaButtonModule], exports: [MatchaDrawerComponent,
+            MatchaDrawerContainerComponent,
+            MatchaDrawerContentComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerModule, imports: [CommonModule,
             MatchaButtonModule] }); }
 }
@@ -5644,14 +6277,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
             type: NgModule,
             args: [{
                     declarations: [
-                        MatchaDrawerComponent
+                        MatchaDrawerComponent,
+                        MatchaDrawerContainerComponent,
+                        MatchaDrawerContentComponent
                     ],
                     imports: [
                         CommonModule,
                         MatchaButtonModule
                     ],
                     exports: [
-                        MatchaDrawerComponent
+                        MatchaDrawerComponent,
+                        MatchaDrawerContainerComponent,
+                        MatchaDrawerContentComponent
                     ]
                 }]
         }] });
@@ -5664,6 +6301,7 @@ class MatchaComponentsModule {
             MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaOptionModule,
+            MatchaPanelModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5671,7 +6309,6 @@ class MatchaComponentsModule {
             MatchaCheckboxModule,
             MatchaRadioModule,
             MatchaChipsModule,
-            MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
             MatchaFormFieldModule,
@@ -5687,7 +6324,6 @@ class MatchaComponentsModule {
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSelectModule,
             MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
@@ -5707,6 +6343,7 @@ class MatchaComponentsModule {
             MatchaDrawerModule], exports: [MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaOptionModule,
+            MatchaPanelModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5714,7 +6351,6 @@ class MatchaComponentsModule {
             MatchaCheckboxModule,
             MatchaRadioModule,
             MatchaChipsModule,
-            MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
             MatchaFormFieldModule,
@@ -5730,7 +6366,6 @@ class MatchaComponentsModule {
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSelectModule,
             MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
@@ -5747,6 +6382,7 @@ class MatchaComponentsModule {
             MatchaTimeModule,
             MatchaDropListModule,
             MatchaPageLayoutModule,
+            MatchaAvatarModule,
             MatchaDrawerModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule,
             FormsModule,
@@ -5754,6 +6390,7 @@ class MatchaComponentsModule {
             MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaOptionModule,
+            MatchaPanelModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5761,7 +6398,6 @@ class MatchaComponentsModule {
             MatchaCheckboxModule,
             MatchaRadioModule,
             MatchaChipsModule,
-            MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
             MatchaFormFieldModule,
@@ -5777,7 +6413,6 @@ class MatchaComponentsModule {
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSelectModule,
             MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
@@ -5797,6 +6432,7 @@ class MatchaComponentsModule {
             MatchaDrawerModule, MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaOptionModule,
+            MatchaPanelModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5804,7 +6440,6 @@ class MatchaComponentsModule {
             MatchaCheckboxModule,
             MatchaRadioModule,
             MatchaChipsModule,
-            MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
             MatchaFormFieldModule,
@@ -5820,7 +6455,6 @@ class MatchaComponentsModule {
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSelectModule,
             MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
@@ -5837,6 +6471,7 @@ class MatchaComponentsModule {
             MatchaTimeModule,
             MatchaDropListModule,
             MatchaPageLayoutModule,
+            MatchaAvatarModule,
             MatchaDrawerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaComponentsModule, decorators: [{
@@ -5850,6 +6485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatchaAccordionModule,
                         MatchaAutocompleteModule,
                         MatchaOptionModule,
+                        MatchaPanelModule,
                         MatchaBadgeModule,
                         MatchaButtonModule,
                         MatchaButtonToggleModule,
@@ -5857,7 +6493,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatchaCheckboxModule,
                         MatchaRadioModule,
                         MatchaChipsModule,
-                        MatchaDatepickerModule,
                         MatchaDividerModule,
                         MatchaElevationModule,
                         MatchaFormFieldModule,
@@ -5873,7 +6508,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatchaPaginatorModule,
                         MatchaProgressBarModule,
                         MatchaRippleModule,
-                        MatchaSelectModule,
                         MatchaSidenavModule,
                         MatchaSlideToggleModule,
                         MatchaSliderModule,
@@ -5895,6 +6529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                     exports: [MatchaAccordionModule,
                         MatchaAutocompleteModule,
                         MatchaOptionModule,
+                        MatchaPanelModule,
                         MatchaBadgeModule,
                         MatchaButtonModule,
                         MatchaButtonToggleModule,
@@ -5902,7 +6537,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatchaCheckboxModule,
                         MatchaRadioModule,
                         MatchaChipsModule,
-                        MatchaDatepickerModule,
                         MatchaDividerModule,
                         MatchaElevationModule,
                         MatchaFormFieldModule,
@@ -5918,7 +6552,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatchaPaginatorModule,
                         MatchaProgressBarModule,
                         MatchaRippleModule,
-                        MatchaSelectModule,
                         MatchaSidenavModule,
                         MatchaSlideToggleModule,
                         MatchaSliderModule,
@@ -5935,6 +6568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatchaTimeModule,
                         MatchaDropListModule,
                         MatchaPageLayoutModule,
+                        MatchaAvatarModule,
                         MatchaDrawerModule
                     ],
                 }]
@@ -5977,18 +6611,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
  * Public API Surface of matcha-components
  */
 // -----------------------------------------------------------
-// COMPONENTS
+// INTERFACES
 // -----------------------------------------------------------
-// // ATOMIC COMPONENTS
-// export * from './lib/matcha-button/matcha-button.component';
-// // BASE COMPONENT
-// export * from './lib/matcha-title/matcha-title.component';
-//
 // -----------------------------------------------------------
-// COMPONENTS
+// PIPES
 // -----------------------------------------------------------
 // -----------------------------------------------------------
 // VENDORS
+// -----------------------------------------------------------
 // export * from './lib/matcha-input-phone/lib/ngx-mask-applier.service';
 // export * from './lib/matcha-input-phone/lib/ngx-mask.directive';
 // export * from './lib/matcha-input-phone/lib/ngx-mask.module';
@@ -6003,5 +6633,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective };
+export { MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBadgeDirective, MatchaBadgeModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective };
 //# sourceMappingURL=matcha-components.mjs.map