matcha-components 18.0.41 → 18.0.43

package/fesm2022/matcha-components.mjs

@@ -1,8 +1,207 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Output, ElementRef, Renderer2, Inject, HostListener, NgModule, Directive } from '@angular/core';
+import { ElementRef, Renderer2, Component, Inject, Input, EventEmitter, Output, HostListener, NgModule, Directive } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
+class MatchaButtonComponent {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this.size = null;
+        this.sizeXs = null;
+        this.sizeSm = null;
+        this.sizeMd = null;
+        this.sizeLg = null;
+        this.sizeXl = null;
+        this.color = 'basic';
+        this.basic = false;
+        this.outline = false;
+        this.pill = false;
+        this.icon = false;
+        this.link = false;
+        this._config = {
+            sizeXs: 'tiny',
+            sizeSm: 'small',
+            sizeMd: 'medium',
+            sizeLg: 'large',
+            sizeXl: 'huge',
+            size: 'medium',
+            color: 'primary',
+            basic: false,
+            outline: false,
+            pill: false,
+            icon: false,
+            link: false
+        };
+    }
+    ngOnInit() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button`);
+        this.setConfig();
+        // Adicione o evento de clique apenas a elementos com a classe "matcha-button"
+        const buttons = document.querySelectorAll('.matcha-button');
+        buttons.forEach(button => {
+            // mouse down event
+            button.addEventListener('mousedown', this.addRippleEffect, false);
+        });
+    }
+    ngOnChanges() {
+        this.setConfig();
+    }
+    clearConfig() {
+        // BG colors and FG contrast
+        this._renderer.removeClass(this._elementRef.nativeElement, `${this._config.color}`);
+        // FG colors only
+        this._renderer.removeClass(this._elementRef.nativeElement, `color-${this._config.color}`);
+        //size
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-${this._config.size}`);
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-xs-${this._config.sizeXs}`);
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-sm-${this._config.sizeSm}`);
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-md-${this._config.sizeMd}`);
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-lg-${this._config.sizeLg}`);
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-xl-${this._config.sizeXl}`);
+        //basic
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-icon`);
+        //outline
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-outline`);
+        //pill
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-pill`);
+        //icon
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-basic`);
+        //link
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-link`);
+    }
+    setConfig() {
+        this.clearConfig();
+        this.size ? this.setSize() : null;
+        this.color ? this.setColor() : null;
+        (this.outline === true || this.outline === 'true') ? this.setOutline() : null;
+        (this.pill === true || this.pill === 'true') ? this.setPill() : null;
+        (this.link === true || this.link === 'true') ? this.setLink() : null;
+        (this.basic === true || this.basic === 'true') ? this.setBasic() : null;
+        (this.icon === true || this.icon === 'true') ? this.setIcon() : null;
+    }
+    setSize() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
+        this._config.size = this.size;
+        if (this.sizeXs) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-xs-${this.sizeXs}`);
+            this._config.sizeXs = this.sizeXs;
+        }
+        if (this.sizeSm) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-sm-${this.sizeSm}`);
+            this._config.sizeSm = this.sizeSm;
+        }
+        if (this.sizeMd) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-md-${this.sizeMd}`);
+            this._config.sizeMd = this.sizeMd;
+        }
+        if (this.sizeLg) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-lg-${this.sizeLg}`);
+            this._config.sizeLg = this.sizeLg;
+        }
+        if (this.sizeXl) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-xl-${this.sizeXl}`);
+            this._config.sizeXl = this.sizeXl;
+        }
+    }
+    setColor() {
+        this._renderer.addClass(this._elementRef.nativeElement, `${this.color}`);
+        this._config.color = this.color;
+    }
+    setOutline() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-outline`);
+        this._renderer.addClass(this._elementRef.nativeElement, `color-${this.color}`);
+    }
+    setPill() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-pill`);
+    }
+    setLink() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-link`);
+    }
+    setBasic() {
+        this._renderer.removeClass(this._elementRef.nativeElement, `${this._config.color}`);
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-basic`);
+        this._renderer.addClass(this._elementRef.nativeElement, `color-${this.color}`);
+    }
+    setIcon() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-icon`);
+    }
+    addRippleEffect(e) {
+        var target = e.target;
+        if (target.tagName.toLowerCase() !== 'button')
+            return false;
+        var rect = target.getBoundingClientRect();
+        var ripple = target.querySelector('.ripple');
+        if (!ripple) {
+            ripple = document.createElement('span');
+            ripple.className = `ripple`;
+            ripple.style.height = ripple.style.width = target.offsetWidth + 'px';
+            target.appendChild(ripple);
+        }
+        ripple.classList.remove('show');
+        var top = e.pageY - rect.top - ripple.offsetHeight / 2 - window.scrollY;
+        var left = e.pageX - rect.left - ripple.offsetWidth / 2 - window.scrollX;
+        ripple.style.top = top + 'px';
+        ripple.style.left = left + 'px';
+        ripple.classList.add('show');
+        return false;
+    }
+    ngOnDestroy() {
+        const buttons = document.querySelectorAll('.matcha-button');
+        buttons.forEach(button => {
+            button.removeEventListener('click', this.addRippleEffect, false);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MatchaButtonComponent, selector: "matcha-button", inputs: { size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"], color: "color", basic: "basic", outline: "outline", pill: "pill", icon: "icon", link: "link" }, usesOnChanges: true, ngImport: i0, template: "<button>\n    <ng-content></ng-content>\n</button>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-button', template: "<button>\n    <ng-content></ng-content>\n</button>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }], propDecorators: { size: [{
+                type: Input,
+                args: ['size']
+            }], sizeXs: [{
+                type: Input,
+                args: ['size-xs']
+            }], sizeSm: [{
+                type: Input,
+                args: ['size-sm']
+            }], sizeMd: [{
+                type: Input,
+                args: ['size-md']
+            }], sizeLg: [{
+                type: Input,
+                args: ['size-lg']
+            }], sizeXl: [{
+                type: Input,
+                args: ['size-xl']
+            }], color: [{
+                type: Input,
+                args: ['color']
+            }], basic: [{
+                type: Input,
+                args: ['basic']
+            }], outline: [{
+                type: Input,
+                args: ['outline']
+            }], pill: [{
+                type: Input,
+                args: ['pill']
+            }], icon: [{
+                type: Input,
+                args: ['icon']
+            }], link: [{
+                type: Input,
+                args: ['link']
+            }] } });
+
 class MatchaCardComponent {
     constructor() {
         this.elevation = 0;
@@ -616,220 +815,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatchaIconModule,
                         MatchaTitleModule,
                         MatchaDividerModule
-                    ],
-                    exports: [
-                        MatchaModalHeaderComponent,
-                        MatchaModalContentComponent,
-                        MatchaModalFooterComponent,
-                        MatchaModalOptionsComponent,
-                        MatchaModalComponent
-                    ]
-                }]
-        }] });
-
-class MatchaCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaCardModule, declarations: [MatchaCardComponent], imports: [CommonModule], exports: [MatchaCardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaCardModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaCardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaCardComponent],
-                    imports: [CommonModule],
-                    exports: [MatchaCardComponent],
-                }]
-        }] });
-
-class MatchaMasonryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaMasonryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaMasonryModule, declarations: [MatchaMasonryComponent], imports: [CommonModule], exports: [MatchaMasonryComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaMasonryModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaMasonryModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaMasonryComponent],
-                    imports: [CommonModule],
-                    exports: [MatchaMasonryComponent]
-                }]
-        }] });
-
-class MatchaAutocompleteDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-autocomplete');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaAutocompleteDirective, selector: "[matcha-autocomplete]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-autocomplete]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaAutocompleteOverviewDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-autocomplete-overview');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteOverviewDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaAutocompleteOverviewDirective, selector: "[matcha-autocomplete-overview]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteOverviewDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-autocomplete-overview]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaAutocompleteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteDirective,
-            MatchaAutocompleteOverviewDirective], exports: [MatchaAutocompleteDirective, MatchaAutocompleteOverviewDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        MatchaAutocompleteDirective,
-                        MatchaAutocompleteOverviewDirective,
-                    ],
-                    imports: [],
-                    exports: [MatchaAutocompleteDirective, MatchaAutocompleteOverviewDirective],
-                }]
-        }] });
-
-class MatchaBadgeDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-badge');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaBadgeDirective, selector: "[matcha-badge]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-badge]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaBadgeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeModule, declarations: [MatchaBadgeDirective], exports: [MatchaBadgeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaBadgeDirective],
-                    imports: [],
-                    exports: [MatchaBadgeDirective],
-                }]
-        }] });
-
-class MatchaTabsDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-tabs');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaTabsDirective, selector: "[matchaTabs]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaTabs]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaTabsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsModule, declarations: [MatchaTabsDirective], imports: [CommonModule], exports: [MatchaTabsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaTabsDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaTabsDirective],
-                }]
-        }] });
-
-class MatchaBottomSheetDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-bottom-sheet');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaBottomSheetDirective, selector: "[matcha-bottom-sheet]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-bottom-sheet]'
+                    ],
+                    exports: [
+                        MatchaModalHeaderComponent,
+                        MatchaModalContentComponent,
+                        MatchaModalFooterComponent,
+                        MatchaModalOptionsComponent,
+                        MatchaModalComponent
+                    ]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }] });
 
-class MatchaBottomSheetModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetModule, declarations: [MatchaBottomSheetDirective], exports: [MatchaBottomSheetDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetModule }); }
+class MatchaCardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaCardModule, declarations: [MatchaCardComponent], imports: [CommonModule], exports: [MatchaCardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaCardModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaCardModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MatchaBottomSheetDirective],
-                    imports: [],
-                    exports: [MatchaBottomSheetDirective],
+                    declarations: [MatchaCardComponent],
+                    imports: [CommonModule],
+                    exports: [MatchaCardComponent],
                 }]
         }] });
 
-class MatchaButtonToggleDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-button-toggle');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaButtonToggleDirective, selector: "[matcha-button-toggle]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-button-toggle]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaButtonToggleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleModule, declarations: [MatchaButtonToggleDirective], exports: [MatchaButtonToggleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleModule }); }
+class MatchaMasonryModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaMasonryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaMasonryModule, declarations: [MatchaMasonryComponent], imports: [CommonModule], exports: [MatchaMasonryComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaMasonryModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaMasonryModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        MatchaButtonToggleDirective
-                    ],
-                    imports: [],
-                    exports: [
-                        MatchaButtonToggleDirective
-                    ]
+                    declarations: [MatchaMasonryComponent],
+                    imports: [CommonModule],
+                    exports: [MatchaMasonryComponent]
                 }]
         }] });
 
@@ -967,7 +988,6 @@ class MatchaButtonDirective {
             ripple.className = `ripple`;
             ripple.style.height = ripple.style.width = target.offsetWidth + 'px';
             target.appendChild(ripple);
-            ;
         }
         ripple.classList.remove('show');
         var top = e.pageY - rect.top - ripple.offsetHeight / 2 - window.scrollY;
@@ -1037,15 +1057,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class MatchaButtonModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonModule, declarations: [MatchaButtonDirective], exports: [MatchaButtonDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonModule, declarations: [MatchaButtonDirective, MatchaButtonComponent], exports: [MatchaButtonDirective, MatchaButtonComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MatchaButtonDirective],
+                    declarations: [MatchaButtonDirective, MatchaButtonComponent],
+                    imports: [],
+                    exports: [MatchaButtonDirective, MatchaButtonComponent],
+                }]
+        }] });
+
+class MatchaAutocompleteDirective {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-autocomplete');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaAutocompleteDirective, selector: "[matcha-autocomplete]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matcha-autocomplete]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+class MatchaAutocompleteOverviewDirective {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-autocomplete-overview');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteOverviewDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaAutocompleteOverviewDirective, selector: "[matcha-autocomplete-overview]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteOverviewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matcha-autocomplete-overview]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+class MatchaAutocompleteModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteDirective,
+            MatchaAutocompleteOverviewDirective], exports: [MatchaAutocompleteDirective, MatchaAutocompleteOverviewDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaAutocompleteDirective,
+                        MatchaAutocompleteOverviewDirective,
+                    ],
+                    imports: [],
+                    exports: [MatchaAutocompleteDirective, MatchaAutocompleteOverviewDirective],
+                }]
+        }] });
+
+class MatchaBadgeDirective {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-badge');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaBadgeDirective, selector: "[matcha-badge]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matcha-badge]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+class MatchaBadgeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeModule, declarations: [MatchaBadgeDirective], exports: [MatchaBadgeDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBadgeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaBadgeDirective],
+                    imports: [],
+                    exports: [MatchaBadgeDirective],
+                }]
+        }] });
+
+class MatchaTabsDirective {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-tabs');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaTabsDirective, selector: "[matchaTabs]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matchaTabs]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+class MatchaTabsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsModule, declarations: [MatchaTabsDirective], imports: [CommonModule], exports: [MatchaTabsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaTabsDirective],
+                    imports: [CommonModule],
+                    exports: [MatchaTabsDirective],
+                }]
+        }] });
+
+class MatchaBottomSheetDirective {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-bottom-sheet');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaBottomSheetDirective, selector: "[matcha-bottom-sheet]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matcha-bottom-sheet]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+class MatchaBottomSheetModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetModule, declarations: [MatchaBottomSheetDirective], exports: [MatchaBottomSheetDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaBottomSheetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaBottomSheetDirective],
+                    imports: [],
+                    exports: [MatchaBottomSheetDirective],
+                }]
+        }] });
+
+class MatchaButtonToggleDirective {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-button-toggle');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchaButtonToggleDirective, selector: "[matcha-button-toggle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matcha-button-toggle]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+class MatchaButtonToggleModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleModule, declarations: [MatchaButtonToggleDirective], exports: [MatchaButtonToggleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaButtonToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaButtonToggleDirective
+                    ],
                     imports: [],
-                    exports: [MatchaButtonDirective],
+                    exports: [
+                        MatchaButtonToggleDirective
+                    ]
                 }]
         }] });
 
@@ -1890,8 +2088,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class MatchaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule], exports: [MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaComponentsModule, imports: [MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule, MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [MatchaModalModule,
+            MatchaMasonryModule,
+            MatchaCardModule,
+            MatchaTitleModule,
+            MatchaAutocompleteModule,
+            MatchaBadgeModule,
+            MatchaTabsModule,
+            MatchaBottomSheetModule,
+            MatchaButtonToggleModule,
+            MatchaButtonModule,
+            MatchaCheckboxModule,
+            MatchaChipsModule,
+            MatchaDatepickerModule,
+            MatchaDividerModule,
+            MatchaElevationModule,
+            MatchaExpansionModule,
+            MatchaFormsModule,
+            MatchaIconModule,
+            MatchaInputModule,
+            MatchaListModule,
+            MatchaMenuModule,
+            MatchaSidenavModule,
+            MatchaPaginatorModule,
+            MatchaProgressBarModule,
+            MatchaProgressSpinnerModule,
+            MatchaRadioButtonModule,
+            MatchaSelectModule,
+            MatchaSlideToggleModule,
+            MatchaSliderModule,
+            MatchaSnackBarModule,
+            MatchaSortHeaderModule,
+            MatchaStepperModule,
+            MatchaTableModule,
+            MatchaTabsModule,
+            MatchaTooltipModule,
+            MatchaTreeModule], exports: [MatchaModalModule,
+            MatchaMasonryModule,
+            MatchaCardModule,
+            MatchaTitleModule,
+            MatchaAutocompleteModule,
+            MatchaBadgeModule,
+            MatchaTabsModule,
+            MatchaBottomSheetModule,
+            MatchaButtonToggleModule,
+            MatchaButtonModule,
+            MatchaCheckboxModule,
+            MatchaChipsModule,
+            MatchaDatepickerModule,
+            MatchaDividerModule,
+            MatchaElevationModule,
+            MatchaExpansionModule,
+            MatchaFormsModule,
+            MatchaIconModule,
+            MatchaInputModule,
+            MatchaListModule,
+            MatchaMenuModule,
+            MatchaSidenavModule,
+            MatchaPaginatorModule,
+            MatchaProgressBarModule,
+            MatchaProgressSpinnerModule,
+            MatchaRadioButtonModule,
+            MatchaSelectModule,
+            MatchaSlideToggleModule,
+            MatchaSliderModule,
+            MatchaSnackBarModule,
+            MatchaSortHeaderModule,
+            MatchaStepperModule,
+            MatchaTableModule,
+            MatchaTabsModule,
+            MatchaTooltipModule,
+            MatchaTreeModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaComponentsModule, imports: [MatchaModalModule,
+            MatchaMasonryModule,
+            MatchaCardModule,
+            MatchaTitleModule,
+            MatchaAutocompleteModule,
+            MatchaBadgeModule,
+            MatchaTabsModule,
+            MatchaBottomSheetModule,
+            MatchaButtonToggleModule,
+            MatchaButtonModule,
+            MatchaCheckboxModule,
+            MatchaChipsModule,
+            MatchaDatepickerModule,
+            MatchaDividerModule,
+            MatchaElevationModule,
+            MatchaExpansionModule,
+            MatchaFormsModule,
+            MatchaIconModule,
+            MatchaInputModule,
+            MatchaListModule,
+            MatchaMenuModule,
+            MatchaSidenavModule,
+            MatchaPaginatorModule,
+            MatchaProgressBarModule,
+            MatchaProgressSpinnerModule,
+            MatchaRadioButtonModule,
+            MatchaSelectModule,
+            MatchaSlideToggleModule,
+            MatchaSliderModule,
+            MatchaSnackBarModule,
+            MatchaSortHeaderModule,
+            MatchaStepperModule,
+            MatchaTableModule,
+            MatchaTabsModule,
+            MatchaTooltipModule,
+            MatchaTreeModule, MatchaModalModule,
+            MatchaMasonryModule,
+            MatchaCardModule,
+            MatchaTitleModule,
+            MatchaAutocompleteModule,
+            MatchaBadgeModule,
+            MatchaTabsModule,
+            MatchaBottomSheetModule,
+            MatchaButtonToggleModule,
+            MatchaButtonModule,
+            MatchaCheckboxModule,
+            MatchaChipsModule,
+            MatchaDatepickerModule,
+            MatchaDividerModule,
+            MatchaElevationModule,
+            MatchaExpansionModule,
+            MatchaFormsModule,
+            MatchaIconModule,
+            MatchaInputModule,
+            MatchaListModule,
+            MatchaMenuModule,
+            MatchaSidenavModule,
+            MatchaPaginatorModule,
+            MatchaProgressBarModule,
+            MatchaProgressSpinnerModule,
+            MatchaRadioButtonModule,
+            MatchaSelectModule,
+            MatchaSlideToggleModule,
+            MatchaSliderModule,
+            MatchaSnackBarModule,
+            MatchaSortHeaderModule,
+            MatchaStepperModule,
+            MatchaTableModule,
+            MatchaTabsModule,
+            MatchaTooltipModule,
+            MatchaTreeModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchaComponentsModule, decorators: [{
             type: NgModule,
@@ -1899,8 +2237,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     declarations: [
                         MatchaOverflowDraggableComponent
                     ],
-                    imports: [MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule],
-                    exports: [MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule],
+                    imports: [
+                        MatchaModalModule,
+                        MatchaMasonryModule,
+                        MatchaCardModule,
+                        MatchaTitleModule,
+                        MatchaAutocompleteModule,
+                        MatchaBadgeModule,
+                        MatchaTabsModule,
+                        MatchaBottomSheetModule,
+                        MatchaButtonToggleModule,
+                        MatchaButtonModule,
+                        MatchaCheckboxModule,
+                        MatchaChipsModule,
+                        MatchaDatepickerModule,
+                        MatchaDividerModule,
+                        MatchaElevationModule,
+                        MatchaExpansionModule,
+                        MatchaFormsModule,
+                        MatchaIconModule,
+                        MatchaInputModule,
+                        MatchaListModule,
+                        MatchaMenuModule,
+                        MatchaSidenavModule,
+                        MatchaPaginatorModule,
+                        MatchaProgressBarModule,
+                        MatchaProgressSpinnerModule,
+                        MatchaRadioButtonModule,
+                        MatchaSelectModule,
+                        MatchaSlideToggleModule,
+                        MatchaSliderModule,
+                        MatchaSnackBarModule,
+                        MatchaSortHeaderModule,
+                        MatchaStepperModule,
+                        MatchaTableModule,
+                        MatchaTabsModule,
+                        MatchaTooltipModule,
+                        MatchaTreeModule
+                    ],
+                    exports: [
+                        MatchaModalModule,
+                        MatchaMasonryModule,
+                        MatchaCardModule,
+                        MatchaTitleModule,
+                        MatchaAutocompleteModule,
+                        MatchaBadgeModule,
+                        MatchaTabsModule,
+                        MatchaBottomSheetModule,
+                        MatchaButtonToggleModule,
+                        MatchaButtonModule,
+                        MatchaCheckboxModule,
+                        MatchaChipsModule,
+                        MatchaDatepickerModule,
+                        MatchaDividerModule,
+                        MatchaElevationModule,
+                        MatchaExpansionModule,
+                        MatchaFormsModule,
+                        MatchaIconModule,
+                        MatchaInputModule,
+                        MatchaListModule,
+                        MatchaMenuModule,
+                        MatchaSidenavModule,
+                        MatchaPaginatorModule,
+                        MatchaProgressBarModule,
+                        MatchaProgressSpinnerModule,
+                        MatchaRadioButtonModule,
+                        MatchaSelectModule,
+                        MatchaSlideToggleModule,
+                        MatchaSliderModule,
+                        MatchaSnackBarModule,
+                        MatchaSortHeaderModule,
+                        MatchaStepperModule,
+                        MatchaTableModule,
+                        MatchaTabsModule,
+                        MatchaTooltipModule,
+                        MatchaTreeModule
+                    ]
                 }]
         }] });
 
@@ -1937,5 +2349,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaBottomSheetDirective, MatchaBottomSheetModule, MatchaButtonDirective, MatchaButtonModule, MatchaButtonToggleDirective, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxDirective, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaExpansionDirective, MatchaExpansionModule, MatchaFormFieldDirective, MatchaFormsModule, MatchaGridComponent, MatchaGridModule, MatchaIconComponent, MatchaIconModule, MatchaInputDirective, MatchaInputModule, MatchaListDirective, MatchaListModule, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaProgressSpinnerDirective, MatchaProgressSpinnerModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaStepperDirective, MatchaStepperModule, MatchaTableDirective, MatchaTableModule, MatchaTabsDirective, MatchaTabsModule, MatchaTitleComponent, MatchaTitleModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
+export { MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaBottomSheetDirective, MatchaBottomSheetModule, MatchaButtonComponent, MatchaButtonDirective, MatchaButtonModule, MatchaButtonToggleDirective, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxDirective, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaExpansionDirective, MatchaExpansionModule, MatchaFormFieldDirective, MatchaFormsModule, MatchaGridComponent, MatchaGridModule, MatchaIconComponent, MatchaIconModule, MatchaInputDirective, MatchaInputModule, MatchaListDirective, MatchaListModule, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaProgressSpinnerDirective, MatchaProgressSpinnerModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaStepperDirective, MatchaStepperModule, MatchaTableDirective, MatchaTableModule, MatchaTabsDirective, MatchaTabsModule, MatchaTitleComponent, MatchaTitleModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
 //# sourceMappingURL=matcha-components.mjs.map