matcha-components 20.3.0 → 20.5.0

package/fesm2022/matcha-components.mjs

@@ -1,11 +1,10 @@
 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, Input, Component, ContentChildren, ElementRef, Renderer2, HostBinding, Inject, HostListener, ContentChild, Directive, forwardRef, ChangeDetectionStrategy, TemplateRef, ViewChild, 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';
 
 const customAnimation = animation([
@@ -1234,6 +1233,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", 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() {
+        return this.isOpen && this.mode === 'push' ? this.width : '0px';
+    }
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.isOpen = false;
+        this.mode = 'push'; // push empurra o conteúdo, overlay sobrepõe
+        this.position = 'left';
+        this.width = '280px';
+        this.isOpenChange = new EventEmitter();
+        this.openChange = new EventEmitter();
+    }
+    ngOnInit() {
+        this.renderer.addClass(this.elementRef.nativeElement, 'matcha-drawer');
+        // Configurar classes utilitárias baseadas no modo
+        if (this.mode === 'overlay') {
+            this.renderer.addClass(this.elementRef.nativeElement, 'position-fixed');
+            this.renderer.addClass(this.elementRef.nativeElement, 'place-top');
+            this.renderer.addClass(this.elementRef.nativeElement, 'z-index-11'); // Aumentado para ficar acima do backdrop
+            this.renderer.setStyle(this.elementRef.nativeElement, 'height', '100vh');
+        }
+        else {
+            this.renderer.addClass(this.elementRef.nativeElement, 'position-relative');
+        }
+        // Configurar posição left/right
+        if (this.position === 'left') {
+            this.renderer.addClass(this.elementRef.nativeElement, 'place-left');
+        }
+        else {
+            this.renderer.setStyle(this.elementRef.nativeElement, 'right', '0');
+        }
+    }
+    ngOnDestroy() {
+        // Cleanup se necessário
+    }
+    toggle() {
+        this.isOpen = !this.isOpen;
+        this.isOpenChange.emit(this.isOpen);
+        this.openChange.emit(this.isOpen);
+    }
+    open() {
+        if (!this.isOpen) {
+            this.isOpen = true;
+            this.isOpenChange.emit(this.isOpen);
+            this.openChange.emit(this.isOpen);
+        }
+    }
+    close() {
+        if (this.isOpen) {
+            this.isOpen = false;
+            this.isOpenChange.emit(this.isOpen);
+            this.openChange.emit(this.isOpen);
+        }
+    }
+    get animationState() {
+        return this.isOpen ? this.position : 'void';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaDrawerComponent, isStandalone: false, selector: "matcha-drawer", inputs: { isOpen: "isOpen", mode: "mode", position: "position", width: "width" }, outputs: { isOpenChange: "isOpenChange", openChange: "openChange" }, host: { properties: { "class": "this.drawerClasses", "style.width": "this.drawerWidth" } }, ngImport: i0, template: "<!-- Backdrop para modo overlay (renderizado primeiro para ficar atr\u00E1s) -->\n<div *ngIf=\"mode === 'overlay' && isOpen\"\n     class=\"matcha-drawer-backdrop position-fixed place-top place-left z-index-9 w-100-p h-100-p\"\n     [@fadeInOut]=\"isOpen ? '1' : '0'\"\n     (click)=\"close()\">\n</div>\n\n<!-- Drawer Content Container -->\n<div class=\"matcha-drawer-container\"\n     [@slideIn]=\"animationState\"\n     [class.matcha-drawer-overlay-mode]=\"mode === 'overlay'\"\n     [class.matcha-drawer-push-mode]=\"mode === 'push'\"\n     [style.width]=\"width\">\n\n  <!-- Drawer Header (opcional) -->\n  <div class=\"matcha-drawer-header\" *ngIf=\"isOpen\">\n    <ng-content select=\"[slot=header]\"></ng-content>\n\n    <!-- Close button quando em modo overlay -->\n    <button *ngIf=\"mode === 'overlay'\"\n            matcha-button\n            icon\n            size=\"small\"\n            basic\n            (click)=\"close()\"\n            class=\"matcha-drawer-close-btn place-right\">\n      <span class=\"i-matcha-close\"></span>\n    </button>\n  </div>\n\n  <!-- Drawer Content -->\n  <div class=\"matcha-drawer-content\" *ngIf=\"isOpen\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Drawer Footer (opcional) -->\n  <div class=\"matcha-drawer-footer\" *ngIf=\"isOpen\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;transition:width .3s cubic-bezier(.4,0,.2,1)}.matcha-drawer-container{height:100%;transition:transform .3s cubic-bezier(.4,0,.2,1)}.matcha-drawer-push-mode{background-color:var(--color-background);border-right:1px solid var(--color-divider)}.matcha-drawer-overlay-mode{background-color:var(--color-card);box-shadow:var(--elevation-4);border-radius:0 8px 8px 0;position:relative;z-index:11}.matcha-drawer-header{padding:16px;border-bottom:1px solid var(--color-divider);position:relative;z-index:1}.matcha-drawer-close-btn{position:absolute;top:8px;right:8px}.matcha-drawer-content{padding:16px;overflow-y:auto;max-height:calc(100vh - 100px);position:relative;z-index:1}.matcha-drawer-footer{padding:16px;border-top:1px solid var(--color-divider);margin-top:auto;position:relative;z-index:1}.matcha-drawer-backdrop{background-color:#00000052;cursor:pointer}:host(.matcha-drawer-right) .matcha-drawer-overlay-mode{border-radius:8px 0 0 8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "color", "basic", "outline", "alpha", "pill", "link", "icon"] }], animations: createAnimations }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-drawer', animations: createAnimations, standalone: false, template: "<!-- Backdrop para modo overlay (renderizado primeiro para ficar atr\u00E1s) -->\n<div *ngIf=\"mode === 'overlay' && isOpen\"\n     class=\"matcha-drawer-backdrop position-fixed place-top place-left z-index-9 w-100-p h-100-p\"\n     [@fadeInOut]=\"isOpen ? '1' : '0'\"\n     (click)=\"close()\">\n</div>\n\n<!-- Drawer Content Container -->\n<div class=\"matcha-drawer-container\"\n     [@slideIn]=\"animationState\"\n     [class.matcha-drawer-overlay-mode]=\"mode === 'overlay'\"\n     [class.matcha-drawer-push-mode]=\"mode === 'push'\"\n     [style.width]=\"width\">\n\n  <!-- Drawer Header (opcional) -->\n  <div class=\"matcha-drawer-header\" *ngIf=\"isOpen\">\n    <ng-content select=\"[slot=header]\"></ng-content>\n\n    <!-- Close button quando em modo overlay -->\n    <button *ngIf=\"mode === 'overlay'\"\n            matcha-button\n            icon\n            size=\"small\"\n            basic\n            (click)=\"close()\"\n            class=\"matcha-drawer-close-btn place-right\">\n      <span class=\"i-matcha-close\"></span>\n    </button>\n  </div>\n\n  <!-- Drawer Content -->\n  <div class=\"matcha-drawer-content\" *ngIf=\"isOpen\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Drawer Footer (opcional) -->\n  <div class=\"matcha-drawer-footer\" *ngIf=\"isOpen\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;transition:width .3s cubic-bezier(.4,0,.2,1)}.matcha-drawer-container{height:100%;transition:transform .3s cubic-bezier(.4,0,.2,1)}.matcha-drawer-push-mode{background-color:var(--color-background);border-right:1px solid var(--color-divider)}.matcha-drawer-overlay-mode{background-color:var(--color-card);box-shadow:var(--elevation-4);border-radius:0 8px 8px 0;position:relative;z-index:11}.matcha-drawer-header{padding:16px;border-bottom:1px solid var(--color-divider);position:relative;z-index:1}.matcha-drawer-close-btn{position:absolute;top:8px;right:8px}.matcha-drawer-content{padding:16px;overflow-y:auto;max-height:calc(100vh - 100px);position:relative;z-index:1}.matcha-drawer-footer{padding:16px;border-top:1px solid var(--color-divider);margin-top:auto;position:relative;z-index:1}.matcha-drawer-backdrop{background-color:#00000052;cursor:pointer}:host(.matcha-drawer-right) .matcha-drawer-overlay-mode{border-radius:8px 0 0 8px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { isOpen: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], isOpenChange: [{
+                type: Output
+            }], openChange: [{
+                type: Output
+            }], drawerClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], drawerWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }] } });
+
 class MatchaIconComponent {
     constructor() {
         this.name = '';
@@ -2131,15 +2218,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", 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 +2266,7 @@ class MatchaSpinnerComponent {
         return this.circumference - (progress / 100) * this.circumference;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", 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.1", 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.1", 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.1", ngImport: i0, type: MatchaSpinnerComponent, decorators: [{
             type: Component,
@@ -2187,11 +2279,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", 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']
@@ -2282,147 +2383,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", 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.1", ngImport: i0, type: MatchaOptionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaOptionService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", 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.1", 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.1", 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.1", 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.1", 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.1", 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.1", 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;
@@ -3697,6 +3657,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
             args: [{ selector: 'matcha-page-layout', standalone: false, template: "<div class=\"page-layout carded fullwidth\">\n    <!-- TOP BACKGROUND -->\n    <div class=\"top-bg\"></div>\n    <!--/ TOP BACKGROUND -->\n\n    <!-- CENTER -->\n    <div class=\"center pt-24 gap-16\">\n        <!-- CONTENT CARD -->\n        <div class=\"content-card flatten flex-column h-100-p\">\n            <!-- CONTENT -->\n            <div class=\"content flex-column h-100-p\">\n                <div class=\"content-card card-flat flex-column h-100-p background-bg border-radius-0 pb-16\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [":host{display:flex;flex-direction:column;width:100%}\n"] }]
         }] });
 
+/**
+ * Token de injeção para MatchaOptionParent
+ * Usado para injetar o componente pai no matcha-option
+ */
+const MATCHA_OPTION_PARENT = Symbol('MatchaOptionParent');
+
+class 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();
+    }
+    onClick() {
+        if (this.disabled)
+            return;
+        // ✅ Notifica o pai (se houver) - qualquer componente que implemente MatchaOptionParent
+        this.parent?.selectOption(this);
+        // ✅ Emite eventos para uso standalone
+        this.optionClick.emit(this.value);
+        this.optionSelect.emit(this);
+    }
+    onKeydown(ev) {
+        if (ev.key === 'Enter' || ev.key === ' ') {
+            ev.preventDefault();
+            this.onClick();
+        }
+    }
+    // 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.1", 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.1", 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.1", 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 MatchaAutocompleteComponent {
+    constructor(elRef, renderer, cdr) {
+        this.elRef = elRef;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.open = false;
+        this.panelStyle = {};
+        this.activeIndex = -1;
+    }
+    ngAfterContentInit() {
+        // quando options mudarem, resetamos estado relevante
+        this.options.changes.subscribe(() => {
+            if (this.open) {
+                this.resetActive();
+                this.cdr.detectChanges();
+            }
+        });
+    }
+    attachTo(input) {
+        this.triggerElement = input;
+    }
+    openPanel() {
+        if (!this.triggerElement)
+            return;
+        this.open = true;
+        this.setPanelPosition();
+        this.resetActive();
+    }
+    closePanel() {
+        this.open = false;
+        this.activeIndex = -1;
+        this.updateSelectedStates();
+    }
+    togglePanel() {
+        this.open ? this.closePanel() : this.openPanel();
+    }
+    setPanelPosition() {
+        if (!this.triggerElement)
+            return;
+        const rect = this.triggerElement.getBoundingClientRect();
+        const top = rect.bottom + window.scrollY;
+        const left = rect.left + window.scrollX;
+        this.panelStyle = {
+            position: 'absolute',
+            top: `${top}px`,
+            left: `${left}px`,
+            minWidth: `${rect.width}px`
+        };
+    }
+    resetActive() {
+        this.activeIndex = -1;
+        this.updateSelectedStates();
+    }
+    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) {
+        this.options.forEach(o => o.selected = (o === option));
+        // Fechamos painel automaticamente
+        this.closePanel();
+        // indireto: a directive pode ler o value via getSelectedValue()
+    }
+    getSelectedValue() {
+        const selected = this.options.find(o => o.selected);
+        return selected ? selected.value : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], ngImport: i0, template: `
+    <div class="matcha-autocomplete-panel" *ngIf="open" [ngStyle]="panelStyle" role="listbox">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{position:absolute;z-index:1000;display:block}.matcha-autocomplete-panel{box-shadow:0 4px 10px #0000001f;border-radius:6px;background:#fff;max-height:280px;overflow:auto;min-width:160px;display:flex;flex-direction:column}.matcha-option{padding:8px 12px;cursor:pointer}.matcha-option[aria-selected=true]{background:#00000014}.matcha-option[disabled]{opacity:.5;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-autocomplete', template: `
+    <div class="matcha-autocomplete-panel" *ngIf="open" [ngStyle]="panelStyle" role="listbox">
+      <ng-content></ng-content>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, standalone: false, styles: [":host{position:absolute;z-index:1000;display:block}.matcha-autocomplete-panel{box-shadow:0 4px 10px #0000001f;border-radius:6px;background:#fff;max-height:280px;overflow:auto;min-width:160px;display:flex;flex-direction:column}.matcha-option{padding:8px 12px;cursor:pointer}.matcha-option[aria-selected=true]{background:#00000014}.matcha-option[disabled]{opacity:.5;cursor:default}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
+                type: ContentChildren,
+                args: [MatchaOptionComponent, { descendants: true }]
+            }] } });
+
 class MatchaTooltipDirective {
     constructor(el, renderer) {
         this.el = el;
@@ -4448,98 +4602,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 }]
         }] });
 
-class MatchaOptionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaOptionModule, declarations: [MatchaOptionComponent], imports: [CommonModule], exports: [MatchaOptionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaOptionModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", 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
+        const clickSub = fromEvent(document, 'click').pipe(filter((ev) => {
+            const target = ev.target;
+            return !this.el.nativeElement.contains(target) && !(this.panel?.elRef?.nativeElement?.contains?.(target));
+        })).subscribe(() => this.panel.closePanel());
+        this.subs.add(clickSub);
     }
-    onArrowDown(event) {
-        switch (event.key) {
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    writeValueToInput(value) {
+        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);
+    }
+    onFocus() {
+        // ao focar podemos abrir (ou não — depende do UX desejado)
+        this.panel.openPanel();
+    }
+    onInput(e) {
+        // se o usuário digitar, apenas reabre/posiciona painel. O filtro de opções geralmente é controlado pelo componente pai
+        this.panel.setPanelPosition();
+        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(() => {
+                const val = this.panel.getSelectedValue();
+                if (val !== undefined)
+                    this.writeValueToInput(val);
+            }, 10);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: 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.1", 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.1", ngImport: i0, type: MatchaAutocompleteTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: MatchaAutocompleteTriggerDirective, isStandalone: false, selector: "[matchaAutocomplete]", inputs: { panel: ["matchaAutocomplete", "panel"] }, host: { listeners: { "focus": "onFocus()", "input": "onInput($event)", "keydown": "onKeydown($event)", "document:click": "onDocClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", 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']
+            }], 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.1", ngImport: i0, type: MatchaOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaOptionModule, declarations: [MatchaOptionComponent], imports: [CommonModule], exports: [MatchaOptionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaOptionModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaOptionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaOptionComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        MatchaOptionComponent
+                    ]
+                }]
+        }] });
+
 class MatchaAutocompleteModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteComponent, MatchaAutocompleteDirective], imports: [CommonModule, FormsModule, MatchaOptionModule], exports: [MatchaAutocompleteComponent, MatchaAutocompleteDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteModule, imports: [CommonModule, FormsModule, MatchaOptionModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteComponent,
+            MatchaAutocompleteTriggerDirective], imports: [CommonModule,
+            MatchaOptionModule], exports: [MatchaAutocompleteComponent,
+            MatchaAutocompleteTriggerDirective,
+            MatchaOptionModule // Re-exporta para conveniência
+        ] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteModule, providers: [
+            // ✅ Provider para permitir injeção da interface MatchaOptionParent
+            { provide: MATCHA_OPTION_PARENT, useExisting: MatchaAutocompleteComponent }
+        ], imports: [CommonModule,
+            MatchaOptionModule, MatchaOptionModule // Re-exporta para conveniência
+        ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MatchaAutocompleteComponent, MatchaAutocompleteDirective],
-                    imports: [CommonModule, FormsModule, MatchaOptionModule],
-                    exports: [MatchaAutocompleteComponent, MatchaAutocompleteDirective],
+                    declarations: [
+                        MatchaAutocompleteComponent,
+                        MatchaAutocompleteTriggerDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatchaOptionModule
+                    ],
+                    exports: [
+                        MatchaAutocompleteComponent,
+                        MatchaAutocompleteTriggerDirective,
+                        MatchaOptionModule // Re-exporta para conveniência
+                    ],
+                    providers: [
+                        // ✅ Provider para permitir injeção da interface MatchaOptionParent
+                        { provide: MATCHA_OPTION_PARENT, useExisting: MatchaAutocompleteComponent }
+                    ]
                 }]
         }] });
 
@@ -5409,14 +5633,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 }]
         }] });
 
+class MatchaDrawerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerModule, declarations: [MatchaDrawerComponent], imports: [CommonModule,
+            MatchaButtonModule], exports: [MatchaDrawerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerModule, imports: [CommonModule,
+            MatchaButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaDrawerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaDrawerComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatchaButtonModule
+                    ],
+                    exports: [
+                        MatchaDrawerComponent
+                    ]
+                }]
+        }] });
+
 class MatchaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatchaAccordionModule,
-            MatchaOptionModule,
             MatchaAutocompleteModule,
+            MatchaOptionModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5456,8 +5703,10 @@ class MatchaComponentsModule {
             MatchaDateModule,
             MatchaTimeModule,
             MatchaDropListModule,
-            MatchaPageLayoutModule], exports: [MatchaAccordionModule,
+            MatchaPageLayoutModule,
+            MatchaDrawerModule], exports: [MatchaAccordionModule,
             MatchaAutocompleteModule,
+            MatchaOptionModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5478,7 +5727,6 @@ class MatchaComponentsModule {
             MatchaMasonryModule,
             MatchaMenuModule,
             MatchaModalModule,
-            MatchaOptionModule,
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRippleModule,
@@ -5498,13 +5746,14 @@ class MatchaComponentsModule {
             MatchaDateModule,
             MatchaTimeModule,
             MatchaDropListModule,
-            MatchaPageLayoutModule] }); }
+            MatchaPageLayoutModule,
+            MatchaDrawerModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatchaAccordionModule,
-            MatchaOptionModule,
             MatchaAutocompleteModule,
+            MatchaOptionModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5544,8 +5793,10 @@ class MatchaComponentsModule {
             MatchaDateModule,
             MatchaTimeModule,
             MatchaDropListModule,
-            MatchaPageLayoutModule, MatchaAccordionModule,
+            MatchaPageLayoutModule,
+            MatchaDrawerModule, MatchaAccordionModule,
             MatchaAutocompleteModule,
+            MatchaOptionModule,
             MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
@@ -5566,7 +5817,6 @@ class MatchaComponentsModule {
             MatchaMasonryModule,
             MatchaMenuModule,
             MatchaModalModule,
-            MatchaOptionModule,
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRippleModule,
@@ -5586,7 +5836,8 @@ class MatchaComponentsModule {
             MatchaDateModule,
             MatchaTimeModule,
             MatchaDropListModule,
-            MatchaPageLayoutModule] }); }
+            MatchaPageLayoutModule,
+            MatchaDrawerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MatchaComponentsModule, decorators: [{
             type: NgModule,
@@ -5597,8 +5848,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         FormsModule,
                         ReactiveFormsModule,
                         MatchaAccordionModule,
-                        MatchaOptionModule,
                         MatchaAutocompleteModule,
+                        MatchaOptionModule,
                         MatchaBadgeModule,
                         MatchaButtonModule,
                         MatchaButtonToggleModule,
@@ -5638,10 +5889,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatchaDateModule,
                         MatchaTimeModule,
                         MatchaDropListModule,
-                        MatchaPageLayoutModule
+                        MatchaPageLayoutModule,
+                        MatchaDrawerModule
                     ],
                     exports: [MatchaAccordionModule,
                         MatchaAutocompleteModule,
+                        MatchaOptionModule,
                         MatchaBadgeModule,
                         MatchaButtonModule,
                         MatchaButtonToggleModule,
@@ -5662,7 +5915,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatchaMasonryModule,
                         MatchaMenuModule,
                         MatchaModalModule,
-                        MatchaOptionModule,
                         MatchaPaginatorModule,
                         MatchaProgressBarModule,
                         MatchaRippleModule,
@@ -5682,7 +5934,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatchaDateModule,
                         MatchaTimeModule,
                         MatchaDropListModule,
-                        MatchaPageLayoutModule
+                        MatchaPageLayoutModule,
+                        MatchaDrawerModule
                     ],
                 }]
         }] });
@@ -5750,5 +6003,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteDirective, MatchaAutocompleteModule, 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, MatchaBadgeDirective, MatchaBadgeModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective };
 //# sourceMappingURL=matcha-components.mjs.map