matcha-components 19.52.0 → 19.54.0

package/fesm2022/matcha-components.mjs

@@ -1,326 +1,12 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Renderer2, Input, Inject, Component, EventEmitter, ContentChild, Output, ContentChildren, HostBinding, HostListener, Directive, forwardRef, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, Renderer2, Inject, HostBinding, HostListener, ContentChild, Directive, forwardRef, NgModule } from '@angular/core';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
 import { Subscription, Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { FormControlName, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-class MatchaButtonComponent {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        this.size = null;
-        this.sizeXs = null;
-        this.sizeSm = null;
-        this.sizeMd = null;
-        this.sizeLg = null;
-        this.sizeXl = null;
-        this.color = 'basic';
-        this.basic = false;
-        this.outline = false;
-        this.alpha = false;
-        this.pill = false;
-        this.icon = false;
-        this.link = false;
-        this._config = {
-            sizeXs: 'tiny',
-            sizeSm: 'small',
-            sizeMd: 'medium',
-            sizeLg: 'large',
-            sizeXl: 'huge',
-            size: 'medium',
-            basic: false,
-            outline: false,
-            pill: false,
-            icon: false,
-            link: false
-        };
-    }
-    ngOnInit() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button`);
-        this.setConfig();
-        // Adicione o evento de clique apenas a elementos com a classe "matcha-button"
-        const buttons = document.querySelectorAll('.matcha-button');
-        buttons.forEach(button => {
-            // mouse down event
-            button.addEventListener('mousedown', this.addRippleEffect, false);
-        });
-    }
-    ngOnChanges() {
-        this.setConfig();
-    }
-    clearConfig() {
-        //size
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-${this._config.size}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-xs-${this._config.sizeXs}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-sm-${this._config.sizeSm}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-md-${this._config.sizeMd}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-lg-${this._config.sizeLg}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-xl-${this._config.sizeXl}`);
-        //basic
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-icon`);
-        //outline
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-outline`);
-        //pill
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-pill`);
-        //icon
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-basic`);
-        //link
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-link`);
-    }
-    setConfig() {
-        this.clearConfig();
-        this.size ? this.setSize() : null;
-        (this.outline === true || this.outline === 'true') ? this.setOutline() : null;
-        (this.pill === true || this.pill === 'true') ? this.setPill() : null;
-        (this.link === true || this.link === 'true') ? this.setLink() : null;
-        (this.basic === true || this.basic === 'true') ? this.setBasic() : null;
-        (this.icon === true || this.icon === 'true') ? this.setIcon() : null;
-    }
-    setSize() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
-        this._config.size = this.size;
-        if (this.sizeXs) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-xs-${this.sizeXs}`);
-            this._config.sizeXs = this.sizeXs;
-        }
-        if (this.sizeSm) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-sm-${this.sizeSm}`);
-            this._config.sizeSm = this.sizeSm;
-        }
-        if (this.sizeMd) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-md-${this.sizeMd}`);
-            this._config.sizeMd = this.sizeMd;
-        }
-        if (this.sizeLg) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-lg-${this.sizeLg}`);
-            this._config.sizeLg = this.sizeLg;
-        }
-        if (this.sizeXl) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-xl-${this.sizeXl}`);
-            this._config.sizeXl = this.sizeXl;
-        }
-    }
-    setOutline() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-outline`);
-    }
-    setPill() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-pill`);
-    }
-    setLink() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-link`);
-    }
-    setBasic() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-basic`);
-        this._renderer.addClass(this._elementRef.nativeElement, `basic`);
-    }
-    setIcon() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-icon`);
-    }
-    addRippleEffect(e) {
-        var target = e.target;
-        if (target.tagName.toLowerCase() !== 'button')
-            return false;
-        var rect = target.getBoundingClientRect();
-        var ripple = target.querySelector('.ripple');
-        if (!ripple) {
-            ripple = document.createElement('span');
-            ripple.className = `ripple`;
-            ripple.style.height = ripple.style.width = target.offsetWidth + 'px';
-            target.appendChild(ripple);
-        }
-        ripple.classList.remove('show');
-        var top = e.pageY - rect.top - ripple.offsetHeight / 2 - window.scrollY;
-        var left = e.pageX - rect.left - ripple.offsetWidth / 2 - window.scrollX;
-        ripple.style.top = top + 'px';
-        ripple.style.left = left + 'px';
-        ripple.classList.add('show');
-        return false;
-    }
-    ngOnDestroy() {
-        const buttons = document.querySelectorAll('.matcha-button');
-        buttons.forEach(button => {
-            button.removeEventListener('click', this.addRippleEffect, false);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaButtonComponent, isStandalone: false, selector: "[matcha-button]", inputs: { size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"], color: "color", basic: "basic", outline: "outline", alpha: "alpha", pill: "pill", icon: "icon", link: "link" }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[matcha-button]', standalone: false, template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }], propDecorators: { size: [{
-                type: Input,
-                args: ['size']
-            }], sizeXs: [{
-                type: Input,
-                args: ['size-xs']
-            }], sizeSm: [{
-                type: Input,
-                args: ['size-sm']
-            }], sizeMd: [{
-                type: Input,
-                args: ['size-md']
-            }], sizeLg: [{
-                type: Input,
-                args: ['size-lg']
-            }], sizeXl: [{
-                type: Input,
-                args: ['size-xl']
-            }], color: [{
-                type: Input,
-                args: ['color']
-            }], basic: [{
-                type: Input,
-                args: ['basic']
-            }], outline: [{
-                type: Input,
-                args: ['outline']
-            }], alpha: [{
-                type: Input,
-                args: ['alpha']
-            }], pill: [{
-                type: Input,
-                args: ['pill']
-            }], icon: [{
-                type: Input,
-                args: ['icon']
-            }], link: [{
-                type: Input,
-                args: ['link']
-            }] } });
-
-class MatchaButtonItemComponent {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.active = false;
-        this.selected = new EventEmitter();
-    }
-    ngAfterContentInit() {
-        if (this.innerButton) {
-            this.renderer.listen(this.innerButton.nativeElement, 'click', () => this.onClick());
-        }
-    }
-    onClick() {
-        this.selected.emit();
-    }
-    setActiveState(isActive, inactiveColor, inactiveType) {
-        this.active = isActive;
-        const color = isActive ? '' : inactiveColor;
-        const type = isActive ? '' : inactiveType;
-        // Aplica a cor correta ao botão interno 
-        if (isActive) {
-            this.renderer.setAttribute(this.innerButton.nativeElement, 'active-item', 'true');
-        }
-        else {
-            this.renderer.removeAttribute(this.innerButton.nativeElement, 'active-item');
-        }
-        // inactiveType - pode ser 'basic', 'outline', 'alpha' ou 'pill'
-        // Se o tipo for 'basic', 'outline', 'alpha' ou 'pill', aplica o tipo correto
-        // Limpa todos os tipos anteriores
-        // ['basic', 'outline', 'alpha', 'pill'].forEach(attr => {
-        //   this.renderer.setAttribute(this.innerButton.nativeElement, attr, 'false');
-        // });
-        // Aplica o tipo correto ao botão interno se houver algum
-        // if (type) {
-        //   this.renderer.setAttribute(this.innerButton.nativeElement, type, 'true');
-        // }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonItemComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaButtonItemComponent, isStandalone: false, selector: "matcha-button-item", inputs: { active: "active" }, outputs: { selected: "selected" }, queries: [{ propertyName: "innerButton", first: true, predicate: MatchaButtonComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'matcha-button-item', standalone: false, template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { active: [{
-                type: Input
-            }], selected: [{
-                type: Output
-            }], innerButton: [{
-                type: ContentChild,
-                args: [MatchaButtonComponent, { static: true, read: ElementRef }]
-            }] } });
-
-class MatchaButtonGroupComponent {
-    constructor() {
-        this._multiple = false;
-        this._disabled = false;
-        this.inactiveColor = 'disabled';
-        this.inactiveType = 'basic';
-        this._gap = 16;
-    }
-    get multiple() {
-        return this._multiple;
-    }
-    set multiple(value) {
-        this._multiple = value === 'false' ? false : Boolean(value);
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value === 'false' ? false : Boolean(value);
-    }
-    get isDisabled() {
-        return this.disabled || null;
-    }
-    set gap(value) {
-        const numericGap = Number(value);
-        this._gap = isNaN(numericGap) ? 16 : numericGap;
-    }
-    get gapClass() {
-        return `gap-${this._gap}`;
-    }
-    ngAfterContentInit() {
-        this.buttonItems.forEach((item, index) => {
-            const isFirst = index === 0;
-            // Opcionalmente, primeiro botão pode iniciar ativo por padrão
-            item.setActiveState(isFirst, this.inactiveColor, this.inactiveType);
-            item.selected.subscribe(() => this.onItemSelected(item));
-        });
-    }
-    onItemSelected(selectedItem) {
-        if (this.multiple) {
-            selectedItem.setActiveState(!selectedItem.active, this.inactiveColor, this.inactiveType);
-        }
-        else {
-            this.buttonItems.forEach(item => {
-                item.setActiveState(item === selectedItem, this.inactiveColor, this.inactiveType);
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaButtonGroupComponent, isStandalone: false, selector: "matcha-button-group", inputs: { multiple: "multiple", disabled: "disabled", inactiveColor: "inactiveColor", inactiveType: "inactiveType", gap: "gap" }, host: { properties: { "attr.disabled": "this.isDisabled" } }, queries: [{ propertyName: "buttonItems", predicate: MatchaButtonItemComponent }], ngImport: i0, template: "<div class=\"button-group d-flex flex-wrap\" [ngClass]=\"gapClass\" role=\"group\"><ng-content></ng-content></div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'matcha-button-group', standalone: false, template: "<div class=\"button-group d-flex flex-wrap\" [ngClass]=\"gapClass\" role=\"group\"><ng-content></ng-content></div>\n" }]
-        }], propDecorators: { multiple: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], inactiveColor: [{
-                type: Input
-            }], inactiveType: [{
-                type: Input
-            }], gap: [{
-                type: Input
-            }], buttonItems: [{
-                type: ContentChildren,
-                args: [MatchaButtonItemComponent]
-            }] } });
-
 const customAnimation = animation([
     style({
         opacity: '{{opacity}}',
@@ -697,10 +383,10 @@ class MatchaAccordionItemComponent {
         this.isOpen = !this.isOpen;
         this.opened.emit(this.isOpen);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaAccordionItemComponent, isStandalone: false, selector: "matcha-accordion-item", inputs: { stretch: "stretch", isOpen: "isOpen" }, outputs: { opened: "opened" }, ngImport: i0, template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\" (click)=\"toggleAccordion()\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], animations: [...createAnimations] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaAccordionItemComponent, isStandalone: false, selector: "matcha-accordion-item", inputs: { stretch: "stretch", isOpen: "isOpen" }, outputs: { opened: "opened" }, ngImport: i0, template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\" (click)=\"toggleAccordion()\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], animations: [...createAnimations] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-accordion-item', standalone: false, animations: [...createAnimations], template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\" (click)=\"toggleAccordion()\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
         }], propDecorators: { stretch: [{
@@ -741,10 +427,10 @@ class MatchaAccordionComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaAccordionComponent, isStandalone: false, selector: "matcha-accordion", inputs: { multiple: "multiple" }, outputs: { openedChange: "openedChange" }, queries: [{ propertyName: "items", predicate: MatchaAccordionItemComponent }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaAccordionComponent, isStandalone: false, selector: "matcha-accordion", inputs: { multiple: "multiple" }, outputs: { openedChange: "openedChange" }, queries: [{ propertyName: "items", predicate: MatchaAccordionItemComponent }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-accordion', standalone: false, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { multiple: [{
@@ -758,19 +444,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 
 class MatchaAccordionHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaAccordionHeaderComponent, isStandalone: false, selector: "matcha-accordion-header", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaAccordionHeaderComponent, isStandalone: false, selector: "matcha-accordion-header", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-accordion-header', standalone: false, template: "<ng-content></ng-content>\n" }]
         }] });
 
 class MatchaAccordionContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaAccordionContentComponent, isStandalone: false, selector: "matcha-accordion-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaAccordionContentComponent, isStandalone: false, selector: "matcha-accordion-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-accordion-content', standalone: false, template: "<ng-content></ng-content>\n" }]
         }] });
@@ -809,10 +495,10 @@ class MatchaInfiniteScrollComponent {
     ngOnDestroy() {
         this.observer.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaInfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaInfiniteScrollComponent, isStandalone: false, selector: "matcha-infinite-scroll", outputs: { scrolledToEnd: "scrolledToEnd" }, ngImport: i0, template: "", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaInfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaInfiniteScrollComponent, isStandalone: false, selector: "matcha-infinite-scroll", outputs: { scrolledToEnd: "scrolledToEnd" }, ngImport: i0, template: "", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaInfiniteScrollComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaInfiniteScrollComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-infinite-scroll', standalone: false, template: "" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scrolledToEnd: [{
@@ -888,68 +574,259 @@ class MatchaInfiniteScrollDataComponent {
         this.aggregatedData.emit(this.aggregatedList);
         this.checkExactMatch();
     }
-    /**
-     * Reseta apenas as assinaturas e o estado dos dados (não a inscrição do searchTerm).
-     */
-    resetData() {
-        // Cancela as assinaturas das chamadas de loadData
-        this.dataSubscription.unsubscribe();
-        this.dataSubscription = new Subscription();
-        // Re-inicializa a lista e o contador
-        this.initialize();
+    /**
+     * Reseta apenas as assinaturas e o estado dos dados (não a inscrição do searchTerm).
+     */
+    resetData() {
+        // Cancela as assinaturas das chamadas de loadData
+        this.dataSubscription.unsubscribe();
+        this.dataSubscription = new Subscription();
+        // Re-inicializa a lista e o contador
+        this.initialize();
+    }
+    /**
+     * Carrega a próxima página de dados utilizando a função loadData.
+     */
+    loadNextPage() {
+        if (!this.loadData) {
+            return;
+        }
+        this.currentPage++;
+        const dataObservable = this.loadData(this.currentPage);
+        const sub = dataObservable.subscribe(data => {
+            if (data && data.length) {
+                this.aggregatedList = [...this.aggregatedList, ...data];
+                this.aggregatedData.emit(this.aggregatedList);
+                this.checkExactMatch();
+            }
+        });
+        this.dataSubscription.add(sub);
+    }
+    /**
+     * Verifica se a lista agregada possui exatamente um item e se esse item é igual ao searchTerm.
+     * Se sim, emite o output exactMatch com esse item.
+     */
+    checkExactMatch() {
+        if (this.aggregatedList.length === 1 && this.aggregatedList[0] === this.searchTerm) {
+            this.exactMatch.emit(this.aggregatedList[0]);
+        }
+    }
+    ngOnDestroy() {
+        this.observer.disconnect();
+        this.dataSubscription.unsubscribe();
+        this.searchSubscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaInfiniteScrollDataComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaInfiniteScrollDataComponent, isStandalone: false, selector: "matcha-infinite-scroll-data", inputs: { loadData: "loadData", initialList: "initialList", threshold: "threshold", resetKey: "resetKey", searchTerm: "searchTerm" }, outputs: { aggregatedData: "aggregatedData", exactMatch: "exactMatch" }, usesOnChanges: true, ngImport: i0, template: "", styles: ["", ":host{height:1px;opacity:0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaInfiniteScrollDataComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-infinite-scroll-data', standalone: false, template: "", styles: [":host{height:1px;opacity:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { loadData: [{
+                type: Input
+            }], initialList: [{
+                type: Input
+            }], threshold: [{
+                type: Input
+            }], resetKey: [{
+                type: Input
+            }], searchTerm: [{
+                type: Input
+            }], aggregatedData: [{
+                type: Output
+            }], exactMatch: [{
+                type: Output
+            }] } });
+
+class MatchaButtonComponent {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this.size = null;
+        this.sizeXs = null;
+        this.sizeSm = null;
+        this.sizeMd = null;
+        this.sizeLg = null;
+        this.sizeXl = null;
+        this.color = 'basic';
+        this.basic = false;
+        this.outline = false;
+        this.alpha = false;
+        this.pill = false;
+        this.icon = false;
+        this.link = false;
+        this._config = {
+            sizeXs: 'tiny',
+            sizeSm: 'small',
+            sizeMd: 'medium',
+            sizeLg: 'large',
+            sizeXl: 'huge',
+            size: 'medium',
+            basic: false,
+            outline: false,
+            pill: false,
+            icon: false,
+            link: false
+        };
+    }
+    ngOnInit() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button`);
+        this.setConfig();
+        // Adicione o evento de clique apenas a elementos com a classe "matcha-button"
+        const buttons = document.querySelectorAll('.matcha-button');
+        buttons.forEach(button => {
+            // mouse down event
+            button.addEventListener('mousedown', this.addRippleEffect, false);
+        });
+    }
+    ngOnChanges() {
+        this.setConfig();
+    }
+    clearConfig() {
+        //size
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-${this._config.size}`);
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-xs-${this._config.sizeXs}`);
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-sm-${this._config.sizeSm}`);
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-md-${this._config.sizeMd}`);
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-lg-${this._config.sizeLg}`);
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-xl-${this._config.sizeXl}`);
+        //basic
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-icon`);
+        //outline
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-outline`);
+        //pill
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-pill`);
+        //icon
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-basic`);
+        //link
+        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-link`);
+    }
+    setConfig() {
+        this.clearConfig();
+        this.size ? this.setSize() : null;
+        (this.outline === true || this.outline === 'true') ? this.setOutline() : null;
+        (this.pill === true || this.pill === 'true') ? this.setPill() : null;
+        (this.link === true || this.link === 'true') ? this.setLink() : null;
+        (this.basic === true || this.basic === 'true') ? this.setBasic() : null;
+        (this.icon === true || this.icon === 'true') ? this.setIcon() : null;
+    }
+    setSize() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
+        this._config.size = this.size;
+        if (this.sizeXs) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-xs-${this.sizeXs}`);
+            this._config.sizeXs = this.sizeXs;
+        }
+        if (this.sizeSm) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-sm-${this.sizeSm}`);
+            this._config.sizeSm = this.sizeSm;
+        }
+        if (this.sizeMd) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-md-${this.sizeMd}`);
+            this._config.sizeMd = this.sizeMd;
+        }
+        if (this.sizeLg) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-lg-${this.sizeLg}`);
+            this._config.sizeLg = this.sizeLg;
+        }
+        if (this.sizeXl) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-xl-${this.sizeXl}`);
+            this._config.sizeXl = this.sizeXl;
+        }
+    }
+    setOutline() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-outline`);
+    }
+    setPill() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-pill`);
     }
-    /**
-     * Carrega a próxima página de dados utilizando a função loadData.
-     */
-    loadNextPage() {
-        if (!this.loadData) {
-            return;
-        }
-        this.currentPage++;
-        const dataObservable = this.loadData(this.currentPage);
-        const sub = dataObservable.subscribe(data => {
-            if (data && data.length) {
-                this.aggregatedList = [...this.aggregatedList, ...data];
-                this.aggregatedData.emit(this.aggregatedList);
-                this.checkExactMatch();
-            }
-        });
-        this.dataSubscription.add(sub);
+    setLink() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-link`);
     }
-    /**
-     * Verifica se a lista agregada possui exatamente um item e se esse item é igual ao searchTerm.
-     * Se sim, emite o output exactMatch com esse item.
-     */
-    checkExactMatch() {
-        if (this.aggregatedList.length === 1 && this.aggregatedList[0] === this.searchTerm) {
-            this.exactMatch.emit(this.aggregatedList[0]);
+    setBasic() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-basic`);
+        this._renderer.addClass(this._elementRef.nativeElement, `basic`);
+    }
+    setIcon() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-icon`);
+    }
+    addRippleEffect(e) {
+        var target = e.target;
+        if (target.tagName.toLowerCase() !== 'button')
+            return false;
+        var rect = target.getBoundingClientRect();
+        var ripple = target.querySelector('.ripple');
+        if (!ripple) {
+            ripple = document.createElement('span');
+            ripple.className = `ripple`;
+            ripple.style.height = ripple.style.width = target.offsetWidth + 'px';
+            target.appendChild(ripple);
         }
+        ripple.classList.remove('show');
+        var top = e.pageY - rect.top - ripple.offsetHeight / 2 - window.scrollY;
+        var left = e.pageX - rect.left - ripple.offsetWidth / 2 - window.scrollX;
+        ripple.style.top = top + 'px';
+        ripple.style.left = left + 'px';
+        ripple.classList.add('show');
+        return false;
     }
     ngOnDestroy() {
-        this.observer.disconnect();
-        this.dataSubscription.unsubscribe();
-        this.searchSubscription.unsubscribe();
+        const buttons = document.querySelectorAll('.matcha-button');
+        buttons.forEach(button => {
+            button.removeEventListener('click', this.addRippleEffect, false);
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaInfiniteScrollDataComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaInfiniteScrollDataComponent, isStandalone: false, selector: "matcha-infinite-scroll-data", inputs: { loadData: "loadData", initialList: "initialList", threshold: "threshold", resetKey: "resetKey", searchTerm: "searchTerm" }, outputs: { aggregatedData: "aggregatedData", exactMatch: "exactMatch" }, usesOnChanges: true, ngImport: i0, template: "", styles: ["", ":host{height:1px;opacity:0}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaButtonComponent, isStandalone: false, selector: "[matcha-button]", inputs: { size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"], color: "color", basic: "basic", outline: "outline", alpha: "alpha", pill: "pill", icon: "icon", link: "link" }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaInfiniteScrollDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-infinite-scroll-data', standalone: false, template: "", styles: [":host{height:1px;opacity:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { loadData: [{
-                type: Input
-            }], initialList: [{
-                type: Input
-            }], threshold: [{
-                type: Input
-            }], resetKey: [{
-                type: Input
-            }], searchTerm: [{
-                type: Input
-            }], aggregatedData: [{
-                type: Output
-            }], exactMatch: [{
-                type: Output
+            args: [{ selector: '[matcha-button]', standalone: false, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }], propDecorators: { size: [{
+                type: Input,
+                args: ['size']
+            }], sizeXs: [{
+                type: Input,
+                args: ['size-xs']
+            }], sizeSm: [{
+                type: Input,
+                args: ['size-sm']
+            }], sizeMd: [{
+                type: Input,
+                args: ['size-md']
+            }], sizeLg: [{
+                type: Input,
+                args: ['size-lg']
+            }], sizeXl: [{
+                type: Input,
+                args: ['size-xl']
+            }], color: [{
+                type: Input,
+                args: ['color']
+            }], basic: [{
+                type: Input,
+                args: ['basic']
+            }], outline: [{
+                type: Input,
+                args: ['outline']
+            }], alpha: [{
+                type: Input,
+                args: ['alpha']
+            }], pill: [{
+                type: Input,
+                args: ['pill']
+            }], icon: [{
+                type: Input,
+                args: ['icon']
+            }], link: [{
+                type: Input,
+                args: ['link']
             }] } });
 
 class MatchaCardComponent {
@@ -992,10 +869,10 @@ class MatchaCardComponent {
     hasBlockquotePosition() {
         return this.blockquote === 'left' || this.blockquote === 'right';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaCardComponent, isStandalone: false, selector: "matcha-card", inputs: { blockquote: "blockquote", color: "color", blockquoteColor: "blockquoteColor", class: "class", alpha: "alpha", tint: "tint", loading: "loading" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaCardComponent, isStandalone: false, selector: "matcha-card", inputs: { blockquote: "blockquote", color: "color", blockquoteColor: "blockquoteColor", class: "class", alpha: "alpha", tint: "tint", loading: "loading" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-card', standalone: false, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { blockquote: [{
@@ -1055,10 +932,10 @@ class MatchaDividerComponent {
         activeClasses += gapXl ? ` ${gapXl}` : '';
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaDividerComponent, isStandalone: false, selector: "matcha-divider", inputs: { gap: "gap", gapSm: ["gap-sm", "gapSm"], gapMd: ["gap-md", "gapMd"], gapLg: ["gap-lg", "gapLg"], gapXl: ["gap-xl", "gapXl"], vertical: "vertical" }, ngImport: i0, template: "<div [class]=\"classes\"></div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaDividerComponent, isStandalone: false, selector: "matcha-divider", inputs: { gap: "gap", gapSm: ["gap-sm", "gapSm"], gapMd: ["gap-md", "gapMd"], gapLg: ["gap-lg", "gapLg"], gapXl: ["gap-xl", "gapXl"], vertical: "vertical" }, ngImport: i0, template: "<div [class]=\"classes\"></div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaDividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-divider', standalone: false, template: "<div [class]=\"classes\"></div>\n" }]
         }], propDecorators: { gap: [{
@@ -1125,10 +1002,10 @@ class MatchaTitleComponent {
     hasIconClickOutput() {
         return this.iconClick.observers.length > 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaTitleComponent, isStandalone: false, selector: "matcha-title", inputs: { color: "color", size: "size", loading: "loading", type: "type", icon: "icon" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<!-- <matcha-title size=\"1\" type=\"bullet\"></matcha-title> -->\n\n<div class=\"d-flex flex-align-center m-0\">\n    <span [class]=\"signClasses\" [class.cursor-pointer]=\"hasIconClickOutput()\" (click)=\"emitIconAction()\"></span>\n    <span [class]=\"textClasses\">\n        <ng-content></ng-content>\n    </span>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaTitleComponent, isStandalone: false, selector: "matcha-title", inputs: { color: "color", size: "size", loading: "loading", type: "type", icon: "icon" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<!-- <matcha-title size=\"1\" type=\"bullet\"></matcha-title> -->\n\n<div class=\"d-flex flex-align-center m-0\">\n    <span [class]=\"signClasses\" [class.cursor-pointer]=\"hasIconClickOutput()\" (click)=\"emitIconAction()\"></span>\n    <span [class]=\"textClasses\">\n        <ng-content></ng-content>\n    </span>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-title', standalone: false, template: "<!-- <matcha-title size=\"1\" type=\"bullet\"></matcha-title> -->\n\n<div class=\"d-flex flex-align-center m-0\">\n    <span [class]=\"signClasses\" [class.cursor-pointer]=\"hasIconClickOutput()\" (click)=\"emitIconAction()\"></span>\n    <span [class]=\"textClasses\">\n        <ng-content></ng-content>\n    </span>\n</div>\n" }]
         }], propDecorators: { color: [{
@@ -1161,10 +1038,10 @@ class MatchaIconComponent {
         const activeClasses = `${icon} ${color} ${size} ${loading} ${this.class}`;
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaIconComponent, isStandalone: false, 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: "19.2.6", ngImport: i0, type: MatchaIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaIconComponent, isStandalone: false, 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: "19.2.5", ngImport: i0, type: MatchaIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-icon', standalone: false, template: "<span [class]=\"classes\">\n    <ng-content></ng-content>\n</span>\n" }]
         }], propDecorators: { name: [{
@@ -1261,10 +1138,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: "19.2.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: "19.2.5", type: MatchaGridComponent, isStandalone: false, 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: "19.2.6", 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: "19.2.6", type: MatchaGridComponent, isStandalone: false, 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: "19.2.5", ngImport: i0, type: MatchaGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-grid', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { breakpoint: [{
@@ -1324,10 +1201,10 @@ class MatchaMasonryComponent {
         activeClasses += gapXl ? ` ${gapXl}` : '';
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaMasonryComponent, isStandalone: false, selector: "matcha-masonry", inputs: { colSize: ["col", "colSize"], smColSize: ["col-sm", "smColSize"], mdColSize: ["col-md", "mdColSize"], lgColSize: ["col-lg", "lgColSize"], xlColSize: ["col-xl", "xlColSize"], gap: "gap", gapSm: ["gap-sm", "gapSm"], gapMd: ["gap-md", "gapMd"], gapLg: ["gap-lg", "gapLg"], gapXl: ["gap-xl", "gapXl"] }, 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: "19.2.6", ngImport: i0, type: MatchaMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaMasonryComponent, isStandalone: false, selector: "matcha-masonry", inputs: { colSize: ["col", "colSize"], smColSize: ["col-sm", "smColSize"], mdColSize: ["col-md", "mdColSize"], lgColSize: ["col-lg", "lgColSize"], xlColSize: ["col-xl", "xlColSize"], gap: "gap", gapSm: ["gap-sm", "gapSm"], gapMd: ["gap-md", "gapMd"], gapLg: ["gap-lg", "gapLg"], gapXl: ["gap-xl", "gapXl"] }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaMasonryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaMasonryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-masonry', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { colSize: [{
@@ -1363,19 +1240,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 
 class MatchaModalContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaModalContentComponent, isStandalone: false, selector: "matcha-modal-content", ngImport: i0, template: "\n<div class=\"py-24 pt-0 overflow-auto\" style=\"max-height: calc(100vh - 300px);\n\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 flex-column--force\">\n        <div class=\"flex-col matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaModalContentComponent, isStandalone: false, selector: "matcha-modal-content", ngImport: i0, template: "\n<div class=\"py-24 pt-0 overflow-auto\" style=\"max-height: calc(100vh - 300px);\n\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 flex-column--force\">\n        <div class=\"flex-col matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-modal-content', standalone: false, template: "\n<div class=\"py-24 pt-0 overflow-auto\" style=\"max-height: calc(100vh - 300px);\n\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 flex-column--force\">\n        <div class=\"flex-col matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n" }]
         }] });
 
 class MatchaModalHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaModalHeaderComponent, isStandalone: false, selector: "matcha-modal-header", ngImport: i0, template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section pt-16 px-16 pt-md-24 px-md-24\">\n    <div class=\"d-flex flex-wrap flex-space-between mb-16 mb-md-24\">\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "vertical"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaModalHeaderComponent, isStandalone: false, selector: "matcha-modal-header", ngImport: i0, template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section pt-16 px-16 pt-md-24 px-md-24\">\n    <div class=\"d-flex flex-wrap flex-space-between mb-16 mb-md-24\">\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "vertical"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-modal-header', standalone: false, template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section pt-16 px-16 pt-md-24 px-md-24\">\n    <div class=\"d-flex flex-wrap flex-space-between mb-16 mb-md-24\">\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n" }]
         }] });
@@ -1401,10 +1278,10 @@ class MatchaModalFooterComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaModalFooterComponent, isStandalone: false, selector: "matcha-modal-footer", inputs: { buttonType: ["", "buttonType"] }, ngImport: i0, template: "<div class=\"matcha-section pb-16 px-16 pb-md-24 px-md-24\">\n    <matcha-divider></matcha-divider>\n    <div class=\"flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "vertical"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaModalFooterComponent, isStandalone: false, selector: "matcha-modal-footer", inputs: { buttonType: ["", "buttonType"] }, ngImport: i0, template: "<div class=\"matcha-section pb-16 px-16 pb-md-24 px-md-24\">\n    <matcha-divider></matcha-divider>\n    <div class=\"flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "vertical"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-modal-footer', standalone: false, template: "<div class=\"matcha-section pb-16 px-16 pb-md-24 px-md-24\">\n    <matcha-divider></matcha-divider>\n    <div class=\"flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16\">\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
         }], propDecorators: { buttonType: [{
@@ -1413,10 +1290,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 
 class MatchaModalOptionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaModalOptionsComponent, isStandalone: false, selector: "matcha-modal-options", ngImport: i0, template: "<div class=\"flex-row gap-8\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaModalOptionsComponent, isStandalone: false, selector: "matcha-modal-options", ngImport: i0, template: "<div class=\"flex-row gap-8\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalOptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-modal-options', standalone: false, template: "<div class=\"flex-row gap-8\">\n    <ng-content></ng-content>\n</div>\n" }]
         }] });
@@ -1429,10 +1306,10 @@ class MatchaModalComponent {
         const activeClasses = `background-surface radius-8 flex-column ${this.class}`;
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaModalComponent, isStandalone: false, selector: "matcha-modal", inputs: { class: "class" }, host: { properties: { "class": "this.classes" } }, 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: "19.2.6", ngImport: i0, type: MatchaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaModalComponent, isStandalone: false, selector: "matcha-modal", inputs: { class: "class" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-modal', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { class: [{
@@ -1471,10 +1348,10 @@ class MatchaMenuComponent {
     toggleMenu() {
         this.isOpen = !this.isOpen;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaMenuComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaMenuComponent, isStandalone: false, 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaMenuComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaMenuComponent, isStandalone: false, 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: "19.2.5", ngImport: i0, type: MatchaMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-menu', exportAs: 'matchaMenu', standalone: false, template: "<div class=\"menu\" [ngClass]=\"{'show': isOpen}\">\n    <ng-content></ng-content>\n  </div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
@@ -1513,10 +1390,10 @@ class MatchaToolbarComponent {
     ngOnDestroy() {
         clearTimeout(this.resizeTimeout);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaToolbarComponent, isStandalone: false, selector: "matcha-toolbar", host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar>\n    <matcha-title type=\"icon\" icon=\"settings-out\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n        {{'FINANCIAL.CATEGORY.TITLE' | translate}}\n    </matcha-title>\n    <search-form toolbar-form-field (searchText)=\"searchText($event)\"></search-form>\n    <matcha-toolbar-button icon=\"home-out\" (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-button>\n    <matcha-toolbar-content>\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-content>\n    <matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-main-button>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</matcha-toolbar>\n-->\n<ng-template #toolbarMainButton>\n    <ng-content select=\"matcha-toolbar-main-button\"></ng-content>\n</ng-template>\n<!-- CONTENT HEADER -->\n<div class=\"flex-column background-surface radius-8 matcha-elevation-z1\">\n    <div class=\"flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-40 flex-wrap\">\n        <div class=\"w-100-p--force w-md-auto--force flex-space-between flex-wrap\">\n            <div class=\"min-h-32 flex-center-center\">\n                <ng-content select=\"matcha-title\"></ng-content>\n            </div>\n            <ng-container *ngIf=\"isMobileScreen\">\n                <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n            </ng-container>\n        </div>\n        <div class=\"w-100-p--force w-md-auto--force flex-row flex-end gap-8\">\n            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <ng-content select=\"search-form\"></ng-content>\n            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <div class=\"flex-row gap-8\">\n                <ng-content select=\"matcha-toolbar-button\"></ng-content>\n                <ng-content select=\"matcha-toolbar-content\"></ng-content>\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!isMobileScreen\">\n                    <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- / CONTENT HEADER -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaToolbarComponent, isStandalone: false, selector: "matcha-toolbar", host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar>\n    <matcha-title type=\"icon\" icon=\"settings-out\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n        {{'FINANCIAL.CATEGORY.TITLE' | translate}}\n    </matcha-title>\n    <search-form toolbar-form-field (searchText)=\"searchText($event)\"></search-form>\n    <matcha-toolbar-button icon=\"home-out\" (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-button>\n    <matcha-toolbar-content>\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-content>\n    <matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-main-button>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</matcha-toolbar>\n-->\n<ng-template #toolbarMainButton>\n    <ng-content select=\"matcha-toolbar-main-button\"></ng-content>\n</ng-template>\n<!-- CONTENT HEADER -->\n<div class=\"flex-column background-surface radius-8 matcha-elevation-z1\">\n    <div class=\"flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-40 flex-wrap\">\n        <div class=\"w-100-p--force w-md-auto--force flex-space-between flex-wrap\">\n            <div class=\"min-h-32 flex-center-center\">\n                <ng-content select=\"matcha-title\"></ng-content>\n            </div>\n            <ng-container *ngIf=\"isMobileScreen\">\n                <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n            </ng-container>\n        </div>\n        <div class=\"w-100-p--force w-md-auto--force flex-row flex-end gap-8\">\n            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <ng-content select=\"search-form\"></ng-content>\n            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <div class=\"flex-row gap-8\">\n                <ng-content select=\"matcha-toolbar-button\"></ng-content>\n                <ng-content select=\"matcha-toolbar-content\"></ng-content>\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!isMobileScreen\">\n                    <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- / CONTENT HEADER -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-toolbar', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar>\n    <matcha-title type=\"icon\" icon=\"settings-out\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n        {{'FINANCIAL.CATEGORY.TITLE' | translate}}\n    </matcha-title>\n    <search-form toolbar-form-field (searchText)=\"searchText($event)\"></search-form>\n    <matcha-toolbar-button icon=\"home-out\" (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-button>\n    <matcha-toolbar-content>\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-content>\n    <matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-main-button>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</matcha-toolbar>\n-->\n<ng-template #toolbarMainButton>\n    <ng-content select=\"matcha-toolbar-main-button\"></ng-content>\n</ng-template>\n<!-- CONTENT HEADER -->\n<div class=\"flex-column background-surface radius-8 matcha-elevation-z1\">\n    <div class=\"flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-40 flex-wrap\">\n        <div class=\"w-100-p--force w-md-auto--force flex-space-between flex-wrap\">\n            <div class=\"min-h-32 flex-center-center\">\n                <ng-content select=\"matcha-title\"></ng-content>\n            </div>\n            <ng-container *ngIf=\"isMobileScreen\">\n                <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n            </ng-container>\n        </div>\n        <div class=\"w-100-p--force w-md-auto--force flex-row flex-end gap-8\">\n            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <ng-content select=\"search-form\"></ng-content>\n            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <div class=\"flex-row gap-8\">\n                <ng-content select=\"matcha-toolbar-button\"></ng-content>\n                <ng-content select=\"matcha-toolbar-content\"></ng-content>\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!isMobileScreen\">\n                    <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- / CONTENT HEADER -->\n" }]
         }], propDecorators: { onResize: [{
@@ -1536,10 +1413,10 @@ class MatchaToolbarButtonComponent {
     emitButtonClick() {
         this.buttonClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaToolbarButtonComponent, isStandalone: false, selector: "matcha-toolbar-button", inputs: { icon: "icon" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\" toolbar-button-tooltip=\"TOOLTIP-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-button>\n-->\n<button matcha-button outline=\"true\" size=\"small\" color=\"grey\" icon=\"true\" class=\"mt-16 mt-md-0\" (click)=\"emitButtonClick()\">\n    <span [class]=\"classes\"></span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "color", "basic", "outline", "alpha", "pill", "icon", "link"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaToolbarButtonComponent, isStandalone: false, selector: "matcha-toolbar-button", inputs: { icon: "icon" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\" toolbar-button-tooltip=\"TOOLTIP-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-button>\n-->\n<button matcha-button outline=\"true\" size=\"small\" color=\"grey\" icon=\"true\" class=\"mt-16 mt-md-0\" (click)=\"emitButtonClick()\">\n    <span [class]=\"classes\"></span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "color", "basic", "outline", "alpha", "pill", "icon", "link"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-toolbar-button', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\" toolbar-button-tooltip=\"TOOLTIP-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-button>\n-->\n<button matcha-button outline=\"true\" size=\"small\" color=\"grey\" icon=\"true\" class=\"mt-16 mt-md-0\" (click)=\"emitButtonClick()\">\n    <span [class]=\"classes\"></span>\n</button>\n" }]
         }], propDecorators: { icon: [{
@@ -1550,10 +1427,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 
 class MatchaToolbarContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaToolbarContentComponent, isStandalone: false, selector: "matcha-toolbar-content", ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-content>\n    OUTROS CONTEUDOS CUSTOMIZADOS NA TOOLBAR\n</matcha-toolbar-content>\n-->\n<div class=\"d-flex flex-wrap gap-8 mt-16 mt-md-0\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaToolbarContentComponent, isStandalone: false, selector: "matcha-toolbar-content", ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-content>\n    OUTROS CONTEUDOS CUSTOMIZADOS NA TOOLBAR\n</matcha-toolbar-content>\n-->\n<div class=\"d-flex flex-wrap gap-8 mt-16 mt-md-0\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-toolbar-content', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar-content>\n    OUTROS CONTEUDOS CUSTOMIZADOS NA TOOLBAR\n</matcha-toolbar-content>\n-->\n<div class=\"d-flex flex-wrap gap-8 mt-16 mt-md-0\">\n    <ng-content></ng-content>\n</div>\n" }]
         }] });
@@ -1565,10 +1442,10 @@ class MatchaToolbarMainButtonComponent {
     emitButtonClick() {
         this.buttonClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarMainButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaToolbarMainButtonComponent, isStandalone: false, selector: "matcha-toolbar-main-button", outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-main-button>\n-->\n<button matcha-button size=\"tiny\" size-md=\"small\" color=\"accent\" (click)=\"emitButtonClick()\">\n    <span class=\"i-matcha-action_plus i-size-sm ml--4\"></span>\n    <span class=\"ml-8 fs-14\">\n        <ng-content></ng-content>\n    </span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "color", "basic", "outline", "alpha", "pill", "icon", "link"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarMainButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaToolbarMainButtonComponent, isStandalone: false, selector: "matcha-toolbar-main-button", outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-main-button>\n-->\n<button matcha-button size=\"tiny\" size-md=\"small\" color=\"accent\" (click)=\"emitButtonClick()\">\n    <span class=\"i-matcha-action_plus i-size-sm ml--4\"></span>\n    <span class=\"ml-8 fs-14\">\n        <ng-content></ng-content>\n    </span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "color", "basic", "outline", "alpha", "pill", "icon", "link"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarMainButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarMainButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-toolbar-main-button', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-main-button>\n-->\n<button matcha-button size=\"tiny\" size-md=\"small\" color=\"accent\" (click)=\"emitButtonClick()\">\n    <span class=\"i-matcha-action_plus i-size-sm ml--4\"></span>\n    <span class=\"ml-8 fs-14\">\n        <ng-content></ng-content>\n    </span>\n</button>\n" }]
         }], propDecorators: { buttonClick: [{
@@ -1591,10 +1468,10 @@ class MatchaFormFieldComponent {
     get showError() {
         return !!this.control?.invalid && (this.control?.touched || this.control?.dirty);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n</div>\n" }]
         }], propDecorators: { color: [{
@@ -1626,10 +1503,10 @@ class MatchaLabelComponent {
     constructor() {
         this.color = 'blue-grey';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n    <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n    <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-label', standalone: false, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n    <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>" }]
         }], propDecorators: { color: [{
@@ -1637,10 +1514,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 
 class MatchaErrorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaErrorComponent, isStandalone: false, selector: "matcha-error", ngImport: i0, template: "<p class=\"w-100-p color-red fs-12 lh-16 flex-row flex-align-center gap-4 m-0\">\n    <matcha-icon name=\"action_sign_warning-out\" size=\"sm\"></matcha-icon>\n    <ng-content></ng-content>\n</p>", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaErrorComponent, isStandalone: false, selector: "matcha-error", ngImport: i0, template: "<p class=\"w-100-p color-red fs-12 lh-16 flex-row flex-align-center gap-4 m-0\">\n    <matcha-icon name=\"action_sign_warning-out\" size=\"sm\"></matcha-icon>\n    <ng-content></ng-content>\n</p>", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-error', standalone: false, template: "<p class=\"w-100-p color-red fs-12 lh-16 flex-row flex-align-center gap-4 m-0\">\n    <matcha-icon name=\"action_sign_warning-out\" size=\"sm\"></matcha-icon>\n    <ng-content></ng-content>\n</p>" }]
         }] });
@@ -1698,10 +1575,10 @@ class MatchaRippleDirective {
         });
         this.ripples = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaRippleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: MatchaRippleDirective, isStandalone: false, selector: "[matchaRipple]", inputs: { rippleColor: "rippleColor" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaRippleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatchaRippleDirective, isStandalone: false, selector: "[matchaRipple]", inputs: { rippleColor: "rippleColor" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaRippleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaRippleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaRipple]',
@@ -1761,8 +1638,8 @@ class MatchaCheckboxComponent {
         this.onTouched();
         this.change.emit({ checked: this.checked });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaCheckboxComponent, isStandalone: false, selector: "matcha-checkbox", inputs: { color: "color", indeterminate: "indeterminate", disabled: "disabled", checked: "checked" }, outputs: { change: "change" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaCheckboxComponent, isStandalone: false, selector: "matcha-checkbox", inputs: { color: "color", indeterminate: "indeterminate", disabled: "disabled", checked: "checked" }, outputs: { change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaCheckboxComponent),
@@ -1770,7 +1647,7 @@ class MatchaCheckboxComponent {
             }
         ], ngImport: i0, template: "<label\n    class=\"matcha-checkbox flex-align-center\"\n    [class.matcha-checkbox-disabled]=\"disabled\">\n    <div\n        class=\"matcha-checkbox-container p-8 flex-center-center radius-full cursor-pointer\"\n        matchaRipple>\n        <input\n            type=\"checkbox\"\n            class=\"matcha-checkbox-input\"\n            [checked]=\"checked\"\n            [disabled]=\"disabled\"\n            [indeterminate]=\"indeterminate\"\n            (change)=\"onInputChange($event)\">\n    </div>\n\n    <span class=\"matcha-checkbox-label fw-500 fs-16 lh-20\">\n        <ng-content></ng-content>\n    </span>\n</label>", styles: [""], dependencies: [{ kind: "directive", type: MatchaRippleDirective, selector: "[matchaRipple]", inputs: ["rippleColor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-checkbox', standalone: false, providers: [
                         {
@@ -1838,10 +1715,10 @@ class MatchaSpinComponent {
         const progress = Math.min(Math.max(Number(this.progress), 0), 100);
         return this.circumference - (progress / 100) * this.circumference;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSpinComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaSpinComponent, isStandalone: false, selector: "matcha-spin", inputs: { progress: "progress", color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, ngImport: i0, template: "<div\n  class=\"matcha-spin\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\">\n    <circle\n      class=\"spin-placeholder\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n    />\n    <circle\n      class=\"spin-progress\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"progress ? dashOffset : null\"\n    />\n  </svg>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSpinComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaSpinComponent, isStandalone: false, selector: "matcha-spin", inputs: { progress: "progress", color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, ngImport: i0, template: "<div\n  class=\"matcha-spin\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\">\n    <circle\n      class=\"spin-placeholder\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n    />\n    <circle\n      class=\"spin-progress\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"progress ? dashOffset : null\"\n    />\n  </svg>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSpinComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSpinComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-spin', standalone: false, template: "<div\n  class=\"matcha-spin\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\">\n    <circle\n      class=\"spin-placeholder\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n    />\n    <circle\n      class=\"spin-progress\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"progress ? dashOffset : null\"\n    />\n  </svg>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
@@ -1895,10 +1772,10 @@ class MatchaHintTextComponent {
             default: return 'red';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaHintTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaHintTextComponent, isStandalone: false, selector: "matcha-hint-text", inputs: { type: "type", size: "size" }, ngImport: i0, template: "<div class=\"d-flex gap-4\">\n    <matcha-icon color=\"{{ iconColor }}\" name=\"{{ iconName }}\"> </matcha-icon>\n    <span class=\"text\"><ng-content></ng-content></span>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaHintTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaHintTextComponent, isStandalone: false, selector: "matcha-hint-text", inputs: { type: "type", size: "size" }, ngImport: i0, template: "<div class=\"d-flex gap-4\">\n    <matcha-icon color=\"{{ iconColor }}\" name=\"{{ iconName }}\"> </matcha-icon>\n    <span class=\"text\"><ng-content></ng-content></span>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaHintTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaHintTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-hint-text', standalone: false, template: "<div class=\"d-flex gap-4\">\n    <matcha-icon color=\"{{ iconColor }}\" name=\"{{ iconName }}\"> </matcha-icon>\n    <span class=\"text\"><ng-content></ng-content></span>\n</div>\n" }]
         }], propDecorators: { type: [{
@@ -1909,6 +1786,254 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 args: ['size']
             }] } });
 
+class MatchaButtonToggleItemComponent {
+    constructor(_render) {
+        this._render = _render;
+        this.active = false;
+        this.selected = new EventEmitter();
+    }
+    ngAfterContentInit() {
+        if (!this.innerButton) {
+            return;
+        }
+        /* considera <button … active-item> como ativo */
+        if (this.innerButton.nativeElement.hasAttribute('active-item')) {
+            this.active = true;
+        }
+        this._render.listen(this.innerButton.nativeElement, 'click', () => this.onClick());
+    }
+    onClick() {
+        this.selected.emit();
+    }
+    setActiveState(isActive, inactiveColor, inactiveType) {
+        this.active = isActive;
+        if (this.innerButton) {
+            /* liga/desliga atributo visual */
+            if (isActive) {
+                this._render.setAttribute(this.innerButton.nativeElement, 'active-item', 'true');
+            }
+            else {
+                this._render.removeAttribute(this.innerButton.nativeElement, 'active-item');
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonToggleItemComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaButtonToggleItemComponent, isStandalone: false, selector: "matcha-button-toggle-item", inputs: { active: "active" }, outputs: { selected: "selected" }, queries: [{ propertyName: "innerButton", first: true, predicate: MatchaButtonComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonToggleItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-button-toggle-item', standalone: false, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { active: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }], innerButton: [{
+                type: ContentChild,
+                args: [MatchaButtonComponent, { static: true, read: ElementRef }]
+            }] } });
+
+class MatchaButtonToggleComponent {
+    constructor() {
+        /* entradas originais */
+        this._multiple = false;
+        this._disabled = false;
+        this._required = false;
+        this.inactiveColor = 'disabled';
+        this.inactiveType = 'basic';
+        this._gap = 16;
+    }
+    get multiple() { return this._multiple; }
+    set multiple(v) { this._multiple = v === 'false' ? false : !!v; }
+    get disabled() { return this._disabled; }
+    set disabled(v) { this._disabled = v === 'false' ? false : !!v; }
+    get isDisabled() { return this.disabled || null; }
+    get required() { return this._required; }
+    set required(v) { this._required = v === 'false' ? false : !!v; }
+    set gap(v) { const n = +v; this._gap = isNaN(n) ? 16 : n; }
+    get gapClass() { return `gap-${this._gap}`; }
+    /* ────────────────────────────────────── */
+    ngAfterContentInit() {
+        /* se algum veio com [active] / active-item usa-o, senão o primeiro */
+        const preset = this.buttonToggleItems.find(i => i.active);
+        this.buttonToggleItems.forEach((item, idx) => {
+            const isActive = preset ? item === preset : idx === 0;
+            item.setActiveState(isActive, this.inactiveColor, this.inactiveType);
+            item.selected.subscribe(() => this.onItemSelected(item));
+        });
+    }
+    onItemSelected(selectedItem) {
+        // Se required é true e é a última tab ativa, não permite desativar
+        if (this.required) {
+            const activeTabs = this.buttonToggleItems.filter(item => item.active);
+            if (activeTabs.length === 1 && activeTabs[0] === selectedItem) {
+                return;
+            }
+        }
+        // Se multiple é true, permite ativar/desativar livremente
+        if (this.multiple) {
+            selectedItem.setActiveState(!selectedItem.active, this.inactiveColor, this.inactiveType);
+            return;
+        }
+        // Se multiple é false
+        if (selectedItem.active) {
+            // Se a tab já está ativa, permite desselecionar
+            selectedItem.setActiveState(false, this.inactiveColor, this.inactiveType);
+        }
+        else {
+            // Se está selecionando uma nova tab, desativa todas as outras
+            this.buttonToggleItems.forEach(item => item.setActiveState(item === selectedItem, this.inactiveColor, this.inactiveType));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaButtonToggleComponent, isStandalone: false, selector: "matcha-button-toggle", inputs: { multiple: "multiple", disabled: "disabled", required: "required", inactiveColor: "inactiveColor", inactiveType: "inactiveType", gap: "gap" }, host: { properties: { "attr.disabled": "this.isDisabled" } }, queries: [{ propertyName: "buttonToggleItems", predicate: MatchaButtonToggleItemComponent }], ngImport: i0, template: "<div class=\"button-group d-flex flex-wrap\" [ngClass]=\"gapClass\" role=\"group\"><ng-content></ng-content></div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-button-toggle', standalone: false, template: "<div class=\"button-group d-flex flex-wrap\" [ngClass]=\"gapClass\" role=\"group\"><ng-content></ng-content></div>\n" }]
+        }], propDecorators: { multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], required: [{
+                type: Input
+            }], inactiveColor: [{
+                type: Input
+            }], inactiveType: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], buttonToggleItems: [{
+                type: ContentChildren,
+                args: [MatchaButtonToggleItemComponent]
+            }] } });
+
+class MatchaTabItemComponent {
+    constructor(_render) {
+        this._render = _render;
+        this.active = false;
+        this.selected = new EventEmitter();
+    }
+    ngAfterContentInit() {
+        if (!this.innerButton) {
+            return;
+        }
+        /* considera <button … active-item> como ativo */
+        if (this.innerButton.nativeElement.hasAttribute('active-item')) {
+            this.active = true;
+        }
+        this._render.listen(this.innerButton.nativeElement, 'click', () => this.onClick());
+    }
+    onClick() {
+        this.selected.emit();
+    }
+    setActiveState(isActive, inactiveColor, inactiveType) {
+        this.active = isActive;
+        if (this.innerButton) {
+            /* liga/desliga atributo visual */
+            if (isActive) {
+                this._render.setAttribute(this.innerButton.nativeElement, 'active-item', 'true');
+            }
+            else {
+                this._render.removeAttribute(this.innerButton.nativeElement, 'active-item');
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTabItemComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaTabItemComponent, isStandalone: false, selector: "matcha-tab-item", inputs: { active: "active" }, outputs: { selected: "selected" }, queries: [{ propertyName: "innerButton", first: true, predicate: MatchaButtonComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTabItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-tab-item', standalone: false, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { active: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }], innerButton: [{
+                type: ContentChild,
+                args: [MatchaButtonComponent, { static: true, read: ElementRef }]
+            }] } });
+
+class MatchaTabsComponent {
+    constructor() {
+        /* entradas originais */
+        this._multiple = false;
+        this._disabled = false;
+        this._required = false;
+        this.inactiveColor = 'disabled';
+        this.inactiveType = 'basic';
+        this._gap = 16;
+    }
+    get multiple() { return this._multiple; }
+    set multiple(v) { this._multiple = v === 'false' ? false : !!v; }
+    get disabled() { return this._disabled; }
+    set disabled(v) { this._disabled = v === 'false' ? false : !!v; }
+    get isDisabled() { return this.disabled || null; }
+    get required() { return this._required; }
+    set required(v) { this._required = v === 'false' ? false : !!v; }
+    set gap(v) { const n = +v; this._gap = isNaN(n) ? 16 : n; }
+    get gapClass() { return `gap-${this._gap}`; }
+    /* ────────────────────────────────────── */
+    ngAfterContentInit() {
+        /* se algum veio com [active] / active-item usa-o, senão o primeiro */
+        const preset = this.tabItems.find(i => i.active);
+        this.tabItems.forEach((item, idx) => {
+            const isActive = preset ? item === preset : idx === 0;
+            item.setActiveState(isActive, this.inactiveColor, this.inactiveType);
+            item.selected.subscribe(() => this.onItemSelected(item));
+        });
+    }
+    onItemSelected(selectedItem) {
+        // Se required é true e é a última tab ativa, não permite desativar
+        if (this.required) {
+            const activeTabs = this.tabItems.filter(item => item.active);
+            if (activeTabs.length === 1 && activeTabs[0] === selectedItem) {
+                return;
+            }
+        }
+        // Se multiple é true, permite ativar/desativar livremente
+        if (this.multiple) {
+            selectedItem.setActiveState(!selectedItem.active, this.inactiveColor, this.inactiveType);
+            return;
+        }
+        // Se multiple é false
+        if (selectedItem.active) {
+            // Se a tab já está ativa, permite desselecionar
+            selectedItem.setActiveState(false, this.inactiveColor, this.inactiveType);
+        }
+        else {
+            // Se está selecionando uma nova tab, desativa todas as outras
+            this.tabItems.forEach(item => item.setActiveState(item === selectedItem, this.inactiveColor, this.inactiveType));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { multiple: "multiple", disabled: "disabled", required: "required", inactiveColor: "inactiveColor", inactiveType: "inactiveType", gap: "gap" }, host: { properties: { "attr.disabled": "this.isDisabled" } }, queries: [{ propertyName: "tabItems", predicate: MatchaTabItemComponent }], ngImport: i0, template: "<div class=\"button-group d-flex flex-wrap\" [ngClass]=\"gapClass\" role=\"group\"><ng-content></ng-content></div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-tabs', standalone: false, template: "<div class=\"button-group d-flex flex-wrap\" [ngClass]=\"gapClass\" role=\"group\"><ng-content></ng-content></div>\n" }]
+        }], propDecorators: { multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], required: [{
+                type: Input
+            }], inactiveColor: [{
+                type: Input
+            }], inactiveType: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], tabItems: [{
+                type: ContentChildren,
+                args: [MatchaTabItemComponent]
+            }] } });
+
 class MatchaTooltipDirective {
     constructor(el, renderer) {
         this.el = el;
@@ -2050,10 +2175,10 @@ class MatchaTooltipDirective {
             this.documentClickListener = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.5", type: MatchaTooltipDirective, isStandalone: false, selector: "[matchaTooltip]", inputs: { tooltipText: ["matchaTooltip", "tooltipText"], tooltipDisabled: ["matchaTooltipDisabled", "tooltipDisabled"], preferAbove: ["matchaTooltipAbove", "preferAbove"], preferBelow: ["matchaTooltipBelow", "preferBelow"], preferLeft: ["matchaTooltipLeft", "preferLeft"], preferRight: ["matchaTooltipRight", "preferRight"], tooltipEnableClose: ["matchaTooltipEnableClose", "tooltipEnableClose"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaTooltipDirective, isStandalone: false, selector: "[matchaTooltip]", inputs: { tooltipText: ["matchaTooltip", "tooltipText"], tooltipDisabled: ["matchaTooltipDisabled", "tooltipDisabled"], preferAbove: ["matchaTooltipAbove", "preferAbove"], preferBelow: ["matchaTooltipBelow", "preferBelow"], preferLeft: ["matchaTooltipLeft", "preferLeft"], preferRight: ["matchaTooltipRight", "preferRight"], tooltipEnableClose: ["matchaTooltipEnableClose", "tooltipEnableClose"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaTooltip]',
@@ -2092,11 +2217,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 
 class MatchaTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaTooltipModule, declarations: [MatchaTooltipDirective], imports: [CommonModule], exports: [MatchaTooltipDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTooltipModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaTooltipModule, declarations: [MatchaTooltipDirective], imports: [CommonModule], exports: [MatchaTooltipDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTooltipModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTooltipDirective],
@@ -2105,31 +2230,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }] });
 
-class MatchaButtonGroupModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonGroupModule, declarations: [MatchaButtonGroupComponent, MatchaButtonItemComponent], imports: [CommonModule,
-            MatchaTooltipModule], exports: [MatchaButtonGroupComponent, MatchaButtonItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonGroupModule, imports: [CommonModule,
-            MatchaTooltipModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonGroupModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaButtonGroupComponent, MatchaButtonItemComponent],
-                    imports: [
-                        CommonModule,
-                        MatchaTooltipModule
-                    ],
-                    exports: [MatchaButtonGroupComponent, MatchaButtonItemComponent]
-                }]
-        }] });
-
 class MatchaIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaIconModule, declarations: [MatchaIconComponent], imports: [CommonModule, MatchaTooltipModule], exports: [MatchaIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaIconModule, imports: [CommonModule, MatchaTooltipModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaIconModule, declarations: [MatchaIconComponent], imports: [CommonModule, MatchaTooltipModule], exports: [MatchaIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaIconModule, imports: [CommonModule, MatchaTooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaIconModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaIconComponent],
@@ -2139,11 +2245,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class MatchaTitleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTitleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaTitleModule, declarations: [MatchaTitleComponent], imports: [CommonModule], exports: [MatchaTitleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTitleModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTitleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaTitleModule, declarations: [MatchaTitleComponent], imports: [CommonModule], exports: [MatchaTitleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTitleModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTitleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTitleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTitleComponent],
@@ -2153,11 +2259,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class MatchaDividerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaDividerModule, declarations: [MatchaDividerComponent], imports: [CommonModule], exports: [MatchaDividerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaDividerModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaDividerModule, declarations: [MatchaDividerComponent], imports: [CommonModule], exports: [MatchaDividerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaDividerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaDividerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaDividerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2171,11 +2277,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class MatchaButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonModule, declarations: [MatchaButtonComponent], exports: [MatchaButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonModule, declarations: [MatchaButtonComponent], exports: [MatchaButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaButtonComponent],
@@ -2185,8 +2291,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class MatchaAccordionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionModule, declarations: [MatchaAccordionComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionModule, declarations: [MatchaAccordionComponent,
             MatchaAccordionItemComponent,
             MatchaAccordionHeaderComponent,
             MatchaAccordionContentComponent], imports: [CommonModule,
@@ -2198,14 +2304,14 @@ class MatchaAccordionModule {
             MatchaAccordionItemComponent,
             MatchaAccordionHeaderComponent,
             MatchaAccordionContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionModule, imports: [CommonModule,
             MatchaIconModule,
             MatchaTitleModule,
             MatchaDividerModule,
             MatchaTooltipModule,
             MatchaButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2232,11 +2338,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class MatchaInfiniteScrollModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaInfiniteScrollModule, declarations: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent], imports: [CommonModule], exports: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaInfiniteScrollModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaInfiniteScrollModule, declarations: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent], imports: [CommonModule], exports: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaInfiniteScrollModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaInfiniteScrollModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaInfiniteScrollModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent],
@@ -2270,10 +2376,10 @@ class MatchaElevationDirective {
             this._renderer.addClass(this._elementRef.nativeElement, `elevation-z-0`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.5", type: MatchaElevationDirective, isStandalone: false, selector: "[elevation]", inputs: { elevation: "elevation" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaElevationDirective, isStandalone: false, selector: "[elevation]", inputs: { elevation: "elevation" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaElevationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaElevationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elevation]',
@@ -2285,11 +2391,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 
 class MatchaElevationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaElevationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaElevationModule, declarations: [MatchaElevationDirective], imports: [CommonModule], exports: [MatchaElevationDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaElevationModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaElevationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaElevationModule, declarations: [MatchaElevationDirective], imports: [CommonModule], exports: [MatchaElevationDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaElevationModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaElevationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaElevationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaElevationDirective],
@@ -2299,8 +2405,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class MatchaModalModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalModule, declarations: [MatchaModalHeaderComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalModule, declarations: [MatchaModalHeaderComponent,
             MatchaModalContentComponent,
             MatchaModalFooterComponent,
             MatchaModalOptionsComponent,
@@ -2314,14 +2420,14 @@ class MatchaModalModule {
             MatchaModalFooterComponent,
             MatchaModalOptionsComponent,
             MatchaModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalModule, imports: [CommonModule,
             MatchaIconModule,
             MatchaTitleModule,
             MatchaDividerModule,
             MatchaTooltipModule,
             MatchaElevationModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2350,21 +2456,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class MatchaCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaCardModule, declarations: [MatchaCardComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaCardModule, declarations: [MatchaCardComponent], imports: [CommonModule,
             MatchaElevationModule,
             MatchaIconModule,
             MatchaTitleModule,
             MatchaDividerModule,
             MatchaTooltipModule], exports: [MatchaCardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaCardModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaCardModule, imports: [CommonModule,
             MatchaElevationModule,
             MatchaIconModule,
             MatchaTitleModule,
             MatchaDividerModule,
             MatchaTooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaCardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaCardComponent],
@@ -2381,11 +2487,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class MatchaMasonryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaMasonryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaMasonryModule, declarations: [MatchaMasonryComponent], imports: [CommonModule], exports: [MatchaMasonryComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaMasonryModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaMasonryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaMasonryModule, declarations: [MatchaMasonryComponent], imports: [CommonModule], exports: [MatchaMasonryComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaMasonryModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaMasonryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaMasonryModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaMasonryComponent],
@@ -2394,9 +2500,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }] });
 
+class MatchaButtonToggleModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonToggleModule, declarations: [MatchaButtonToggleComponent, MatchaButtonToggleItemComponent], imports: [CommonModule,
+            MatchaTooltipModule], exports: [MatchaButtonToggleComponent, MatchaButtonToggleItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonToggleModule, imports: [CommonModule,
+            MatchaTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaButtonToggleComponent, MatchaButtonToggleItemComponent],
+                    imports: [
+                        CommonModule,
+                        MatchaTooltipModule
+                    ],
+                    exports: [MatchaButtonToggleComponent, MatchaButtonToggleItemComponent]
+                }]
+        }] });
+
 class MatchaToolbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarModule, declarations: [MatchaToolbarComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarModule, declarations: [MatchaToolbarComponent,
             MatchaToolbarButtonComponent,
             MatchaToolbarContentComponent,
             MatchaToolbarMainButtonComponent], imports: [CommonModule,
@@ -2407,12 +2532,12 @@ class MatchaToolbarModule {
             MatchaToolbarContentComponent,
             MatchaToolbarMainButtonComponent,
             MatchaTitleModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarModule, imports: [CommonModule,
             MatchaButtonModule,
             MatchaTitleModule,
             MatchaTooltipModule, MatchaTitleModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaToolbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaToolbarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2438,11 +2563,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class MatchaGridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaGridModule, declarations: [MatchaGridComponent], imports: [CommonModule], exports: [MatchaGridComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaGridModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaGridModule, declarations: [MatchaGridComponent], imports: [CommonModule], exports: [MatchaGridComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaGridModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaGridModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaGridComponent],
@@ -2452,11 +2577,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class MatchaFormFieldModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldModule, declarations: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent], imports: [CommonModule, MatchaIconModule], exports: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldModule, imports: [CommonModule, MatchaIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaFormFieldModule, declarations: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent], imports: [CommonModule, MatchaIconModule], exports: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaFormFieldModule, imports: [CommonModule, MatchaIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent],
@@ -2471,10 +2596,10 @@ class MatchaAutocompleteDirective {
         this._renderer = _renderer;
         this._renderer.addClass(this._elementRef.nativeElement, 'matcha-autocomplete');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.5", type: MatchaAutocompleteDirective, isStandalone: false, selector: "[matcha-autocomplete]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaAutocompleteDirective, isStandalone: false, selector: "[matcha-autocomplete]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAutocompleteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAutocompleteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-autocomplete]',
@@ -2489,10 +2614,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: "19.2.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: "19.2.5", type: MatchaAutocompleteOverviewDirective, isStandalone: false, selector: "[matcha-autocomplete-overview]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaAutocompleteOverviewDirective, isStandalone: false, selector: "[matcha-autocomplete-overview]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAutocompleteOverviewDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAutocompleteOverviewDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-autocomplete-overview]',
@@ -2501,12 +2626,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaAutocompleteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteDirective,
             MatchaAutocompleteOverviewDirective], exports: [MatchaAutocompleteDirective, MatchaAutocompleteOverviewDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAutocompleteModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAutocompleteModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2525,10 +2650,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: "19.2.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: "19.2.5", type: MatchaBadgeDirective, isStandalone: false, selector: "[matcha-badge]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaBadgeDirective, isStandalone: false, selector: "[matcha-badge]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaBadgeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaBadgeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-badge]',
@@ -2537,11 +2662,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaBadgeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaBadgeModule, declarations: [MatchaBadgeDirective], exports: [MatchaBadgeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaBadgeModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaBadgeModule, declarations: [MatchaBadgeDirective], exports: [MatchaBadgeDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaBadgeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaBadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaBadgeDirective],
@@ -2550,111 +2675,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }] });
 
-class MatchaTabsDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-tabs');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.5", type: MatchaTabsDirective, isStandalone: false, selector: "[matchaTabs]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTabsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaTabs]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaTabsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaTabsModule, declarations: [MatchaTabsDirective], imports: [CommonModule], exports: [MatchaTabsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTabsModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTabsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaTabsDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaTabsDirective],
-                }]
-        }] });
-
-class MatchaBottomSheetDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-bottom-sheet');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.5", type: MatchaBottomSheetDirective, isStandalone: false, selector: "[matcha-bottom-sheet]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaBottomSheetDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-bottom-sheet]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaBottomSheetModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaBottomSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaBottomSheetModule, declarations: [MatchaBottomSheetDirective], exports: [MatchaBottomSheetDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaBottomSheetModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaBottomSheetModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaBottomSheetDirective],
-                    imports: [],
-                    exports: [MatchaBottomSheetDirective],
-                }]
-        }] });
-
-class MatchaButtonToggleDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-button-toggle');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.5", type: MatchaButtonToggleDirective, isStandalone: false, selector: "[matcha-button-toggle]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonToggleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-button-toggle]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaButtonToggleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonToggleModule, declarations: [MatchaButtonToggleDirective], exports: [MatchaButtonToggleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonToggleModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonToggleModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        MatchaButtonToggleDirective
-                    ],
-                    imports: [],
-                    exports: [
-                        MatchaButtonToggleDirective
-                    ]
-                }]
-        }] });
-
 class MatchaRippleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaRippleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaRippleModule, declarations: [MatchaRippleDirective], imports: [CommonModule], exports: [MatchaRippleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaRippleModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaRippleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaRippleModule, declarations: [MatchaRippleDirective], imports: [CommonModule], exports: [MatchaRippleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaRippleModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaRippleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaRippleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2670,11 +2696,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class MatchaCheckboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaCheckboxModule, declarations: [MatchaCheckboxComponent], imports: [CommonModule, MatchaRippleModule], exports: [MatchaCheckboxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaCheckboxModule, imports: [CommonModule, MatchaRippleModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaCheckboxModule, declarations: [MatchaCheckboxComponent], imports: [CommonModule, MatchaRippleModule], exports: [MatchaCheckboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaCheckboxModule, imports: [CommonModule, MatchaRippleModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2694,10 +2720,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: "19.2.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: "19.2.5", type: MatchaChipsDirective, isStandalone: false, selector: "[matchaChips]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaChipsDirective, isStandalone: false, selector: "[matchaChips]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaChipsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaChipsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaChips]',
@@ -2706,11 +2732,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaChipsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaChipsModule, declarations: [MatchaChipsDirective], exports: [MatchaChipsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaChipsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaChipsModule, declarations: [MatchaChipsDirective], exports: [MatchaChipsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaChipsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaChipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaChipsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaChipsDirective],
@@ -2728,10 +2754,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: "19.2.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: "19.2.5", type: MatchaDatepickerDirective, isStandalone: false, selector: "[matcha-datepicker]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaDatepickerDirective, isStandalone: false, selector: "[matcha-datepicker]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaDatepickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaDatepickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-datepicker]',
@@ -2740,11 +2766,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaDatepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaDatepickerModule, declarations: [MatchaDatepickerDirective], exports: [MatchaDatepickerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaDatepickerModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaDatepickerModule, declarations: [MatchaDatepickerDirective], exports: [MatchaDatepickerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaDatepickerModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaDatepickerDirective],
@@ -2753,67 +2779,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }] });
 
-class MatchaExpansionDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //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: "19.2.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: "19.2.5", type: MatchaExpansionDirective, isStandalone: false, selector: "[matchaExpansion]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaExpansionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaExpansion]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaExpansionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaExpansionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaExpansionModule, declarations: [MatchaExpansionDirective], imports: [CommonModule], exports: [MatchaExpansionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaExpansionModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaExpansionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaExpansionDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaExpansionDirective],
-                }]
-        }] });
-
-class MatchaFormFieldDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //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: "19.2.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: "19.2.5", type: MatchaFormFieldDirective, isStandalone: false, selector: "[matchaFormField]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaFormField]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaFormsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormsModule, declarations: [MatchaFormFieldDirective], imports: [CommonModule], exports: [MatchaFormFieldDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormsModule, imports: [CommonModule] }); }
+class MatchaHintTextModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaHintTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaHintTextModule, declarations: [MatchaHintTextComponent], imports: [CommonModule,
+            MatchaIconModule], exports: [MatchaHintTextComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaHintTextModule, imports: [CommonModule,
+            MatchaIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaHintTextModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MatchaFormFieldDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaFormFieldDirective],
+                    declarations: [MatchaHintTextComponent],
+                    imports: [
+                        CommonModule,
+                        MatchaIconModule,
+                    ],
+                    exports: [MatchaHintTextComponent],
                 }]
         }] });
 
@@ -2824,10 +2805,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: "19.2.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: "19.2.5", type: MatchaInputDirective, isStandalone: false, selector: "[matcha-input]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaInputDirective, isStandalone: false, selector: "[matcha-input]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-input]',
@@ -2836,11 +2817,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaInputModule, declarations: [MatchaInputDirective], exports: [MatchaInputDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaInputModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaInputModule, declarations: [MatchaInputDirective], exports: [MatchaInputDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaInputModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaInputDirective],
@@ -2849,38 +2830,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }] });
 
-class MatchaListDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-list');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.5", type: MatchaListDirective, isStandalone: false, selector: "[matchaList]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaListDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaList]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaListModule, declarations: [MatchaListDirective], imports: [CommonModule], exports: [MatchaListDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaListModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaListModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaListDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaListDirective],
-                }]
-        }] });
-
 class MatchaMenuTriggerForDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
@@ -2902,10 +2851,10 @@ class MatchaMenuTriggerForDirective {
             this.menu.closeMenu();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaMenuTriggerForDirective, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: MatchaMenuTriggerForDirective, isStandalone: false, selector: "[matchaMenuTriggerFor]", inputs: { menu: ["matchaMenuTriggerFor", "menu"] }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, exportAs: ["matchaMenuTriggerFor"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaMenuTriggerForDirective, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatchaMenuTriggerForDirective, isStandalone: false, 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: "19.2.5", ngImport: i0, type: MatchaMenuTriggerForDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaMenuTriggerForDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaMenuTriggerFor]',
@@ -2933,13 +2882,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 
 class MatchaMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaMenuModule, declarations: [MatchaMenuComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaMenuModule, declarations: [MatchaMenuComponent,
             MatchaMenuTriggerForDirective], imports: [CommonModule], exports: [MatchaMenuComponent,
             MatchaMenuTriggerForDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaMenuModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaMenuModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2956,37 +2905,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }] });
 
-class MatchaSidenavDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-sidenav');
+class MatchaOverflowDraggableComponent {
+    constructor() {
+        this.dragRef = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.5", type: MatchaSidenavDirective, isStandalone: false, selector: "[matcha-sidenav]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSidenavDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-sidenav]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaSidenavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSidenavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaSidenavModule, declarations: [MatchaSidenavDirective], imports: [CommonModule], exports: [MatchaSidenavDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSidenavModule, imports: [CommonModule] }); }
+    dragToScroll() {
+        const ele = document.querySelector(`matchaDraggableReference${this.dragRef}`);
+        if (ele) {
+            let pos = { top: 0, left: 0, x: 0, y: 0 };
+            const mouseDownHandler = function (e) {
+                pos = {
+                    // The current scroll
+                    left: ele.scrollLeft,
+                    top: ele.scrollTop,
+                    // Get the current mouse position
+                    x: e.clientX,
+                    y: e.clientY,
+                };
+                ele.setAttribute('style', 'cursor: grabbing; user-select: none');
+                document.addEventListener('mousemove', mouseMoveHandler);
+                document.addEventListener('mouseup', mouseUpHandler);
+            };
+            const mouseMoveHandler = function (e) {
+                // How far the mouse has been moved
+                const dx = e.clientX - pos.x;
+                const dy = e.clientY - pos.y;
+                // Scroll the element
+                ele.scrollTop = pos.top - dy;
+                ele.scrollLeft = pos.left - dx;
+            };
+            const mouseUpHandler = function () {
+                document.removeEventListener('mousemove', mouseMoveHandler);
+                document.removeEventListener('mouseup', mouseUpHandler);
+                ele.setAttribute('style', 'cursor: grab; user-select: initial');
+            };
+            ele.addEventListener('mousedown', mouseDownHandler);
+        }
+    }
+    get classes() {
+        const draggableReference = this.dragRef ? `matchaDraggableReference${this.dragRef}` : '';
+        const activeClasses = `${draggableReference}`;
+        return activeClasses;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaOverflowDraggableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaOverflowDraggableComponent, isStandalone: false, 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: "19.2.5", ngImport: i0, type: MatchaSidenavModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaSidenavDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaSidenavDirective],
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaOverflowDraggableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-overflow-draggable', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { dragRef: [{
+                type: Input
+            }] } });
 
 class MatchaPaginatorDirective {
     constructor(_elementRef, _renderer) {
@@ -2995,10 +2964,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: "19.2.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: "19.2.5", type: MatchaPaginatorDirective, isStandalone: false, selector: "[matchaPaginator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaPaginatorDirective, isStandalone: false, selector: "[matchaPaginator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaPaginatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaPaginatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaPaginator]',
@@ -3007,11 +2976,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaPaginatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaPaginatorModule, declarations: [MatchaPaginatorDirective], imports: [CommonModule], exports: [MatchaPaginatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaPaginatorModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaPaginatorModule, declarations: [MatchaPaginatorDirective], imports: [CommonModule], exports: [MatchaPaginatorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaPaginatorModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaPaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaPaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaPaginatorDirective],
@@ -3027,10 +2996,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: "19.2.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: "19.2.5", type: MatchaProgressBarDirective, isStandalone: false, selector: "[matcha-progress-bar]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaProgressBarDirective, isStandalone: false, selector: "[matcha-progress-bar]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaProgressBarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaProgressBarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matcha-progress-bar]',
@@ -3039,11 +3008,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaProgressBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaProgressBarModule, declarations: [MatchaProgressBarDirective], imports: [CommonModule], exports: [MatchaProgressBarDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaProgressBarModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaProgressBarModule, declarations: [MatchaProgressBarDirective], imports: [CommonModule], exports: [MatchaProgressBarDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaProgressBarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaProgressBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaProgressBarDirective],
@@ -3063,10 +3032,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: "19.2.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: "19.2.5", type: MatchaRadioButtonDirective, isStandalone: false, selector: "[matchaRadioButton]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaRadioButtonDirective, isStandalone: false, selector: "[matchaRadioButton]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaRadioButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaRadioButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaRadioButton]',
@@ -3074,51 +3043,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
-class MatchaRadioButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaRadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaRadioButtonModule, declarations: [MatchaRadioButtonDirective], imports: [CommonModule], exports: [MatchaRadioButtonDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaRadioButtonModule, imports: [CommonModule] }); }
+class MatchaRadioButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaRadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaRadioButtonModule, declarations: [MatchaRadioButtonDirective], imports: [CommonModule], exports: [MatchaRadioButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaRadioButtonModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaRadioButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaRadioButtonDirective],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [MatchaRadioButtonDirective]
+                }]
+        }] });
+
+class MatchaSelectDirective {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-select');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaSelectDirective, isStandalone: false, selector: "[matcha-select]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSelectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matcha-select]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+class MatchaSelectModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaSelectModule, declarations: [MatchaSelectDirective], imports: [CommonModule], exports: [MatchaSelectDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSelectModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaRadioButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSelectModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MatchaRadioButtonDirective],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [MatchaRadioButtonDirective]
+                    declarations: [MatchaSelectDirective],
+                    imports: [CommonModule],
+                    exports: [MatchaSelectDirective],
                 }]
         }] });
 
-class MatchaSelectDirective {
+class MatchaSidenavDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
         this._renderer = _renderer;
         //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-select');
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-sidenav');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.5", type: MatchaSelectDirective, isStandalone: false, selector: "[matcha-select]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaSidenavDirective, isStandalone: false, selector: "[matcha-sidenav]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSidenavDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[matcha-select]',
+                    selector: '[matcha-sidenav]',
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
-class MatchaSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaSelectModule, declarations: [MatchaSelectDirective], imports: [CommonModule], exports: [MatchaSelectDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSelectModule, imports: [CommonModule] }); }
+class MatchaSidenavModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSidenavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaSidenavModule, declarations: [MatchaSidenavDirective], imports: [CommonModule], exports: [MatchaSidenavDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSidenavModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSidenavModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MatchaSelectDirective],
+                    declarations: [MatchaSidenavDirective],
                     imports: [CommonModule],
-                    exports: [MatchaSelectDirective],
+                    exports: [MatchaSidenavDirective],
                 }]
         }] });
 
@@ -3129,10 +3130,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: "19.2.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: "19.2.5", type: MatchaSlideToggleDirective, isStandalone: false, selector: "[slide-toggle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaSlideToggleDirective, isStandalone: false, selector: "[slide-toggle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSlideToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSlideToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slide-toggle]',
@@ -3141,11 +3142,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaSlideToggleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaSlideToggleModule, declarations: [MatchaSlideToggleDirective], imports: [CommonModule], exports: [MatchaSlideToggleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSlideToggleModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaSlideToggleModule, declarations: [MatchaSlideToggleDirective], imports: [CommonModule], exports: [MatchaSlideToggleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSlideToggleModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSlideToggleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSlideToggleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSlideToggleDirective],
@@ -3163,10 +3164,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: "19.2.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: "19.2.5", type: MatchaSliderDirective, isStandalone: false, selector: "[matchaSlider]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaSliderDirective, isStandalone: false, selector: "[matchaSlider]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSliderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSliderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaSlider]',
@@ -3175,11 +3176,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaSliderModule, declarations: [MatchaSliderDirective], imports: [CommonModule], exports: [MatchaSliderDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSliderModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaSliderModule, declarations: [MatchaSliderDirective], imports: [CommonModule], exports: [MatchaSliderDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSliderModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSliderDirective],
@@ -3197,10 +3198,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: "19.2.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: "19.2.5", type: MatchaSnackBarDirective, isStandalone: false, selector: "[matchaSnackBar]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaSnackBarDirective, isStandalone: false, selector: "[matchaSnackBar]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSnackBarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSnackBarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaSnackBar]',
@@ -3209,11 +3210,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaSnackBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaSnackBarModule, declarations: [MatchaSnackBarDirective], imports: [CommonModule], exports: [MatchaSnackBarDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSnackBarModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaSnackBarModule, declarations: [MatchaSnackBarDirective], imports: [CommonModule], exports: [MatchaSnackBarDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSnackBarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSnackBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSnackBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSnackBarDirective],
@@ -3229,10 +3230,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: "19.2.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: "19.2.5", type: MatchaSortHeaderDirective, isStandalone: false, selector: "[matchaSortHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaSortHeaderDirective, isStandalone: false, selector: "[matchaSortHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSortHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSortHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaSortHeader]',
@@ -3241,11 +3242,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaSortHeaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSortHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaSortHeaderModule, declarations: [MatchaSortHeaderDirective], imports: [CommonModule], exports: [MatchaSortHeaderDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSortHeaderModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSortHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaSortHeaderModule, declarations: [MatchaSortHeaderDirective], imports: [CommonModule], exports: [MatchaSortHeaderDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSortHeaderModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSortHeaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSortHeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSortHeaderDirective],
@@ -3254,6 +3255,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }] });
 
+class MatchaSpinModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSpinModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaSpinModule, declarations: [MatchaSpinComponent], imports: [CommonModule], exports: [MatchaSpinComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSpinModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSpinModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaSpinComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [MatchaSpinComponent]
+                }]
+        }] });
+
 class MatchaTableDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
@@ -3261,10 +3278,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: "19.2.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: "19.2.5", type: MatchaTableDirective, isStandalone: false, selector: "[matchaTable]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaTableDirective, isStandalone: false, selector: "[matchaTable]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaTable]',
@@ -3273,11 +3290,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaTableModule, declarations: [MatchaTableDirective], imports: [CommonModule], exports: [MatchaTableDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTableModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaTableModule, declarations: [MatchaTableDirective], imports: [CommonModule], exports: [MatchaTableDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTableModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTableDirective],
@@ -3286,6 +3303,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }] });
 
+class MatchaTabsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaTabsModule, declarations: [MatchaTabsComponent, MatchaTabItemComponent], imports: [CommonModule,
+            MatchaTooltipModule], exports: [MatchaTabsComponent, MatchaTabItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTabsModule, imports: [CommonModule,
+            MatchaTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaTabsComponent, MatchaTabItemComponent],
+                    imports: [
+                        CommonModule,
+                        MatchaTooltipModule
+                    ],
+                    exports: [MatchaTabsComponent, MatchaTabItemComponent]
+                }]
+        }] });
+
 class MatchaTreeDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
@@ -3293,10 +3329,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: "19.2.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: "19.2.5", type: MatchaTreeDirective, isStandalone: false, selector: "[matchaTree]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", type: MatchaTreeDirective, isStandalone: false, selector: "[matchaTree]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTreeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTreeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaTree]',
@@ -3305,11 +3341,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class MatchaTreeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaTreeModule, declarations: [MatchaTreeDirective], imports: [CommonModule], exports: [MatchaTreeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTreeModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaTreeModule, declarations: [MatchaTreeDirective], imports: [CommonModule], exports: [MatchaTreeDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTreeModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaTreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTreeDirective],
@@ -3318,261 +3354,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }] });
 
-class MatchaOverflowDraggableComponent {
-    constructor() {
-        this.dragRef = '';
-    }
-    dragToScroll() {
-        const ele = document.querySelector(`matchaDraggableReference${this.dragRef}`);
-        if (ele) {
-            let pos = { top: 0, left: 0, x: 0, y: 0 };
-            const mouseDownHandler = function (e) {
-                pos = {
-                    // The current scroll
-                    left: ele.scrollLeft,
-                    top: ele.scrollTop,
-                    // Get the current mouse position
-                    x: e.clientX,
-                    y: e.clientY,
-                };
-                ele.setAttribute('style', 'cursor: grabbing; user-select: none');
-                document.addEventListener('mousemove', mouseMoveHandler);
-                document.addEventListener('mouseup', mouseUpHandler);
-            };
-            const mouseMoveHandler = function (e) {
-                // How far the mouse has been moved
-                const dx = e.clientX - pos.x;
-                const dy = e.clientY - pos.y;
-                // Scroll the element
-                ele.scrollTop = pos.top - dy;
-                ele.scrollLeft = pos.left - dx;
-            };
-            const mouseUpHandler = function () {
-                document.removeEventListener('mousemove', mouseMoveHandler);
-                document.removeEventListener('mouseup', mouseUpHandler);
-                ele.setAttribute('style', 'cursor: grab; user-select: initial');
-            };
-            ele.addEventListener('mousedown', mouseDownHandler);
-        }
-    }
-    get classes() {
-        const draggableReference = this.dragRef ? `matchaDraggableReference${this.dragRef}` : '';
-        const activeClasses = `${draggableReference}`;
-        return activeClasses;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaOverflowDraggableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaOverflowDraggableComponent, isStandalone: false, 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: "19.2.5", ngImport: i0, type: MatchaOverflowDraggableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'matcha-overflow-draggable', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { dragRef: [{
-                type: Input
-            }] } });
-
-class MatchaSpinModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSpinModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaSpinModule, declarations: [MatchaSpinComponent], imports: [CommonModule], exports: [MatchaSpinComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSpinModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSpinModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaSpinComponent],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [MatchaSpinComponent]
-                }]
-        }] });
-
-class MatchaHintTextModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaHintTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaHintTextModule, declarations: [MatchaHintTextComponent], imports: [CommonModule,
-            MatchaIconModule], exports: [MatchaHintTextComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaHintTextModule, imports: [CommonModule,
-            MatchaIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaHintTextModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaHintTextComponent],
-                    imports: [
-                        CommonModule,
-                        MatchaIconModule,
-                    ],
-                    exports: [MatchaHintTextComponent],
-                }]
-        }] });
-
 class MatchaComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            MatchaButtonGroupModule,
             MatchaAccordionModule,
-            MatchaFormFieldModule,
-            MatchaInfiniteScrollModule,
-            MatchaModalModule,
-            MatchaMasonryModule,
-            MatchaCardModule,
-            MatchaTitleModule,
             MatchaAutocompleteModule,
             MatchaBadgeModule,
-            MatchaTabsModule,
-            MatchaBottomSheetModule,
-            MatchaButtonToggleModule,
             MatchaButtonModule,
+            MatchaButtonToggleModule,
+            MatchaCardModule,
             MatchaCheckboxModule,
             MatchaChipsModule,
             MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
-            MatchaExpansionModule,
-            MatchaFormsModule,
+            MatchaFormFieldModule,
+            MatchaHintTextModule,
             MatchaIconModule,
+            MatchaInfiniteScrollModule,
             MatchaInputModule,
-            MatchaListModule,
+            MatchaMasonryModule,
             MatchaMenuModule,
-            MatchaSidenavModule,
+            MatchaModalModule,
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRadioButtonModule,
+            MatchaRippleModule,
             MatchaSelectModule,
+            MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
             MatchaSnackBarModule,
             MatchaSortHeaderModule,
-            MatchaTableModule,
-            MatchaTooltipModule,
-            MatchaTreeModule,
-            MatchaRippleModule,
             MatchaSpinModule,
-            MatchaHintTextModule], exports: [MatchaButtonGroupModule,
-            MatchaAccordionModule,
-            MatchaFormFieldModule,
-            MatchaInfiniteScrollModule,
-            MatchaModalModule,
-            MatchaMasonryModule,
-            MatchaCardModule,
+            MatchaTableModule,
+            MatchaTabsModule,
             MatchaTitleModule,
+            MatchaTooltipModule,
+            MatchaTreeModule], exports: [MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaBadgeModule,
-            MatchaTabsModule,
-            MatchaBottomSheetModule,
-            MatchaButtonToggleModule,
             MatchaButtonModule,
+            MatchaButtonToggleModule,
+            MatchaCardModule,
             MatchaCheckboxModule,
             MatchaChipsModule,
             MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
-            MatchaExpansionModule,
-            MatchaFormsModule,
+            MatchaFormFieldModule,
+            MatchaHintTextModule,
             MatchaIconModule,
+            MatchaInfiniteScrollModule,
             MatchaInputModule,
-            MatchaListModule,
+            MatchaMasonryModule,
             MatchaMenuModule,
-            MatchaSidenavModule,
+            MatchaModalModule,
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRadioButtonModule,
+            MatchaRippleModule,
             MatchaSelectModule,
+            MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
             MatchaSnackBarModule,
             MatchaSortHeaderModule,
+            MatchaSpinModule,
             MatchaTableModule,
+            MatchaTabsModule,
+            MatchaTitleModule,
             MatchaTooltipModule,
-            MatchaTreeModule,
-            MatchaRippleModule,
-            MatchaSpinModule,
-            MatchaHintTextModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule,
+            MatchaTreeModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            MatchaButtonGroupModule,
             MatchaAccordionModule,
-            MatchaFormFieldModule,
-            MatchaInfiniteScrollModule,
-            MatchaModalModule,
-            MatchaMasonryModule,
-            MatchaCardModule,
-            MatchaTitleModule,
             MatchaAutocompleteModule,
             MatchaBadgeModule,
-            MatchaTabsModule,
-            MatchaBottomSheetModule,
-            MatchaButtonToggleModule,
             MatchaButtonModule,
+            MatchaButtonToggleModule,
+            MatchaCardModule,
             MatchaCheckboxModule,
             MatchaChipsModule,
             MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
-            MatchaExpansionModule,
-            MatchaFormsModule,
+            MatchaFormFieldModule,
+            MatchaHintTextModule,
             MatchaIconModule,
+            MatchaInfiniteScrollModule,
             MatchaInputModule,
-            MatchaListModule,
+            MatchaMasonryModule,
             MatchaMenuModule,
-            MatchaSidenavModule,
+            MatchaModalModule,
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRadioButtonModule,
+            MatchaRippleModule,
             MatchaSelectModule,
+            MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
             MatchaSnackBarModule,
             MatchaSortHeaderModule,
-            MatchaTableModule,
-            MatchaTooltipModule,
-            MatchaTreeModule,
-            MatchaRippleModule,
             MatchaSpinModule,
-            MatchaHintTextModule, MatchaButtonGroupModule,
-            MatchaAccordionModule,
-            MatchaFormFieldModule,
-            MatchaInfiniteScrollModule,
-            MatchaModalModule,
-            MatchaMasonryModule,
-            MatchaCardModule,
+            MatchaTableModule,
+            MatchaTabsModule,
             MatchaTitleModule,
+            MatchaTooltipModule,
+            MatchaTreeModule, MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaBadgeModule,
-            MatchaTabsModule,
-            MatchaBottomSheetModule,
-            MatchaButtonToggleModule,
             MatchaButtonModule,
+            MatchaButtonToggleModule,
+            MatchaCardModule,
             MatchaCheckboxModule,
             MatchaChipsModule,
             MatchaDatepickerModule,
             MatchaDividerModule,
             MatchaElevationModule,
-            MatchaExpansionModule,
-            MatchaFormsModule,
+            MatchaFormFieldModule,
+            MatchaHintTextModule,
             MatchaIconModule,
+            MatchaInfiniteScrollModule,
             MatchaInputModule,
-            MatchaListModule,
+            MatchaMasonryModule,
             MatchaMenuModule,
-            MatchaSidenavModule,
+            MatchaModalModule,
             MatchaPaginatorModule,
             MatchaProgressBarModule,
             MatchaRadioButtonModule,
+            MatchaRippleModule,
             MatchaSelectModule,
+            MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
             MatchaSnackBarModule,
             MatchaSortHeaderModule,
+            MatchaSpinModule,
             MatchaTableModule,
+            MatchaTabsModule,
+            MatchaTitleModule,
             MatchaTooltipModule,
-            MatchaTreeModule,
-            MatchaRippleModule,
-            MatchaSpinModule,
-            MatchaHintTextModule] }); }
+            MatchaTreeModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -3582,88 +3511,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        MatchaButtonGroupModule,
                         MatchaAccordionModule,
-                        MatchaFormFieldModule,
-                        MatchaInfiniteScrollModule,
-                        MatchaModalModule,
-                        MatchaMasonryModule,
-                        MatchaCardModule,
-                        MatchaTitleModule,
                         MatchaAutocompleteModule,
                         MatchaBadgeModule,
-                        MatchaTabsModule,
-                        MatchaBottomSheetModule,
-                        MatchaButtonToggleModule,
                         MatchaButtonModule,
+                        MatchaButtonToggleModule,
+                        MatchaCardModule,
                         MatchaCheckboxModule,
                         MatchaChipsModule,
                         MatchaDatepickerModule,
                         MatchaDividerModule,
                         MatchaElevationModule,
-                        MatchaExpansionModule,
-                        MatchaFormsModule,
+                        MatchaFormFieldModule,
+                        MatchaHintTextModule,
                         MatchaIconModule,
+                        MatchaInfiniteScrollModule,
                         MatchaInputModule,
-                        MatchaListModule,
+                        MatchaMasonryModule,
                         MatchaMenuModule,
-                        MatchaSidenavModule,
+                        MatchaModalModule,
                         MatchaPaginatorModule,
                         MatchaProgressBarModule,
                         MatchaRadioButtonModule,
+                        MatchaRippleModule,
                         MatchaSelectModule,
+                        MatchaSidenavModule,
                         MatchaSlideToggleModule,
                         MatchaSliderModule,
                         MatchaSnackBarModule,
                         MatchaSortHeaderModule,
+                        MatchaSpinModule,
                         MatchaTableModule,
+                        MatchaTabsModule,
+                        MatchaTitleModule,
                         MatchaTooltipModule,
-                        MatchaTreeModule,
-                        MatchaRippleModule,
-                        MatchaSpinModule,
-                        MatchaHintTextModule
+                        MatchaTreeModule
                     ],
                     exports: [
-                        MatchaButtonGroupModule,
                         MatchaAccordionModule,
-                        MatchaFormFieldModule,
-                        MatchaInfiniteScrollModule,
-                        MatchaModalModule,
-                        MatchaMasonryModule,
-                        MatchaCardModule,
-                        MatchaTitleModule,
                         MatchaAutocompleteModule,
                         MatchaBadgeModule,
-                        MatchaTabsModule,
-                        MatchaBottomSheetModule,
-                        MatchaButtonToggleModule,
                         MatchaButtonModule,
+                        MatchaButtonToggleModule,
+                        MatchaCardModule,
                         MatchaCheckboxModule,
                         MatchaChipsModule,
                         MatchaDatepickerModule,
                         MatchaDividerModule,
                         MatchaElevationModule,
-                        MatchaExpansionModule,
-                        MatchaFormsModule,
+                        MatchaFormFieldModule,
+                        MatchaHintTextModule,
                         MatchaIconModule,
+                        MatchaInfiniteScrollModule,
                         MatchaInputModule,
-                        MatchaListModule,
+                        MatchaMasonryModule,
                         MatchaMenuModule,
-                        MatchaSidenavModule,
+                        MatchaModalModule,
                         MatchaPaginatorModule,
                         MatchaProgressBarModule,
                         MatchaRadioButtonModule,
+                        MatchaRippleModule,
                         MatchaSelectModule,
+                        MatchaSidenavModule,
                         MatchaSlideToggleModule,
                         MatchaSliderModule,
                         MatchaSnackBarModule,
                         MatchaSortHeaderModule,
+                        MatchaSpinModule,
                         MatchaTableModule,
+                        MatchaTabsModule,
+                        MatchaTitleModule,
                         MatchaTooltipModule,
-                        MatchaTreeModule,
-                        MatchaRippleModule,
-                        MatchaSpinModule,
-                        MatchaHintTextModule
+                        MatchaTreeModule
                     ]
                 }]
         }] });
@@ -3687,5 +3606,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaBottomSheetDirective, MatchaBottomSheetModule, MatchaButtonComponent, MatchaButtonGroupComponent, MatchaButtonGroupModule, MatchaButtonItemComponent, MatchaButtonModule, MatchaButtonToggleDirective, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaExpansionDirective, MatchaExpansionModule, MatchaFormFieldComponent, MatchaFormFieldDirective, MatchaFormFieldModule, MatchaFormsModule, MatchaGridComponent, MatchaGridModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaLabelComponent, MatchaListDirective, MatchaListModule, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaTableDirective, MatchaTableModule, MatchaTabsDirective, MatchaTabsModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
+export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleItemComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaLabelComponent, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
 //# sourceMappingURL=matcha-components.mjs.map