matcha-components 20.9.0 → 20.13.0

package/fesm2022/matcha-components.mjs

@@ -1,13 +1,18 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, Renderer2, HostBinding, Inject, HostListener, ContentChild, Directive, forwardRef, Injectable, ChangeDetectionStrategy, TemplateRef, ViewChild, 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 } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { Subscription, Subject, BehaviorSubject, fromEvent } from 'rxjs';
+import { debounceTime, filter } from 'rxjs/operators';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/forms';
 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}}',
@@ -363,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';
@@ -371,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.4", ngImport: i0, type: MatchaAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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.4", 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.4", 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.
@@ -411,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) {
@@ -1044,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() {
@@ -1079,7 +1139,7 @@ class MatchaCardComponent {
         return this.blockquote === 'left' || this.blockquote === 'right';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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.4", 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.4", ngImport: i0, type: MatchaCardComponent, decorators: [{
             type: Component,
@@ -1097,8 +1157,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: [{
@@ -1234,6 +1300,288 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 type: Output
             }] } });
 
+class MatchaDrawerComponent {
+    get drawerClasses() {
+        return `matcha-drawer matcha-drawer-${this.mode} matcha-drawer-${this.position} ${this.isOpen ? 'matcha-drawer-open' : 'matcha-drawer-closed'}`;
+    }
+    get drawerWidth() {
+        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, cdr) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.isOpen = false;
+        this.mode = 'push';
+        this.position = 'left';
+        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.drawerToggle = new EventEmitter();
+        this.drawerOpened = new EventEmitter();
+        this.drawerClosed = new EventEmitter();
+        this.isMobile = false;
+        this.bodyScrollLocked = false;
+        this.setupResizeObserver();
+    }
+    ngOnInit() {
+        this.checkScreenSize();
+        this.setupBodyScrollLock();
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        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);
+            }
+        }
+    }
+    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();
+            }
+        }
+    }
+    setupBodyScrollLock() {
+        if (this.mode === 'overlay' && this.isOpen) {
+            this.lockBodyScroll();
+        }
+    }
+    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.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 && !this.disableClose) {
+            this.isOpen = true;
+            this.isOpenChange.emit(this.isOpen);
+            this.drawerToggle.emit();
+            this.drawerOpened.emit();
+            if (this.mode === 'overlay') {
+                this.lockBodyScroll();
+            }
+        }
+    }
+    close() {
+        if (this.isOpen && !this.disableClose) {
+            this.isOpen = false;
+            this.isOpenChange.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 ? '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.4", 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.4", 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.4", ngImport: i0, type: MatchaDrawerComponent, decorators: [{
+            type: Component,
+            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
+            }], position: [{
+                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
+            }], 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.4", ngImport: i0, type: MatchaDrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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.4", 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.4", ngImport: i0, type: MatchaDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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.4", 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 {
     constructor() {
         this.name = '';
@@ -1650,9 +1998,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 
 class MatchaToolbarComponent {
     constructor() {
+        this.elevation = 1;
         this.isMobileScreen = false;
         this.mobileBreakpoint = 1024;
     }
+    get elevationClass() {
+        return `elevation-z-${this.elevation}`;
+    }
     ngOnInit() {
         this.checkScreenWidth();
     }
@@ -1669,12 +2021,14 @@ class MatchaToolbarComponent {
         clearTimeout(this.resizeTimeout);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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.4", 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.4", 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', []]
             }] } });
@@ -1756,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.4", ngImport: i0, type: MatchaFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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.4", 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.4", 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: [{
@@ -1890,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);
         }
     }
@@ -2131,15 +2487,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 
 class MatchaSpinnerComponent {
     set progress(value) {
-        this._progress = Number(value);
+        this._progressValue = Number(value);
     }
     get progress() {
-        return this._progress;
+        return this._progressValue;
+    }
+    get _progress() { return this.progress; }
+    get _color() { return this.color; }
+    get hostSize() {
+        return this.size;
     }
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
         this._renderer = _renderer;
-        this._progress = 0;
+        this._progressValue = 0;
         this.color = 'accent';
         this.size = null;
         this.sizeXs = null;
@@ -2174,7 +2535,7 @@ class MatchaSpinnerComponent {
         return this.circumference - (progress / 100) * this.circumference;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaSpinnerComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: MatchaSpinnerComponent, isStandalone: false, selector: "matcha-spinner", inputs: { progress: "progress", color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, ngImport: i0, template: "<div\n  class=\"matcha-spinner\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\" class=\"spinner\">\n    <circle\n      class=\"spinner-placeholder\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"spinner-progress path\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"dashOffset\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: MatchaSpinnerComponent, isStandalone: false, selector: "matcha-spinner", inputs: { progress: "progress", color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, host: { properties: { "attr.progress": "this._progress", "attr.color": "this._color", "attr.size": "this.hostSize" } }, ngImport: i0, template: "<div\n  class=\"matcha-spinner\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\" class=\"spinner\">\n    <circle\n      class=\"spinner-placeholder\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"spinner-progress path\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"dashOffset\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaSpinnerComponent, decorators: [{
             type: Component,
@@ -2187,11 +2548,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                     args: [Renderer2]
                 }] }], propDecorators: { progress: [{
                 type: Input
+            }], _progress: [{
+                type: HostBinding,
+                args: ['attr.progress']
             }], color: [{
                 type: Input
+            }], _color: [{
+                type: HostBinding,
+                args: ['attr.color']
             }], size: [{
                 type: Input,
                 args: ['size']
+            }], hostSize: [{
+                type: HostBinding,
+                args: ['attr.size']
             }], sizeXs: [{
                 type: Input,
                 args: ['size-xs']
@@ -2231,11 +2601,11 @@ class MatchaHintTextComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaHintTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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.4", 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.4", 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']
@@ -2282,147 +2652,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 type: Input
             }] } });
 
-class MatchaOptionService {
-    constructor() {
-        this._optionsSubject = new BehaviorSubject([]);
-        this.options$ = this._optionsSubject.asObservable();
-        this._activeOptionSubject = new BehaviorSubject(0);
-        this.activeOption$ = this._activeOptionSubject.asObservable();
-        this._canShowOptionsSubject = new BehaviorSubject(false);
-        this.canShowOptions$ = this._canShowOptionsSubject.asObservable();
-        this._selectedOptionSubject = new Subject();
-        this.selectedOption$ = this._selectedOptionSubject.asObservable();
-    }
-    setSelectedOption(selectedOption) {
-        this._selectedOptionSubject.next(selectedOption);
-    }
-    getCanShowOptions() {
-        return this._canShowOptionsSubject.value;
-    }
-    setCanShowOptions(canShowOptions) {
-        this._canShowOptionsSubject.next(canShowOptions);
-    }
-    updateOptions(options) {
-        this._optionsSubject.next(options);
-    }
-    updateActiveOption(activeOption) {
-        this._activeOptionSubject.next(activeOption);
-    }
-    resetActiveOption() {
-        this.updateActiveOption(0);
-        const currentOptions = this._optionsSubject.value;
-        const activeOption = this._activeOptionSubject.value;
-        currentOptions.forEach((option, index) => {
-            index === activeOption ? option.setIsOptionActive(true, false) : option.setIsOptionActive(false, false);
-        });
-        return;
-    }
-    removeActiveOption() {
-        const currentOptions = this._optionsSubject.value;
-        currentOptions.forEach((option) => {
-            option.isOptionActive = false;
-        });
-        this.updateActiveOption(-1);
-        return;
-    }
-    changeActiveOption(stepsToMove) {
-        const currentOptions = this._optionsSubject.value;
-        const lastActiveOption = this._activeOptionSubject.value;
-        this.updateActiveOption(Math.max(0, Math.min(currentOptions.length - 1, lastActiveOption + stepsToMove)));
-        const currentActiveOption = this._activeOptionSubject.value;
-        currentOptions.forEach((option, index) => {
-            option.setIsOptionActive(index === currentActiveOption, false);
-        });
-        return;
-    }
-    selectActiveOption() {
-        const currentOptions = this._optionsSubject.value;
-        const activeOption = this._activeOptionSubject.value;
-        if (currentOptions[activeOption]) {
-            currentOptions[activeOption].selectOption();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class MatchaOptionComponent {
-    constructor(changeDetectorRef, matchaOptionService) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.matchaOptionService = matchaOptionService;
-        this.isOptionActive = false;
-    }
-    selectOption() {
-        this.matchaOptionService.setCanShowOptions(true);
-        this.matchaOptionService.setSelectedOption(this.value);
-        setTimeout(() => {
-            this.matchaOptionService.setCanShowOptions(false);
-        }, 300);
-    }
-    setIsOptionActive(isOptionActive, isMouseEvent) {
-        if (isMouseEvent) {
-            this.matchaOptionService.removeActiveOption();
-        }
-        this.isOptionActive = isOptionActive;
-        this.changeDetectorRef.detectChanges();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MatchaOptionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: MatchaOptionComponent, isStandalone: false, selector: "matcha-option", inputs: { value: "value" }, ngImport: i0, template: "<span\n    (click)=\"selectOption()\"\n    (mouseenter)=\"setIsOptionActive(true, true)\"\n    (mouseleave)=\"setIsOptionActive(false, true)\"\n    [class.background-bg]=\"isOptionActive\"\n    class=\"d-block py-8 cursor-pointer px-16 w-100-p\">\n    <ng-content></ng-content>\n</span>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'matcha-option', standalone: false, template: "<span\n    (click)=\"selectOption()\"\n    (mouseenter)=\"setIsOptionActive(true, true)\"\n    (mouseleave)=\"setIsOptionActive(false, true)\"\n    [class.background-bg]=\"isOptionActive\"\n    class=\"d-block py-8 cursor-pointer px-16 w-100-p\">\n    <ng-content></ng-content>\n</span>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MatchaOptionService }], propDecorators: { value: [{
-                type: Input
-            }] } });
-
-class MatchaAutocompleteComponent {
-    constructor(changeDetectorRef, matchaOptionService) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.matchaOptionService = matchaOptionService;
-        this.isDisplayAutocomplete = false;
-        this.activeOption = 0;
-    }
-    ngOnInit() {
-        this.matchaOptionService.canShowOptions$.subscribe((canShowOptions) => {
-            if (!canShowOptions) {
-                this.matchaOptionService.resetActiveOption();
-            }
-            this.isDisplayAutocomplete = canShowOptions;
-        });
-    }
-    ngAfterContentInit() {
-        const options = this.options.toArray();
-        if (options.length > 0) {
-            options[0].setIsOptionActive(true, false);
-        }
-        this.matchaOptionService.updateOptions(options);
-        this.options.changes.subscribe((newOptions) => {
-            this.matchaOptionService.updateOptions(newOptions.toArray());
-            this.matchaOptionService.resetActiveOption();
-        });
-        this.matchaOptionService.activeOption$.subscribe((currentActiveOption) => {
-            this.activeOption = currentActiveOption;
-            this.changeDetectorRef.detectChanges();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MatchaOptionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", queries: [{ propertyName: "options", predicate: MatchaOptionComponent }], ngImport: i0, template: "<ng-container *ngIf=\"isDisplayAutocomplete\">\n    <div class=\"background-bg pt-24 position-absolute z-index-2 w-100-p\">\n        <ul class=\"background-surface m-0 radius-8 elevation-z-1 p-0\">\n            <ng-content></ng-content>\n        </ul>\n    </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'matcha-autocomplete', standalone: false, template: "<ng-container *ngIf=\"isDisplayAutocomplete\">\n    <div class=\"background-bg pt-24 position-absolute z-index-2 w-100-p\">\n        <ul class=\"background-surface m-0 radius-8 elevation-z-1 p-0\">\n            <ng-content></ng-content>\n        </ul>\n    </div>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MatchaOptionService }], propDecorators: { options: [{
-                type: ContentChildren,
-                args: [MatchaOptionComponent]
-            }] } });
-
 class MatchaSlideToggleComponent {
     set checked(value) {
         const newCheckedState = value === '' ? true : !!value;
@@ -2670,11 +2899,11 @@ class MatchaTabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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.4", 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.4", 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]
@@ -3769,66 +3998,721 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 type: Input
             }] } });
 
-class MatchaTooltipDirective {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        this.tooltipText = '';
-        this.tooltipDisabled = false;
-        this.preferAbove = false;
-        this.preferBelow = false;
-        this.preferLeft = false;
-        this.preferRight = false;
-        this.tooltipEnableClose = false;
-        this.tooltipElement = null;
-        this.documentClickListener = null;
+class MatchaOptionComponent {
+    constructor(parent, elRef) {
+        this.parent = parent;
+        this.elRef = elRef;
+        this.disabled = false;
+        this.selected = false;
+        // ✅ EventEmitters para uso standalone
+        this.optionClick = new EventEmitter();
+        this.optionSelect = new EventEmitter();
     }
-    onMouseEnter() {
-        if (this.tooltipEnableClose) {
-            // Em modo de clique/tap, não abre via hover
+    onClick() {
+        if (this.disabled)
             return;
+        console.log('MatchaOption: Clique na opção', {
+            value: this.value,
+            parent: this.parent,
+            disabled: this.disabled
+        });
+        // ✅ Notifica o pai (se houver) - qualquer componente que implemente MatchaOptionParent
+        if (this.parent) {
+            console.log('MatchaOption: Usando parent.selectOption');
+            this.parent.selectOption(this);
         }
-        if (this.tooltipDisabled || this.tooltipElement || !this.tooltipText) {
-            return;
+        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);
         }
-        this.createTooltip();
-    }
-    onMouseLeave() {
-        if (!this.tooltipEnableClose && this.tooltipElement) {
-            this.destroyTooltip();
+        else {
+            console.log('MatchaOption: Não encontrou elemento matcha-autocomplete');
         }
     }
-    onClick(event) {
-        if (!this.tooltipEnableClose) {
-            return;
-        }
-        event.stopPropagation();
-        if (!this.tooltipElement && !this.tooltipDisabled && this.tooltipText) {
-            this.createTooltip();
+    onKeydown(ev) {
+        if (ev.key === 'Enter' || ev.key === ' ') {
+            ev.preventDefault();
+            this.onClick();
         }
     }
-    createTooltip() {
-        // Cria o tooltip e adiciona a classe base
-        this.tooltipElement = this.renderer.createElement('div');
-        this.renderer.addClass(this.tooltipElement, 'matcha-tooltip-content');
-        // Define o conteúdo do tooltip
-        this.tooltipElement.textContent = this.tooltipText;
-        // Define estilos iniciais para medição
-        this.renderer.setStyle(this.tooltipElement, 'position', 'absolute');
-        this.renderer.setStyle(this.tooltipElement, 'top', '0');
-        this.renderer.setStyle(this.tooltipElement, 'left', '0');
-        this.renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
-        this.renderer.appendChild(document.body, this.tooltipElement);
-        // Se tooltipEnableClose estiver ativo, adiciona o botão de fechar
-        if (this.tooltipEnableClose) {
-            const closeButton = this.renderer.createElement('div');
-            this.renderer.addClass(closeButton, 'matcha-tooltip-close');
-            this.renderer.appendChild(this.tooltipElement, closeButton);
-            this.renderer.listen(closeButton, 'click', (e) => {
-                e.stopPropagation();
-                this.destroyTooltip();
-            });
-            this.documentClickListener = this.renderer.listen('document', 'click', (e) => {
+    // Getter para acessar o elemento nativo (usado para scroll)
+    get nativeElement() {
+        return this.elRef.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionComponent, deps: [{ token: MATCHA_OPTION_PARENT, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: MatchaOptionComponent, isStandalone: false, selector: "matcha-option", inputs: { value: "value", disabled: "disabled" }, outputs: { optionClick: "optionClick", optionSelect: "optionSelect" }, host: { attributes: { "role": "option", "tabindex": "0" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-selected": "this.selected" }, classAttribute: "matcha-option" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'matcha-option',
+                    template: `<ng-content></ng-content>`,
+                    host: {
+                        class: 'matcha-option',
+                        role: 'option',
+                        tabindex: '0'
+                    },
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MATCHA_OPTION_PARENT]
+                }] }, { type: i0.ElementRef }], propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], optionClick: [{
+                type: Output
+            }], optionSelect: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onKeydown: [{
+                type: HostListener,
+                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.4", 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.4", 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.4", 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.activeIndex = -1;
+    }
+    ngAfterContentInit() {
+        // quando options mudarem, resetamos estado relevante
+        this.options.changes.subscribe(() => {
+            if (this.open) {
+                this.resetActive();
+                this.cdr.detectChanges();
+            }
+        });
+    }
+    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) {
+            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.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();
+    }
+    resetActive() {
+        this.activeIndex = -1;
+        this.updateSelectedStates();
+    }
+    updateSelectedStates() {
+        const items = this.options.toArray();
+        items.forEach((opt, i) => opt.selected = i === this.activeIndex);
+    }
+    highlightNext() {
+        const length = this.options.length;
+        if (!length)
+            return;
+        this.activeIndex = (this.activeIndex + 1) % length;
+        this.updateSelectedStates();
+        this.scrollToActive();
+    }
+    highlightPrevious() {
+        const length = this.options.length;
+        if (!length)
+            return;
+        this.activeIndex = (this.activeIndex - 1 + length) % length;
+        this.updateSelectedStates();
+        this.scrollToActive();
+    }
+    scrollToActive() {
+        const opts = this.options.toArray();
+        if (this.activeIndex < 0 || this.activeIndex >= opts.length)
+            return;
+        const host = opts[this.activeIndex].nativeElement;
+        if (host && host.scrollIntoView) {
+            host.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    selectActive() {
+        if (this.activeIndex < 0)
+            return;
+        const opt = this.options.toArray()[this.activeIndex];
+        if (opt?.disabled)
+            return;
+        this.selectOption(opt);
+    }
+    // chamado por matcha-option quando clicado
+    selectOption(option) {
+        console.log('MatchaAutocomplete: Opção selecionada', {
+            option,
+            value: option.value,
+            selected: option.selected,
+            optionsLength: this.options.length,
+            allOptions: this.options.toArray()
+        });
+        // Armazenar o valor selecionado
+        this.selectedValue = option.value;
+        // Marcar a opção como selecionada diretamente
+        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() {
+        // 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.4", 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.4", 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.4", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
+            type: Component,
+            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
+            }] } });
+
+/**
+ * Service to internationalize the paginator component.
+ * Based on Angular Material's MatPaginatorIntl
+ */
+class MatchaPaginatorIntl {
+    constructor() {
+        /** Stream to emit from when labels are changed. Used by the paginator to update the labels. */
+        this.changes = new Subject();
+        /** A label for the page size selector. */
+        this.itemsPerPageLabel = 'Itens por página:';
+        /** A label for the button that increments the current page. */
+        this.nextPageLabel = 'Próxima página';
+        /** A label for the button that decrements the current page. */
+        this.previousPageLabel = 'Página anterior';
+        /** A label for the button that moves to the first page. */
+        this.firstPageLabel = 'Primeira página';
+        /** A label for the button that moves to the last page. */
+        this.lastPageLabel = 'Última página';
+        /**
+         * A label for the range of items within the current page and the length of the whole list.
+         */
+        this.getRangeLabel = (page, pageSize, length) => {
+            if (length === 0) {
+                return `0 de 0`;
+            }
+            const amountPages = Math.ceil(length / pageSize);
+            return `Página ${page + 1} de ${amountPages}`;
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorIntl, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MatchaPaginatorComponent {
+    constructor(_intl, _changeDetectorRef) {
+        this._intl = _intl;
+        this._changeDetectorRef = _changeDetectorRef;
+        this.pageIndex = 0;
+        this.length = 0;
+        this.pageSize = 50;
+        this.pageSizeOptions = [];
+        /** Color theme for active page button. Defaults to 'accent' */
+        this.color = 'accent';
+        this.page = new EventEmitter();
+        this._intlChanges = _intl.changes.subscribe(() => {
+            // Trigger change detection when labels change
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this._intlChanges.unsubscribe();
+    }
+    get currentPage() {
+        return this.pageIndex + 1;
+    }
+    get totalPages() {
+        if (this.pageSize === 0)
+            return 0;
+        return Math.ceil(this.length / this.pageSize);
+    }
+    get hasPreviousPage() {
+        return this.pageIndex > 0;
+    }
+    get hasNextPage() {
+        return this.pageIndex < this.totalPages - 1;
+    }
+    get displayPages() {
+        const current = this.currentPage;
+        const total = this.totalPages;
+        const pages = [];
+        if (total <= 1) {
+            if (total === 1) {
+                pages.push(1);
+            }
+            return pages;
+        }
+        if (total <= 5) {
+            for (let i = 1; i <= total; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            if (current <= 3) {
+                pages.push(1, 2, 3, '...', total);
+            }
+            else if (current >= total - 2) {
+                for (let i = total - 4; i <= total; i++) {
+                    pages.push(i);
+                }
+            }
+            else {
+                const startPage = current - 1;
+                for (let i = startPage; i <= current + 2 && i <= total; i++) {
+                    pages.push(i);
+                }
+                if (current + 2 < total - 1) {
+                    pages.push('...');
+                }
+                if (current + 2 < total) {
+                    pages.push(total);
+                }
+            }
+        }
+        return pages;
+    }
+    trackByPage(index, item) {
+        return item;
+    }
+    /** Check if item is a number (for template use only) */
+    typeof(value) {
+        return typeof value;
+    }
+    /** Navigate to previous page */
+    previousPage() {
+        if (this.hasPreviousPage) {
+            this.changePage(this.pageIndex - 1);
+        }
+    }
+    /** Navigate to next page */
+    nextPage() {
+        if (this.hasNextPage) {
+            this.changePage(this.pageIndex + 1);
+        }
+    }
+    /** Navigate to specific page */
+    goToPage(page) {
+        if (typeof page === 'number' && page >= 1 && page <= this.totalPages) {
+            this.changePage(page - 1);
+        }
+    }
+    /** Handle page size change */
+    onPageSizeChange(event) {
+        const target = event.target;
+        const newPageSize = parseInt(target.value, 10);
+        if (newPageSize !== this.pageSize) {
+            this.changePage(0, newPageSize);
+        }
+    }
+    changePage(pageIndex, pageSize) {
+        const previousPageIndex = this.pageIndex;
+        const event = {
+            pageIndex,
+            previousPageIndex,
+            pageSize: pageSize || this.pageSize,
+            length: this.length
+        };
+        this.page.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorComponent, deps: [{ token: MatchaPaginatorIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: MatchaPaginatorComponent, isStandalone: false, selector: "matcha-paginator", inputs: { pageIndex: "pageIndex", length: "length", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", color: "color" }, outputs: { page: "page" }, ngImport: i0, template: "<div class=\"matcha-paginator flex-row flex-align-center gap-16\">\n    <!-- Items per page selector -->\n    <div class=\"flex-row flex-align-center gap-8\" *ngIf=\"pageSizeOptions && pageSizeOptions.length > 0\">\n      <span class=\"text-sm color-placeholder\">{{ _intl.itemsPerPageLabel }}</span>\n      <div class=\"page-size-selector\">\n        <select \n          class=\"page-size-select radius-8\" \n          [value]=\"pageSize\" \n          (change)=\"onPageSizeChange($event)\">\n          <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">\n            {{ option }}\n          </option>\n        </select>\n        <div class=\"select-icon\">\n          <matcha-icon name=\"action_arrow_down\" size=\"sm\" color=\"fg\"></matcha-icon>\n        </div>\n      </div>\n    </div>\n  \n    <!-- Page navigation -->\n    <div class=\"flex-row flex-align-center gap-8\">\n      <!-- Previous page button -->\n      <button \n        class=\"nav-button\" \n        [disabled]=\"!hasPreviousPage\"\n        (click)=\"previousPage()\"\n        [attr.aria-label]=\"_intl.previousPageLabel\">\n        <matcha-icon name=\"action_arrow_left\" size=\"sm\"></matcha-icon>\n      </button>\n  \n      <!-- Page numbers -->\n      <div class=\"flex-row flex-align-center gap-4\">\n        <ng-container *ngFor=\"let page of displayPages; trackBy: trackByPage\">\n          <button \n            *ngIf=\"typeof page === 'number'; else ellipsis\"\n            class=\"page-button\"\n            [class.active]=\"page === currentPage\"\n            [class.radius-full]=\"page === currentPage\"\n            [ngClass]=\"page === currentPage ? color : ''\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-label]=\"'Ir para p\u00E1gina ' + page\">\n            {{ page }}\n          </button>\n          <ng-template #ellipsis>\n            <span class=\"ellipsis\">{{ page }}</span>\n          </ng-template>\n        </ng-container>\n      </div>\n  \n      <!-- Next page button -->\n      <button \n        class=\"nav-button\" \n        [disabled]=\"!hasNextPage\"\n        (click)=\"nextPage()\"\n        [attr.aria-label]=\"_intl.nextPageLabel\">\n        <matcha-icon name=\"action_arrow_right\" size=\"sm\"></matcha-icon>\n      </button>\n    </div>\n  </div>", 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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-paginator', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"matcha-paginator flex-row flex-align-center gap-16\">\n    <!-- Items per page selector -->\n    <div class=\"flex-row flex-align-center gap-8\" *ngIf=\"pageSizeOptions && pageSizeOptions.length > 0\">\n      <span class=\"text-sm color-placeholder\">{{ _intl.itemsPerPageLabel }}</span>\n      <div class=\"page-size-selector\">\n        <select \n          class=\"page-size-select radius-8\" \n          [value]=\"pageSize\" \n          (change)=\"onPageSizeChange($event)\">\n          <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">\n            {{ option }}\n          </option>\n        </select>\n        <div class=\"select-icon\">\n          <matcha-icon name=\"action_arrow_down\" size=\"sm\" color=\"fg\"></matcha-icon>\n        </div>\n      </div>\n    </div>\n  \n    <!-- Page navigation -->\n    <div class=\"flex-row flex-align-center gap-8\">\n      <!-- Previous page button -->\n      <button \n        class=\"nav-button\" \n        [disabled]=\"!hasPreviousPage\"\n        (click)=\"previousPage()\"\n        [attr.aria-label]=\"_intl.previousPageLabel\">\n        <matcha-icon name=\"action_arrow_left\" size=\"sm\"></matcha-icon>\n      </button>\n  \n      <!-- Page numbers -->\n      <div class=\"flex-row flex-align-center gap-4\">\n        <ng-container *ngFor=\"let page of displayPages; trackBy: trackByPage\">\n          <button \n            *ngIf=\"typeof page === 'number'; else ellipsis\"\n            class=\"page-button\"\n            [class.active]=\"page === currentPage\"\n            [class.radius-full]=\"page === currentPage\"\n            [ngClass]=\"page === currentPage ? color : ''\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-label]=\"'Ir para p\u00E1gina ' + page\">\n            {{ page }}\n          </button>\n          <ng-template #ellipsis>\n            <span class=\"ellipsis\">{{ page }}</span>\n          </ng-template>\n        </ng-container>\n      </div>\n  \n      <!-- Next page button -->\n      <button \n        class=\"nav-button\" \n        [disabled]=\"!hasNextPage\"\n        (click)=\"nextPage()\"\n        [attr.aria-label]=\"_intl.nextPageLabel\">\n        <matcha-icon name=\"action_arrow_right\" size=\"sm\"></matcha-icon>\n      </button>\n    </div>\n  </div>" }]
+        }], ctorParameters: () => [{ type: MatchaPaginatorIntl }, { type: i0.ChangeDetectorRef }], propDecorators: { pageIndex: [{
+                type: Input
+            }], length: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], page: [{
+                type: Output
+            }] } });
+
+class MatchaTooltipDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.tooltipText = '';
+        this.tooltipDisabled = false;
+        this.preferAbove = false;
+        this.preferBelow = false;
+        this.preferLeft = false;
+        this.preferRight = false;
+        this.tooltipEnableClose = false;
+        this.tooltipElement = null;
+        this.documentClickListener = null;
+    }
+    onMouseEnter() {
+        if (this.tooltipEnableClose) {
+            // Em modo de clique/tap, não abre via hover
+            return;
+        }
+        if (this.tooltipDisabled || this.tooltipElement || !this.tooltipText) {
+            return;
+        }
+        this.createTooltip();
+    }
+    onMouseLeave() {
+        if (!this.tooltipEnableClose && this.tooltipElement) {
+            this.destroyTooltip();
+        }
+    }
+    onClick(event) {
+        if (!this.tooltipEnableClose) {
+            return;
+        }
+        event.stopPropagation();
+        if (!this.tooltipElement && !this.tooltipDisabled && this.tooltipText) {
+            this.createTooltip();
+        }
+    }
+    createTooltip() {
+        // Cria o tooltip e adiciona a classe base
+        this.tooltipElement = this.renderer.createElement('div');
+        this.renderer.addClass(this.tooltipElement, 'matcha-tooltip-content');
+        // Define o conteúdo do tooltip
+        this.tooltipElement.textContent = this.tooltipText;
+        // Define estilos iniciais para medição
+        this.renderer.setStyle(this.tooltipElement, 'position', 'absolute');
+        this.renderer.setStyle(this.tooltipElement, 'top', '0');
+        this.renderer.setStyle(this.tooltipElement, 'left', '0');
+        this.renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
+        this.renderer.appendChild(document.body, this.tooltipElement);
+        // Se tooltipEnableClose estiver ativo, adiciona o botão de fechar
+        if (this.tooltipEnableClose) {
+            const closeButton = this.renderer.createElement('div');
+            this.renderer.addClass(closeButton, 'matcha-tooltip-close');
+            this.renderer.appendChild(this.tooltipElement, closeButton);
+            this.renderer.listen(closeButton, 'click', (e) => {
+                e.stopPropagation();
+                this.destroyTooltip();
+            });
+            this.documentClickListener = this.renderer.listen('document', 'click', (e) => {
                 if (this.tooltipElement && !this.tooltipElement.contains(e.target)) {
                     this.destroyTooltip();
                 }
@@ -4520,98 +5404,217 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 }]
         }] });
 
-class MatchaOptionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionModule, declarations: [MatchaOptionComponent], imports: [CommonModule], exports: [MatchaOptionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaOptionComponent],
-                    imports: [CommonModule],
-                    exports: [MatchaOptionComponent],
-                }]
-        }] });
-
-class MatchaAutocompleteDirective {
-    displayAutocomplete() {
-        this.matchaOptionService.setCanShowOptions(true);
+class MatchaAutocompleteTriggerDirective {
+    constructor(el) {
+        this.el = el;
+        this.subs = new Subscription();
     }
-    hideAutocomplete() {
-        setTimeout(() => {
-            const canShowAutocomplete = this.matchaOptionService.getCanShowOptions();
-            if (canShowAutocomplete) {
-                this.matchaOptionService.setCanShowOptions(false);
-            }
-        }, 300);
+    ngAfterViewInit() {
+        if (!this.panel) {
+            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 - usando click para evitar conflito com focus
+        const clickSub = fromEvent(document, 'click').pipe(filter((ev) => {
+            const target = ev.target;
+            const isInsideInput = this.el.nativeElement.contains(target) || this.el.nativeElement === target;
+            const isInsidePanel = this.panel?.elRef?.nativeElement?.contains?.(target);
+            console.log('MatchaAutocomplete: Click outside check', {
+                target: target,
+                inputElement: this.el.nativeElement,
+                isInsideInput,
+                isInsidePanel,
+                shouldClose: !isInsideInput && !isInsidePanel
+            });
+            // 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);
+    }
+    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
     }
-    onArrowDown(event) {
-        switch (event.key) {
+    onInput(e) {
+        // 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();
+    }
+    onKeydown(ev) {
+        if (!this.panel)
+            return;
+        switch (ev.key) {
             case 'ArrowDown':
-                this.matchaOptionService.changeActiveOption(1);
+                ev.preventDefault();
+                this.panel.highlightNext();
                 break;
             case 'ArrowUp':
-                this.matchaOptionService.changeActiveOption(-1);
+                ev.preventDefault();
+                this.panel.highlightPrevious();
                 break;
             case 'Enter':
-                this.matchaOptionService.selectActiveOption();
+                ev.preventDefault();
+                this.panel.selectActive();
+                // pega o value escolhido e escreve no input
+                setTimeout(() => {
+                    const val = this.panel.getSelectedValue();
+                    if (val !== undefined)
+                        this.writeValueToInput(val);
+                });
                 break;
-            default:
+            case 'Escape':
+                ev.preventDefault();
+                this.panel.closePanel();
                 break;
         }
     }
-    constructor(ngControl, _elementRef, matchaOptionService) {
-        this.ngControl = ngControl;
-        this._elementRef = _elementRef;
-        this.matchaOptionService = matchaOptionService;
-    }
-    ngOnInit() {
-        this.matchaOptionService.selectedOption$.subscribe((option) => {
-            this._updateInputValue(option);
-        });
-    }
-    _updateInputValue(selectedOption) {
-        if (this.ngControl.control) {
-            this.ngControl.control.setValue(selectedOption);
-            this.ngControl.control.markAsDirty();
-            this.matchaOptionService.setCanShowOptions(false);
-            this._elementRef.nativeElement.blur();
+    // Se uma opção for selecionada via click (o matcha-option notifica o pai que faz close),
+    // lemos selectedValue e escrevemos no input. Como o selectOption do painel fecha imediatamente,
+    // precisamos observar mudanças no DOM/QueryList ou checar logo após close.
+    // Simples solução: observar clicks nas options via delegation:
+    onDocClick(ev) {
+        const target = ev.target;
+        // if clicked inside an option that belongs to this panel
+        if (!this.panel || !this.panel.open) {
+            // se painel fechado, pode ter sido selecionado; então buscarmos selected value
+            setTimeout(() => {
+                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.4", ngImport: i0, type: MatchaAutocompleteDirective, deps: [{ token: i1$1.NgControl }, { token: i0.ElementRef }, { token: MatchaOptionService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: MatchaAutocompleteDirective, isStandalone: false, selector: "[matchaAutocomplete]", inputs: { matchaAutocomplete: "matchaAutocomplete" }, host: { listeners: { "focus": "displayAutocomplete()", "focusout": "hideAutocomplete()", "keydown": "onArrowDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaAutocompleteTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", 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.4", ngImport: i0, type: MatchaAutocompleteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaAutocompleteTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaAutocomplete]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i1$1.NgControl }, { type: i0.ElementRef }, { type: MatchaOptionService }], propDecorators: { matchaAutocomplete: [{
-                type: Input
-            }], displayAutocomplete: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { panel: [{
+                type: Input,
+                args: ['matchaAutocomplete']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onFocus: [{
                 type: HostListener,
                 args: ['focus']
-            }], hideAutocomplete: [{
+            }], onInput: [{
                 type: HostListener,
-                args: ['focusout']
-            }], onArrowDown: [{
+                args: ['input', ['$event']]
+            }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
+            }], onDocClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
+class MatchaOptionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionModule, declarations: [MatchaOptionComponent], imports: [CommonModule], exports: [MatchaOptionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaOptionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaOptionComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        MatchaOptionComponent
+                    ]
+                }]
+        }] });
+
+class MatchaPanelModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MatchaPanelModule, declarations: [MatchaPanelComponent], imports: [CommonModule], exports: [MatchaPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPanelModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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.4", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteComponent, MatchaAutocompleteDirective], imports: [CommonModule, FormsModule, MatchaOptionModule], exports: [MatchaAutocompleteComponent, MatchaAutocompleteDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaAutocompleteModule, imports: [CommonModule, FormsModule, MatchaOptionModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteComponent,
+            MatchaAutocompleteTriggerDirective], imports: [CommonModule,
+            MatchaOptionModule,
+            MatchaPanelModule], exports: [MatchaAutocompleteComponent,
+            MatchaAutocompleteTriggerDirective,
+            MatchaOptionModule // Re-exporta para conveniência
+        ] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaAutocompleteModule, providers: [
+            // Provider para permitir injeção da interface MatchaOptionParent
+            { provide: MATCHA_OPTION_PARENT, useExisting: MatchaAutocompleteComponent }
+        ], imports: [CommonModule,
+            MatchaOptionModule,
+            MatchaPanelModule, MatchaOptionModule // Re-exporta para conveniência
+        ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MatchaAutocompleteComponent, MatchaAutocompleteDirective],
-                    imports: [CommonModule, FormsModule, MatchaOptionModule],
-                    exports: [MatchaAutocompleteComponent, MatchaAutocompleteDirective],
+                    declarations: [
+                        MatchaAutocompleteComponent,
+                        MatchaAutocompleteTriggerDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatchaOptionModule,
+                        MatchaPanelModule
+                    ],
+                    exports: [
+                        MatchaAutocompleteComponent,
+                        MatchaAutocompleteTriggerDirective,
+                        MatchaOptionModule // Re-exporta para conveniência
+                    ],
+                    providers: [
+                        // Provider para permitir injeção da interface MatchaOptionParent
+                        { provide: MATCHA_OPTION_PARENT, useExisting: MatchaAutocompleteComponent }
+                    ]
                 }]
         }] });
 
@@ -4713,41 +5716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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.4", 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.4", type: MatchaDatepickerDirective, isStandalone: false, selector: "[matcha-datepicker]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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.4", ngImport: i0, type: MatchaDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MatchaDatepickerModule, declarations: [MatchaDatepickerDirective], exports: [MatchaDatepickerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaDatepickerModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaDatepickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaDatepickerDirective],
-                    imports: [],
-                    exports: [MatchaDatepickerDirective],
+                    exports: [MatchaChipsDirective]
                 }]
         }] });
 
@@ -4929,35 +5898,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 type: Input
             }] } });
 
-class MatchaPaginatorDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-paginator');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: MatchaPaginatorDirective, isStandalone: false, selector: "[matchaPaginator]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaPaginator]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
 class MatchaPaginatorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorModule, declarations: [MatchaPaginatorDirective], imports: [CommonModule], exports: [MatchaPaginatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorModule, imports: [CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorModule, declarations: [MatchaPaginatorComponent], imports: [CommonModule, MatchaIconModule], exports: [MatchaPaginatorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorModule, providers: [MatchaPaginatorIntl], imports: [CommonModule, MatchaIconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaPaginatorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MatchaPaginatorDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaPaginatorDirective],
+                    declarations: [MatchaPaginatorComponent],
+                    imports: [CommonModule, MatchaIconModule],
+                    exports: [MatchaPaginatorComponent],
+                    providers: [MatchaPaginatorIntl]
                 }]
         }] });
 
@@ -4997,38 +5949,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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.4", 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.4", type: MatchaSelectDirective, isStandalone: false, selector: "[matcha-select]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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.4", ngImport: i0, type: MatchaSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MatchaSelectModule, declarations: [MatchaSelectDirective], imports: [CommonModule], exports: [MatchaSelectDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaSelectModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaSelectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaSelectDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaSelectDirective],
-                }]
-        }] });
-
 class MatchaSidenavDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
@@ -5497,14 +6417,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 }]
         }] });
 
+class MatchaDrawerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", 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.4", ngImport: i0, type: MatchaDrawerModule, imports: [CommonModule,
+            MatchaButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaDrawerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaDrawerComponent,
+                        MatchaDrawerContainerComponent,
+                        MatchaDrawerContentComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatchaButtonModule
+                    ],
+                    exports: [
+                        MatchaDrawerComponent,
+                        MatchaDrawerContainerComponent,
+                        MatchaDrawerContentComponent
+                    ]
+                }]
+        }] });
+
 class MatchaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatchaAccordionModule,
-            MatchaOptionModule,
             MatchaAutocompleteModule,
+            MatchaOptionModule,
+            MatchaPanelModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5512,7 +6464,6 @@ class MatchaComponentsModule {
             MatchaCheckboxModule,
             MatchaRadioModule,
             MatchaChipsModule,
-            MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
             MatchaFormFieldModule,
@@ -5528,7 +6479,6 @@ class MatchaComponentsModule {
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSelectModule,
             MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
@@ -5544,8 +6494,11 @@ class MatchaComponentsModule {
             MatchaDateModule,
             MatchaTimeModule,
             MatchaDropListModule,
-            MatchaPageLayoutModule], exports: [MatchaAccordionModule,
+            MatchaPageLayoutModule,
+            MatchaDrawerModule], exports: [MatchaAccordionModule,
             MatchaAutocompleteModule,
+            MatchaOptionModule,
+            MatchaPanelModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5553,7 +6506,6 @@ class MatchaComponentsModule {
             MatchaCheckboxModule,
             MatchaRadioModule,
             MatchaChipsModule,
-            MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
             MatchaFormFieldModule,
@@ -5566,11 +6518,9 @@ class MatchaComponentsModule {
             MatchaMasonryModule,
             MatchaMenuModule,
             MatchaModalModule,
-            MatchaOptionModule,
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSelectModule,
             MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
@@ -5587,13 +6537,15 @@ class MatchaComponentsModule {
             MatchaTimeModule,
             MatchaDropListModule,
             MatchaPageLayoutModule,
-            MatchaAvatarModule] }); }
+            MatchaAvatarModule,
+            MatchaDrawerModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatchaAccordionModule,
-            MatchaOptionModule,
             MatchaAutocompleteModule,
+            MatchaOptionModule,
+            MatchaPanelModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5601,7 +6553,6 @@ class MatchaComponentsModule {
             MatchaCheckboxModule,
             MatchaRadioModule,
             MatchaChipsModule,
-            MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
             MatchaFormFieldModule,
@@ -5617,7 +6568,6 @@ class MatchaComponentsModule {
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSelectModule,
             MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
@@ -5633,8 +6583,11 @@ class MatchaComponentsModule {
             MatchaDateModule,
             MatchaTimeModule,
             MatchaDropListModule,
-            MatchaPageLayoutModule, MatchaAccordionModule,
+            MatchaPageLayoutModule,
+            MatchaDrawerModule, MatchaAccordionModule,
             MatchaAutocompleteModule,
+            MatchaOptionModule,
+            MatchaPanelModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5642,7 +6595,6 @@ class MatchaComponentsModule {
             MatchaCheckboxModule,
             MatchaRadioModule,
             MatchaChipsModule,
-            MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
             MatchaFormFieldModule,
@@ -5655,11 +6607,9 @@ class MatchaComponentsModule {
             MatchaMasonryModule,
             MatchaMenuModule,
             MatchaModalModule,
-            MatchaOptionModule,
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSelectModule,
             MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
@@ -5676,7 +6626,8 @@ class MatchaComponentsModule {
             MatchaTimeModule,
             MatchaDropListModule,
             MatchaPageLayoutModule,
-            MatchaAvatarModule] }); }
+            MatchaAvatarModule,
+            MatchaDrawerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MatchaComponentsModule, decorators: [{
             type: NgModule,
@@ -5687,8 +6638,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         FormsModule,
                         ReactiveFormsModule,
                         MatchaAccordionModule,
-                        MatchaOptionModule,
                         MatchaAutocompleteModule,
+                        MatchaOptionModule,
+                        MatchaPanelModule,
                         MatchaBadgeModule,
                         MatchaButtonModule,
                         MatchaButtonToggleModule,
@@ -5696,7 +6648,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         MatchaCheckboxModule,
                         MatchaRadioModule,
                         MatchaChipsModule,
-                        MatchaDatepickerModule,
                         MatchaDividerModule,
                         MatchaElevationModule,
                         MatchaFormFieldModule,
@@ -5712,7 +6663,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         MatchaPaginatorModule,
                         MatchaProgressBarModule,
                         MatchaRippleModule,
-                        MatchaSelectModule,
                         MatchaSidenavModule,
                         MatchaSlideToggleModule,
                         MatchaSliderModule,
@@ -5728,10 +6678,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         MatchaDateModule,
                         MatchaTimeModule,
                         MatchaDropListModule,
-                        MatchaPageLayoutModule
+                        MatchaPageLayoutModule,
+                        MatchaDrawerModule
                     ],
                     exports: [MatchaAccordionModule,
                         MatchaAutocompleteModule,
+                        MatchaOptionModule,
+                        MatchaPanelModule,
                         MatchaBadgeModule,
                         MatchaButtonModule,
                         MatchaButtonToggleModule,
@@ -5739,7 +6692,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         MatchaCheckboxModule,
                         MatchaRadioModule,
                         MatchaChipsModule,
-                        MatchaDatepickerModule,
                         MatchaDividerModule,
                         MatchaElevationModule,
                         MatchaFormFieldModule,
@@ -5752,11 +6704,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         MatchaMasonryModule,
                         MatchaMenuModule,
                         MatchaModalModule,
-                        MatchaOptionModule,
                         MatchaPaginatorModule,
                         MatchaProgressBarModule,
                         MatchaRippleModule,
-                        MatchaSelectModule,
                         MatchaSidenavModule,
                         MatchaSlideToggleModule,
                         MatchaSliderModule,
@@ -5773,7 +6723,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         MatchaTimeModule,
                         MatchaDropListModule,
                         MatchaPageLayoutModule,
-                        MatchaAvatarModule
+                        MatchaAvatarModule,
+                        MatchaDrawerModule
                     ],
                 }]
         }] });
@@ -5815,18 +6766,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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';
@@ -5841,5 +6788,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAvatarComponent, MatchaAvatarModule, MatchaBadgeDirective, MatchaBadgeModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, 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, MatchaOptionService, 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, MatchaPaginatorComponent, MatchaPaginatorIntl, 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