matcha-components 1.0.25 → 18.0.27

package/fesm2022/matcha-components.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule, Directive } from '@angular/core';
+import { Component, Input, ElementRef, Renderer2, Inject, HostListener, NgModule, Directive } from '@angular/core';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 class MatchaCardComponent {
@@ -28,10 +29,10 @@ class MatchaCardComponent {
         const activeClasses = `matcha-card ${elevation} ${blockquoteposition} ${blockquoteColor} ${backgroundColor} ${this.loading ? 'loading' : ''} ${this.class}`;
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: MatchaCardComponent, selector: "matcha-card", inputs: { elevation: "elevation", blockquote: "blockquote", color: "color", blockquoteColor: "blockquoteColor", class: "class", alpha: "alpha", loading: "loading" }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaCardComponent, selector: "matcha-card", inputs: { elevation: "elevation", blockquote: "blockquote", color: "color", blockquoteColor: "blockquoteColor", class: "class", alpha: "alpha", loading: "loading" }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-card', template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { elevation: [{
@@ -56,16 +57,16 @@ class MatchaHeadlineComponent {
         this.loading = false;
     }
     get classes() {
-        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-24 h-24 max-h-24 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 border-radius-8` : '';
+        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-24 h-24 max-h-24 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 radius-8` : '';
         const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaHeadlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: MatchaHeadlineComponent, selector: "matcha-headline", inputs: { bulletColor: "bulletColor", loading: "loading" }, ngImport: i0, template: "<h4 class=\"lh-16 d-flex d-flex-align-center m-0 h4\"><span [class]=\"classes\"></span><ng-content></ng-content></h4>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaHeadlineComponent, selector: "matcha-headline", inputs: { bulletColor: "bulletColor", loading: "loading" }, ngImport: i0, template: "<h4 class=\"lh-16 d-flex flex-align-center m-0 h4\"><span [class]=\"classes\"></span><ng-content></ng-content></h4>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaHeadlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadlineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-headline', template: "<h4 class=\"lh-16 d-flex d-flex-align-center m-0 h4\"><span [class]=\"classes\"></span><ng-content></ng-content></h4>\n" }]
+            args: [{ selector: 'matcha-headline', template: "<h4 class=\"lh-16 d-flex flex-align-center m-0 h4\"><span [class]=\"classes\"></span><ng-content></ng-content></h4>\n" }]
         }], propDecorators: { bulletColor: [{
                 type: Input
             }], loading: [{
@@ -78,16 +79,16 @@ class MatchaSubheadComponent {
         this.loading = false;
     }
     get classes() {
-        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-20 h-20 max-h-20 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 border-radius-8` : '';
+        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-20 h-20 max-h-20 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 radius-8` : '';
         const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSubheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: MatchaSubheadComponent, selector: "matcha-subhead", inputs: { bulletColor: "bulletColor", loading: "loading" }, ngImport: i0, template: "<h5 class=\"lh-16 d-flex d-flex-align-center m-0 h5\"><span [class]=\"classes\"></span><ng-content></ng-content></h5>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSubheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaSubheadComponent, selector: "matcha-subhead", inputs: { bulletColor: "bulletColor", loading: "loading" }, ngImport: i0, template: "<h5 class=\"lh-16 d-flex flex-align-center m-0 h5\"><span [class]=\"classes\"></span><ng-content></ng-content></h5>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSubheadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSubheadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-subhead', template: "<h5 class=\"lh-16 d-flex d-flex-align-center m-0 h5\"><span [class]=\"classes\"></span><ng-content></ng-content></h5>\n" }]
+            args: [{ selector: 'matcha-subhead', template: "<h5 class=\"lh-16 d-flex flex-align-center m-0 h5\"><span [class]=\"classes\"></span><ng-content></ng-content></h5>\n" }]
         }], propDecorators: { bulletColor: [{
                 type: Input
             }], loading: [{
@@ -100,16 +101,16 @@ class MatchaTitleComponent {
         this.loading = false;
     }
     get classes() {
-        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-16 h-16 max-h-16 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 border-radius-8` : '';
+        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-16 h-16 max-h-16 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 radius-8` : '';
         const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: MatchaTitleComponent, selector: "matcha-title", inputs: { bulletColor: "bulletColor", loading: "loading" }, ngImport: i0, template: "<h6 class=\"lh-24 d-flex d-flex-align-center m-0 text-uppercase\"><span [class]=\"classes\"></span><ng-content></ng-content>\n</h6>", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaTitleComponent, selector: "matcha-title", inputs: { bulletColor: "bulletColor", loading: "loading" }, ngImport: i0, template: "<h6 class=\"lh-24 d-flex flex-align-center m-0 text-uppercase\"><span [class]=\"classes\"></span><ng-content></ng-content>\n</h6>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-title', template: "<h6 class=\"lh-24 d-flex d-flex-align-center m-0 text-uppercase\"><span [class]=\"classes\"></span><ng-content></ng-content>\n</h6>" }]
+            args: [{ selector: 'matcha-title', template: "<h6 class=\"lh-24 d-flex flex-align-center m-0 text-uppercase\"><span [class]=\"classes\"></span><ng-content></ng-content>\n</h6>\n" }]
         }], propDecorators: { bulletColor: [{
                 type: Input
             }], loading: [{
@@ -132,10 +133,10 @@ class MatchaIconComponent {
         const activeClasses = `${icon} ${color} ${size} ${loading} ${this.class}`;
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: MatchaIconComponent, selector: "matcha-icon", inputs: { name: "name", size: "size", color: "color", class: "class", loading: "loading" }, ngImport: i0, template: "<span [class]=\"classes\">\n    <ng-content></ng-content>\n</span>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaIconComponent, selector: "matcha-icon", inputs: { name: "name", size: "size", color: "color", class: "class", loading: "loading" }, ngImport: i0, template: "<span [class]=\"classes\">\n    <ng-content></ng-content>\n</span>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-icon', template: "<span [class]=\"classes\">\n    <ng-content></ng-content>\n</span>\n" }]
         }], propDecorators: { name: [{
@@ -234,10 +235,10 @@ class MatchaGridComponent {
         this.setColspanClasses(this.colspan, this.breakpoint);
         this.setRowspanClasses(this.rowspan, this.breakpoint);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: MatchaGridComponent, selector: "matcha-grid", inputs: { breakpoint: "breakpoint", col: "col", gap: "gap", class: "class", span: "span", rowspan: "rowspan", colspan: "colspan", direction: "direction", loading: "loading" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaGridComponent, selector: "matcha-grid", inputs: { breakpoint: "breakpoint", col: "col", gap: "gap", class: "class", span: "span", rowspan: "rowspan", colspan: "colspan", direction: "direction", loading: "loading" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-grid', template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { breakpoint: [{
@@ -260,12 +261,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
                 type: Input
             }] } });
 
+class MatchaMenuComponent {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this.isParentMenu = false;
+        this.isOpen = false;
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-menu');
+    }
+    handleOutsideClick(event) {
+        if (!this._elementRef.nativeElement.contains(event.target) && this.isOpen) {
+            this.closeMenu();
+        }
+    }
+    handleMouseLeave(event) {
+        if (!this.isParentMenu && this._elementRef.nativeElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.closeMenu();
+    }
+    openMenu() {
+        this.isOpen = true;
+    }
+    closeMenu() {
+        this.isOpen = false;
+    }
+    toggleMenu() {
+        this.isOpen = !this.isOpen;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaMenuComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaMenuComponent, selector: "matcha-menu", inputs: { isParentMenu: "isParentMenu" }, host: { listeners: { "document:click": "handleOutsideClick($event)", "mouseleave": "handleMouseLeave($event)" } }, exportAs: ["matchaMenu"], ngImport: i0, template: "<div class=\"menu\" [ngClass]=\"{'show': isOpen}\">\n    <ng-content></ng-content>\n  </div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-menu', exportAs: 'matchaMenu', template: "<div class=\"menu\" [ngClass]=\"{'show': isOpen}\">\n    <ng-content></ng-content>\n  </div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }], propDecorators: { isParentMenu: [{
+                type: Input
+            }], handleOutsideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], handleMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }] } });
+
 class MatchaCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaCardModule, declarations: [MatchaCardComponent], imports: [CommonModule], exports: [MatchaCardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaCardModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaCardModule, declarations: [MatchaCardComponent], imports: [CommonModule], exports: [MatchaCardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaCardModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaCardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaCardComponent],
@@ -275,11 +327,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }] });
 
 class MatchaHeadersModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaHeadersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaHeadersModule, declarations: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent], imports: [CommonModule], exports: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaHeadersModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadersModule, declarations: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent], imports: [CommonModule], exports: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadersModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaHeadersModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadersModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent],
@@ -294,10 +346,10 @@ class MatchaAutocompleteDirective {
         this._renderer = _renderer;
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-autocomplete');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", 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: "17.0.5", type: MatchaAutocompleteDirective, selector: "[matcha-autocomplete]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", 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.1.0", type: MatchaAutocompleteDirective, selector: "[matcha-autocomplete]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaAutocompleteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaAutocompleteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-autocomplete]'
@@ -311,10 +363,10 @@ class MatchaAutocompleteOverviewDirective {
         //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: "17.0.5", 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: "17.0.5", type: MatchaAutocompleteOverviewDirective, selector: "[matcha-autocomplete-overview]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", 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.1.0", type: MatchaAutocompleteOverviewDirective, selector: "[matcha-autocomplete-overview]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaAutocompleteOverviewDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaAutocompleteOverviewDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-autocomplete-overview]'
@@ -322,12 +374,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaAutocompleteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteDirective,
             MatchaAutocompleteOverviewDirective], exports: [MatchaAutocompleteDirective, MatchaAutocompleteOverviewDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaAutocompleteModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaAutocompleteModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -346,10 +398,10 @@ class MatchaBadgeDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-badge');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", 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: "17.0.5", type: MatchaBadgeDirective, selector: "[matcha-badge]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", 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.1.0", type: MatchaBadgeDirective, selector: "[matcha-badge]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaBadgeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaBadgeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-badge]',
@@ -357,11 +409,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaBadgeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaBadgeModule, declarations: [MatchaBadgeDirective], exports: [MatchaBadgeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaBadgeModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaBadgeModule, declarations: [MatchaBadgeDirective], exports: [MatchaBadgeDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaBadgeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaBadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaBadgeDirective],
@@ -377,10 +429,10 @@ class MatchaTabsDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-tabs');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", 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: "17.0.5", type: MatchaTabsDirective, selector: "[matchaTabs]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", 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.1.0", type: MatchaTabsDirective, selector: "[matchaTabs]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTabsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTabsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaTabs]'
@@ -388,11 +440,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaTabsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaTabsModule, declarations: [MatchaTabsDirective], imports: [CommonModule], exports: [MatchaTabsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTabsModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaTabsModule, declarations: [MatchaTabsDirective], imports: [CommonModule], exports: [MatchaTabsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTabsModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTabsDirective],
@@ -408,10 +460,10 @@ class MatchaBottomSheetDirective {
         //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: "17.0.5", 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: "17.0.5", type: MatchaBottomSheetDirective, selector: "[matcha-bottom-sheet]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", 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.1.0", type: MatchaBottomSheetDirective, selector: "[matcha-bottom-sheet]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaBottomSheetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaBottomSheetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-bottom-sheet]'
@@ -419,11 +471,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaBottomSheetModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaBottomSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaBottomSheetModule, declarations: [MatchaBottomSheetDirective], exports: [MatchaBottomSheetDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaBottomSheetModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaBottomSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaBottomSheetModule, declarations: [MatchaBottomSheetDirective], exports: [MatchaBottomSheetDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaBottomSheetModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaBottomSheetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaBottomSheetModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaBottomSheetDirective],
@@ -438,10 +490,10 @@ class MatchaButtonToggleDirective {
         this._renderer = _renderer;
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-button-toggle');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", 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: "17.0.5", type: MatchaButtonToggleDirective, selector: "[matcha-button-toggle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", 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.1.0", type: MatchaButtonToggleDirective, selector: "[matcha-button-toggle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaButtonToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-button-toggle]'
@@ -449,11 +501,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaButtonToggleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaButtonToggleModule, declarations: [MatchaButtonToggleDirective], exports: [MatchaButtonToggleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaButtonToggleModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonToggleModule, declarations: [MatchaButtonToggleDirective], exports: [MatchaButtonToggleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonToggleModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaButtonToggleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonToggleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -470,16 +522,19 @@ class MatchaButtonDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
         this._renderer = _renderer;
-        this.pill = false;
         this.size = null;
-        this.color = null;
+        this.color = 'basic';
+        this.basic = false;
         this.outline = false;
+        this.pill = false;
         this.icon = false;
         this._config = {
             size: 'md',
             color: 'primary',
-            pill: false,
+            basic: false,
             outline: false,
+            pill: false,
+            icon: false,
         };
     }
     ngOnInit() {
@@ -494,6 +549,45 @@ class MatchaButtonDirective {
     ngOnChanges() {
         this._setConfig();
     }
+    _setConfig() {
+        // 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}`);
+        //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`);
+        // Adicione a classe correspondente ao novo tamanho (se houver)
+        if (this.size) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
+            this._config.size = this.size;
+        }
+        if (this.color) {
+            this._renderer.addClass(this._elementRef.nativeElement, `${this.color}`);
+            this._config.color = this.color;
+        }
+        if (this.outline === true || this.outline === 'true') {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-outline`);
+            this._renderer.addClass(this._elementRef.nativeElement, `color-${this.color}`);
+        }
+        if (this.pill === true || this.pill === 'true') {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-pill`);
+        }
+        if (this.basic === true || this.basic === 'true') {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-basic`);
+            this._renderer.addClass(this._elementRef.nativeElement, `color-${this.color}`);
+        }
+        if (this.icon === true || this.icon === 'true') {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-icon`);
+        }
+    }
     addRippleEffect(e) {
         var target = e.target;
         if (target.tagName.toLowerCase() !== 'button')
@@ -502,10 +596,10 @@ class MatchaButtonDirective {
         var ripple = target.querySelector('.ripple');
         if (!ripple) {
             ripple = document.createElement('span');
-            ripple.className = 'ripple';
-            ripple.style.height = ripple.style.width = '200px';
+            ripple.className = `ripple`;
+            ripple.style.height = ripple.style.width = target.offsetWidth + 'px';
             target.appendChild(ripple);
-            console.log(ripple);
+            ;
         }
         ripple.classList.remove('show');
         var top = e.pageY - rect.top - ripple.offsetHeight / 2 - window.scrollY;
@@ -515,70 +609,53 @@ class MatchaButtonDirective {
         ripple.classList.add('show');
         return false;
     }
-    _setConfig() {
-        // Remove todas as classes relacionadas ao tamanho
-        ['xs', 'sm', 'md', 'lg', 'xl'].forEach((size) => {
-            this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-${size}`);
+    ngOnDestroy() {
+        const buttons = document.querySelectorAll('.matcha-button');
+        buttons.forEach(button => {
+            button.removeEventListener('click', this.addRippleEffect, false);
         });
-        // Adicione a classe correspondente ao novo tamanho (se houver)
-        if (this.size) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
-        }
-        this.icon === true || this.icon === 'true' ? this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-icon`) : this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-icon`);
-        if (this.color) {
-            this._renderer.removeClass(this._elementRef.nativeElement, `color-${this._config.color}`);
-            this._renderer.removeClass(this._elementRef.nativeElement, `${this._config.color}`);
-            this._renderer.addClass(this._elementRef.nativeElement, `${this.color}`);
-            this._config.color = this.color;
-        }
-        if (this.outline) {
-            this._renderer.addClass(this._elementRef.nativeElement, `color-${this.color}`);
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-outline`);
-        }
-        else {
-            this._renderer.removeClass(this._elementRef.nativeElement, `color-${this.color}`);
-            this._renderer.removeClass(this._elementRef.nativeElement, `color-${this._config.color}`);
-            this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-outline`);
-        }
-        if (this.pill === true || this.pill === 'true') {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-pill`);
-        }
-        else {
-            this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-pill`);
-        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaButtonDirective, selector: "[matcha-button]", inputs: { pill: "pill", size: "size", color: "color", outline: "outline", icon: "icon" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonDirective, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaButtonDirective, selector: "[matcha-button]", inputs: { size: "size", color: "color", basic: "basic", outline: "outline", pill: "pill", icon: "icon" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-button]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { pill: [{
-                type: Input,
-                args: ['pill']
-            }], size: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }], propDecorators: { size: [{
                 type: Input,
                 args: ['size']
             }], 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']
             }] } });
 
 class MatchaButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaButtonModule, declarations: [MatchaButtonDirective], exports: [MatchaButtonDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaButtonModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonModule, declarations: [MatchaButtonDirective], exports: [MatchaButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaButtonDirective],
@@ -594,10 +671,10 @@ class MatchaCheckboxDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-checkbox');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaCheckboxDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaCheckboxDirective, selector: "[matcha-checkbox]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaCheckboxDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaCheckboxDirective, selector: "[matcha-checkbox]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaCheckboxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaCheckboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-checkbox]',
@@ -605,11 +682,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaCheckboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaCheckboxModule, declarations: [MatchaCheckboxDirective], exports: [MatchaCheckboxDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaCheckboxModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaCheckboxModule, declarations: [MatchaCheckboxDirective], exports: [MatchaCheckboxDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaCheckboxModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaCheckboxDirective],
@@ -625,10 +702,10 @@ class MatchaChipsDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-chips');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaChipsDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaChipsDirective, selector: "[matchaChips]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaChipsDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaChipsDirective, selector: "[matchaChips]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaChipsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaChipsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaChips]'
@@ -636,11 +713,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaChipsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaChipsModule, declarations: [MatchaChipsDirective], exports: [MatchaChipsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaChipsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaChipsModule, declarations: [MatchaChipsDirective], exports: [MatchaChipsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaChipsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaChipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaChipsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaChipsDirective],
@@ -658,10 +735,10 @@ class MatchaDatepickerDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-datepicker');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDatepickerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaDatepickerDirective, selector: "[matcha-datepicker]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDatepickerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaDatepickerDirective, selector: "[matcha-datepicker]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDatepickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDatepickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-datepicker]',
@@ -669,11 +746,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaDatepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaDatepickerModule, declarations: [MatchaDatepickerDirective], exports: [MatchaDatepickerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDatepickerModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaDatepickerModule, declarations: [MatchaDatepickerDirective], exports: [MatchaDatepickerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDatepickerModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaDatepickerDirective],
@@ -689,10 +766,10 @@ class MatchaDialogDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-dialog');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDialogDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaDialogDirective, selector: "[matchaDialog]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDialogDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaDialogDirective, selector: "[matchaDialog]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDialogDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDialogDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaDialog]'
@@ -700,11 +777,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaDialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaDialogModule, declarations: [MatchaDialogDirective], imports: [CommonModule], exports: [MatchaDialogDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDialogModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaDialogModule, declarations: [MatchaDialogDirective], imports: [CommonModule], exports: [MatchaDialogDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDialogModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaDialogDirective],
@@ -724,10 +801,10 @@ class MatchaDividerDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-dialog');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDividerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaDividerDirective, selector: "[matchaDivider]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaDividerDirective, selector: "[matchaDivider]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDividerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaDivider]'
@@ -735,11 +812,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaDividerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaDividerModule, declarations: [MatchaDividerDirective], imports: [CommonModule], exports: [MatchaDividerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDividerModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, declarations: [MatchaDividerDirective], imports: [CommonModule], exports: [MatchaDividerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaDividerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaDividerDirective],
@@ -767,10 +844,10 @@ class MatchaElevationDirective {
             this._renderer.addClass(this._elementRef.nativeElement, `elevation-z-0`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaElevationDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaElevationDirective, selector: "[elevation]", inputs: { elevation: "elevation" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaElevationDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaElevationDirective, selector: "[elevation]", inputs: { elevation: "elevation" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaElevationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaElevationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elevation]',
@@ -781,11 +858,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
             }] } });
 
 class MatchaElevationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaElevationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaElevationModule, declarations: [MatchaElevationDirective], imports: [CommonModule], exports: [MatchaElevationDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaElevationModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaElevationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaElevationModule, declarations: [MatchaElevationDirective], imports: [CommonModule], exports: [MatchaElevationDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaElevationModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaElevationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaElevationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaElevationDirective],
@@ -801,10 +878,10 @@ class MatchaExpansionDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-expansion-panel');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaExpansionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaExpansionDirective, selector: "[matchaExpansion]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaExpansionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaExpansionDirective, selector: "[matchaExpansion]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaExpansionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaExpansionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaExpansion]',
@@ -812,11 +889,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaExpansionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaExpansionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaExpansionModule, declarations: [MatchaExpansionDirective], imports: [CommonModule], exports: [MatchaExpansionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaExpansionModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaExpansionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaExpansionModule, declarations: [MatchaExpansionDirective], imports: [CommonModule], exports: [MatchaExpansionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaExpansionModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaExpansionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaExpansionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaExpansionDirective],
@@ -832,10 +909,10 @@ class MatchaFormFieldDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-form-field');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaFormFieldDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaFormFieldDirective, selector: "[matchaFormField]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaFormFieldDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaFormFieldDirective, selector: "[matchaFormField]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaFormFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaFormFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaFormField]',
@@ -843,11 +920,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaFormsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaFormsModule, declarations: [MatchaFormFieldDirective], imports: [CommonModule], exports: [MatchaFormFieldDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaFormsModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaFormsModule, declarations: [MatchaFormFieldDirective], imports: [CommonModule], exports: [MatchaFormFieldDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaFormsModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaFormFieldDirective],
@@ -857,11 +934,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }] });
 
 class MatchaIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaIconModule, declarations: [MatchaIconComponent], imports: [CommonModule], exports: [MatchaIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaIconModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, declarations: [MatchaIconComponent], imports: [CommonModule], exports: [MatchaIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaIconComponent],
@@ -877,10 +954,10 @@ class MatchaInputDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-input');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaInputDirective, selector: "[matcha-input]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaInputDirective, selector: "[matcha-input]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-input]',
@@ -888,11 +965,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaInputModule, declarations: [MatchaInputDirective], exports: [MatchaInputDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaInputModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaInputModule, declarations: [MatchaInputDirective], exports: [MatchaInputDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaInputModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaInputDirective],
@@ -908,10 +985,10 @@ class MatchaListDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-list');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaListDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaListDirective, selector: "[matchaList]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaListDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaListDirective, selector: "[matchaList]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaList]',
@@ -919,11 +996,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaListModule, declarations: [MatchaListDirective], imports: [CommonModule], exports: [MatchaListDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaListModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaListModule, declarations: [MatchaListDirective], imports: [CommonModule], exports: [MatchaListDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaListModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaListDirective],
@@ -932,34 +1009,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
                 }]
         }] });
 
-class MatchaMenuDirective {
+class MatchaMenuTriggerForDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
         this._renderer = _renderer;
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-menu');
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-menu-trigger');
+    }
+    onClick(event) {
+        event.stopPropagation();
+        this.menu.toggleMenu();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaMenuDirective, selector: "[matchaMenu]", ngImport: i0 }); }
+    onMouseEnter() {
+        if (!this.menu.isParentMenu) {
+            this.menu.openMenu();
+        }
+    }
+    onMouseLeave() {
+        if (!this.menu.isParentMenu) {
+            this.menu.closeMenu();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaMenuTriggerForDirective, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaMenuTriggerForDirective, selector: "[matchaMenuTriggerFor]", inputs: { menu: ["matchaMenuTriggerFor", "menu"] }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, exportAs: ["matchaMenuTriggerFor"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaMenuTriggerForDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[matchaMenu]'
+                    selector: '[matchaMenuTriggerFor]',
+                    exportAs: 'matchaMenuTriggerFor'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }], propDecorators: { menu: [{
+                type: Input,
+                args: ['matchaMenuTriggerFor']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
 
 class MatchaMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaMenuModule, declarations: [MatchaMenuDirective], imports: [CommonModule], exports: [MatchaMenuDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaMenuModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaMenuModule, declarations: [MatchaMenuComponent,
+            MatchaMenuTriggerForDirective], imports: [CommonModule], exports: [MatchaMenuComponent,
+            MatchaMenuTriggerForDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaMenuModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MatchaMenuDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaMenuDirective],
+                    declarations: [
+                        MatchaMenuComponent,
+                        MatchaMenuTriggerForDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        MatchaMenuComponent,
+                        MatchaMenuTriggerForDirective
+                    ]
                 }]
         }] });
 
@@ -970,10 +1090,10 @@ class MatchaSidenavDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-sidenav');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSidenavDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaSidenavDirective, selector: "[matcha-sidenav]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSidenavDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaSidenavDirective, selector: "[matcha-sidenav]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSidenavDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSidenavDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-sidenav]',
@@ -981,11 +1101,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaSidenavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSidenavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaSidenavModule, declarations: [MatchaSidenavDirective], imports: [CommonModule], exports: [MatchaSidenavDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSidenavModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSidenavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaSidenavModule, declarations: [MatchaSidenavDirective], imports: [CommonModule], exports: [MatchaSidenavDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSidenavModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSidenavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSidenavModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSidenavDirective],
@@ -1001,10 +1121,10 @@ class MatchaPaginatorDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-paginator');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaPaginatorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaPaginatorDirective, selector: "[matchaPaginator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaPaginatorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaPaginatorDirective, selector: "[matchaPaginator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaPaginatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaPaginatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaPaginator]'
@@ -1012,11 +1132,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaPaginatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaPaginatorModule, declarations: [MatchaPaginatorDirective], imports: [CommonModule], exports: [MatchaPaginatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaPaginatorModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaPaginatorModule, declarations: [MatchaPaginatorDirective], imports: [CommonModule], exports: [MatchaPaginatorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaPaginatorModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaPaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaPaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaPaginatorDirective],
@@ -1032,10 +1152,10 @@ class MatchaProgressBarDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-progress-bar');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressBarDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaProgressBarDirective, selector: "[matcha-progress-bar]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressBarDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaProgressBarDirective, selector: "[matcha-progress-bar]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressBarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressBarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-progress-bar]'
@@ -1043,11 +1163,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaProgressBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressBarModule, declarations: [MatchaProgressBarDirective], imports: [CommonModule], exports: [MatchaProgressBarDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressBarModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressBarModule, declarations: [MatchaProgressBarDirective], imports: [CommonModule], exports: [MatchaProgressBarDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressBarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaProgressBarDirective],
@@ -1067,10 +1187,10 @@ class MatchaProgressSpinnerDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-progress-spinner');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressSpinnerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaProgressSpinnerDirective, selector: "[matcha-progress-spinner]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressSpinnerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaProgressSpinnerDirective, selector: "[matcha-progress-spinner]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressSpinnerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressSpinnerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-progress-spinner]'
@@ -1078,11 +1198,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaProgressSpinnerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressSpinnerModule, declarations: [MatchaProgressSpinnerDirective], imports: [CommonModule], exports: [MatchaProgressSpinnerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressSpinnerModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressSpinnerModule, declarations: [MatchaProgressSpinnerDirective], imports: [CommonModule], exports: [MatchaProgressSpinnerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressSpinnerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaProgressSpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaProgressSpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaProgressSpinnerDirective],
@@ -1102,10 +1222,10 @@ class MatchaRadioButtonDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-radio-button');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaRadioButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaRadioButtonDirective, selector: "[matchaRadioButton]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaRadioButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaRadioButtonDirective, selector: "[matchaRadioButton]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaRadioButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaRadioButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaRadioButton]'
@@ -1113,11 +1233,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaRadioButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaRadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaRadioButtonModule, declarations: [MatchaRadioButtonDirective], imports: [CommonModule], exports: [MatchaRadioButtonDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaRadioButtonModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaRadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaRadioButtonModule, declarations: [MatchaRadioButtonDirective], imports: [CommonModule], exports: [MatchaRadioButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaRadioButtonModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaRadioButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaRadioButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaRadioButtonDirective],
@@ -1135,10 +1255,10 @@ class MatchaSelectDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-select');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSelectDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaSelectDirective, selector: "[matcha-select]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSelectDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaSelectDirective, selector: "[matcha-select]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-select]',
@@ -1146,11 +1266,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaSelectModule, declarations: [MatchaSelectDirective], imports: [CommonModule], exports: [MatchaSelectDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSelectModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaSelectModule, declarations: [MatchaSelectDirective], imports: [CommonModule], exports: [MatchaSelectDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSelectModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSelectDirective],
@@ -1166,10 +1286,10 @@ class MatchaSlideToggleDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-slide-toggle');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSlideToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaSlideToggleDirective, selector: "[slide-toggle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSlideToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaSlideToggleDirective, selector: "[slide-toggle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSlideToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSlideToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slide-toggle]'
@@ -1177,11 +1297,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaSlideToggleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaSlideToggleModule, declarations: [MatchaSlideToggleDirective], imports: [CommonModule], exports: [MatchaSlideToggleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSlideToggleModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaSlideToggleModule, declarations: [MatchaSlideToggleDirective], imports: [CommonModule], exports: [MatchaSlideToggleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSlideToggleModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSlideToggleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSlideToggleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSlideToggleDirective],
@@ -1199,10 +1319,10 @@ class MatchaSliderDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-slider');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSliderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaSliderDirective, selector: "[matchaSlider]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSliderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaSliderDirective, selector: "[matchaSlider]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSliderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSliderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaSlider]'
@@ -1210,11 +1330,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaSliderModule, declarations: [MatchaSliderDirective], imports: [CommonModule], exports: [MatchaSliderDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSliderModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaSliderModule, declarations: [MatchaSliderDirective], imports: [CommonModule], exports: [MatchaSliderDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSliderModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSliderDirective],
@@ -1232,10 +1352,10 @@ class MatchaSnackBarDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-snackbar');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSnackBarDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaSnackBarDirective, selector: "[matchaSnackBar]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSnackBarDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaSnackBarDirective, selector: "[matchaSnackBar]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSnackBarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSnackBarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaSnackBar]',
@@ -1243,11 +1363,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaSnackBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaSnackBarModule, declarations: [MatchaSnackBarDirective], imports: [CommonModule], exports: [MatchaSnackBarDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSnackBarModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaSnackBarModule, declarations: [MatchaSnackBarDirective], imports: [CommonModule], exports: [MatchaSnackBarDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSnackBarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSnackBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSnackBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSnackBarDirective],
@@ -1263,10 +1383,10 @@ class MatchaSortHeaderDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-sort-header');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSortHeaderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaSortHeaderDirective, selector: "[matchaSortHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSortHeaderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaSortHeaderDirective, selector: "[matchaSortHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSortHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSortHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaSortHeader]'
@@ -1274,11 +1394,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaSortHeaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSortHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaSortHeaderModule, declarations: [MatchaSortHeaderDirective], imports: [CommonModule], exports: [MatchaSortHeaderDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSortHeaderModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSortHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaSortHeaderModule, declarations: [MatchaSortHeaderDirective], imports: [CommonModule], exports: [MatchaSortHeaderDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSortHeaderModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaSortHeaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSortHeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSortHeaderDirective],
@@ -1294,10 +1414,10 @@ class MatchaStepperDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-stepper');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaStepperDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaStepperDirective, selector: "[matchaStepper]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaStepperDirective, selector: "[matchaStepper]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaStepperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaStepper]'
@@ -1305,11 +1425,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaStepperModule, declarations: [MatchaStepperDirective], imports: [CommonModule], exports: [MatchaStepperDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaStepperModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperModule, declarations: [MatchaStepperDirective], imports: [CommonModule], exports: [MatchaStepperDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaStepperDirective],
@@ -1325,10 +1445,10 @@ class MatchaTableDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-table');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaTableDirective, selector: "[matchaTable]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaTableDirective, selector: "[matchaTable]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaTable]'
@@ -1336,11 +1456,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaTableModule, declarations: [MatchaTableDirective], imports: [CommonModule], exports: [MatchaTableDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTableModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaTableModule, declarations: [MatchaTableDirective], imports: [CommonModule], exports: [MatchaTableDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTableModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTableDirective],
@@ -1356,10 +1476,10 @@ class MatchaTooltipDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-tooltip');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaTooltipDirective, selector: "[matchaTooltip]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaTooltipDirective, selector: "[matchaTooltip]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaTooltip]'
@@ -1367,11 +1487,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaTooltipModule, declarations: [MatchaTooltipDirective], imports: [CommonModule], exports: [MatchaTooltipDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTooltipModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaTooltipModule, declarations: [MatchaTooltipDirective], imports: [CommonModule], exports: [MatchaTooltipDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTooltipModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTooltipDirective],
@@ -1387,10 +1507,10 @@ class MatchaTreeDirective {
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-tree');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTreeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: MatchaTreeDirective, selector: "[matchaTree]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTreeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaTreeDirective, selector: "[matchaTree]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTreeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTreeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaTree]'
@@ -1398,11 +1518,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaTreeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaTreeModule, declarations: [MatchaTreeDirective], imports: [CommonModule], exports: [MatchaTreeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTreeModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaTreeModule, declarations: [MatchaTreeDirective], imports: [CommonModule], exports: [MatchaTreeDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTreeModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaTreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTreeDirective],
@@ -1453,10 +1573,10 @@ class MatchaOverflowDraggableComponent {
         const activeClasses = `${draggableReference}`;
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaOverflowDraggableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: MatchaOverflowDraggableComponent, selector: "matcha-overflow-draggable", inputs: { dragRef: "dragRef" }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaOverflowDraggableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaOverflowDraggableComponent, selector: "matcha-overflow-draggable", inputs: { dragRef: "dragRef" }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaOverflowDraggableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaOverflowDraggableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-overflow-draggable', template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { dragRef: [{
@@ -1464,11 +1584,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
             }] } });
 
 class MatchaComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [MatchaCardModule, MatchaHeadersModule], exports: [MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, 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: "17.0.5", ngImport: i0, type: MatchaComponentsModule, imports: [MatchaCardModule, MatchaHeadersModule, MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [MatchaCardModule, MatchaHeadersModule], exports: [MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, 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.1.0", ngImport: i0, type: MatchaComponentsModule, imports: [MatchaCardModule, MatchaHeadersModule, MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, 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: "17.0.5", ngImport: i0, type: MatchaComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1480,11 +1600,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }] });
 
 class MatchaGridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: MatchaGridModule, declarations: [MatchaGridComponent], imports: [CommonModule], exports: [MatchaGridComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaGridModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaGridModule, declarations: [MatchaGridComponent], imports: [CommonModule], exports: [MatchaGridComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaGridModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: MatchaGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaGridModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaGridComponent],
@@ -1512,5 +1632,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaBottomSheetDirective, MatchaBottomSheetModule, MatchaButtonDirective, MatchaButtonModule, MatchaButtonToggleDirective, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardFooter, MatchaCardModule, MatchaCheckboxDirective, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDialogDirective, MatchaDialogModule, MatchaDividerDirective, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaExpansionDirective, MatchaExpansionModule, MatchaFormFieldDirective, MatchaFormsModule, MatchaGridComponent, MatchaGridModule, MatchaHeadersModule, MatchaHeadlineComponent, MatchaIconComponent, MatchaIconModule, MatchaInputDirective, MatchaInputModule, MatchaListDirective, MatchaListModule, MatchaMenuDirective, MatchaMenuModule, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaProgressSpinnerDirective, MatchaProgressSpinnerModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaStepperDirective, MatchaStepperModule, MatchaSubheadComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsDirective, MatchaTabsModule, MatchaTitleComponent, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
+export { MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaBottomSheetDirective, MatchaBottomSheetModule, MatchaButtonDirective, MatchaButtonModule, MatchaButtonToggleDirective, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardFooter, MatchaCardModule, MatchaCheckboxDirective, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDialogDirective, MatchaDialogModule, MatchaDividerDirective, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaExpansionDirective, MatchaExpansionModule, MatchaFormFieldDirective, MatchaFormsModule, MatchaGridComponent, MatchaGridModule, MatchaHeadersModule, MatchaHeadlineComponent, MatchaIconComponent, MatchaIconModule, MatchaInputDirective, MatchaInputModule, MatchaListDirective, MatchaListModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaProgressSpinnerDirective, MatchaProgressSpinnerModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaStepperDirective, MatchaStepperModule, MatchaSubheadComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsDirective, MatchaTabsModule, MatchaTitleComponent, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
 //# sourceMappingURL=matcha-components.mjs.map