matcha-components 19.19.1 → 19.20.0

package/fesm2022/matcha-components.mjs

@@ -1,11 +1,301 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ContentChildren, ElementRef, Renderer2, Inject, HostListener, Directive, NgModule } from '@angular/core';
+import { ElementRef, Renderer2, Component, Inject, Input, EventEmitter, Output, ContentChild, ContentChildren, HostListener, Directive, 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';
 
+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.1.4", ngImport: i0, type: MatchaButtonComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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.1.4", 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;
+        // Propriedade que indica se o botão está ativo
+        this.active = false;
+        // Evento emitido quando o botão for clicado
+        this.selected = new EventEmitter();
+    }
+    ngAfterContentInit() {
+        // Atualiza a cor inicial do botão conforme o estado
+        this.updateButtonColor();
+        // Registra o clique no botão interno
+        if (this.innerButton) {
+            this.renderer.listen(this.innerButton.nativeElement, 'click', () => {
+                this.onClick();
+            });
+        }
+    }
+    onClick() {
+        this.selected.emit();
+    }
+    // Método para definir o estado ativo e atualizar a cor
+    setActiveState(isActive, activeColor, inactiveColor) {
+        this.active = isActive;
+        this.updateButtonColor(activeColor, inactiveColor);
+    }
+    // Atualiza o atributo 'color' do botão interno
+    updateButtonColor(activeColor = 'blue', inactiveColor = 'grey') {
+        if (this.innerButton) {
+            const newColor = this.active ? activeColor : inactiveColor;
+            this.renderer.setAttribute(this.innerButton.nativeElement, 'color', newColor);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaButtonItemComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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.1.4", 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 }]
+            }] } });
+
+// button-group.component.ts
+class MatchaButtonGroupComponent {
+    constructor() {
+        // Define se é possível selecionar múltiplos botões
+        this.multiple = false;
+        // Cores para os estados ativo e inativo
+        this.activeColor = 'blue';
+        this.inactiveColor = 'grey';
+    }
+    ngAfterContentInit() {
+        console.log(this.buttonItems, 'estou funcionando');
+        // Inicializa cada button-item com o estado inativo
+        this.buttonItems.forEach(item => {
+            item.setActiveState(false, this.activeColor, this.inactiveColor);
+            // Inscreve-se para saber quando algum item for selecionado
+            item.selected.subscribe(() => this.onItemSelected(item));
+        });
+        // Opcional: define o primeiro item como ativo por padrão
+        if (this.buttonItems.first) {
+            this.buttonItems.first.setActiveState(true, this.activeColor, this.inactiveColor);
+        }
+    }
+    onItemSelected(selectedItem) {
+        if (this.multiple) {
+            // Se múltiplo, inverte o estado do item clicado
+            selectedItem.setActiveState(!selectedItem.active, this.activeColor, this.inactiveColor);
+        }
+        else {
+            // Se único, desativa todos e ativa somente o item clicado
+            this.buttonItems.forEach(item => {
+                item.setActiveState(item === selectedItem, this.activeColor, this.inactiveColor);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: MatchaButtonGroupComponent, isStandalone: false, selector: "matcha-button-group", inputs: { multiple: "multiple", activeColor: "activeColor", inactiveColor: "inactiveColor" }, queries: [{ propertyName: "buttonItems", predicate: MatchaButtonItemComponent }], ngImport: i0, template: "<div class=\"button-group d-flex flex-wrap gap-16\" role=\"group\"><ng-content></ng-content></div>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-button-group', standalone: false, template: "<div class=\"button-group d-flex flex-wrap gap-16\" role=\"group\"><ng-content></ng-content></div>\n" }]
+        }], propDecorators: { multiple: [{
+                type: Input
+            }], activeColor: [{
+                type: Input
+            }], inactiveColor: [{
+                type: Input
+            }], buttonItems: [{
+                type: ContentChildren,
+                args: [MatchaButtonItemComponent]
+            }] } });
+
 const customAnimation = animation([
     style({
         opacity: '{{opacity}}',
@@ -617,206 +907,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 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.pill = false;
-        this.icon = false;
-        this.link = false;
-        this._config = {
-            sizeXs: 'tiny',
-            sizeSm: 'small',
-            sizeMd: 'medium',
-            sizeLg: 'large',
-            sizeXl: 'huge',
-            size: 'medium',
-            color: 'primary',
-            basic: false,
-            outline: false,
-            pill: false,
-            icon: false,
-            link: false
-        };
-    }
-    ngOnInit() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button`);
-        this.setConfig();
-        // Adicione o evento de clique apenas a elementos com a classe "matcha-button"
-        const buttons = document.querySelectorAll('.matcha-button');
-        buttons.forEach(button => {
-            // mouse down event
-            button.addEventListener('mousedown', this.addRippleEffect, false);
-        });
-    }
-    ngOnChanges() {
-        this.setConfig();
-    }
-    clearConfig() {
-        // BG colors and FG contrast
-        this._renderer.removeClass(this._elementRef.nativeElement, `${this._config.color}`);
-        // FG colors only
-        this._renderer.removeClass(this._elementRef.nativeElement, `color-${this._config.color}`);
-        //size
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-${this._config.size}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-xs-${this._config.sizeXs}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-sm-${this._config.sizeSm}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-md-${this._config.sizeMd}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-lg-${this._config.sizeLg}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-xl-${this._config.sizeXl}`);
-        //basic
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-icon`);
-        //outline
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-outline`);
-        //pill
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-pill`);
-        //icon
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-basic`);
-        //link
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-link`);
-    }
-    setConfig() {
-        this.clearConfig();
-        this.size ? this.setSize() : null;
-        this.color ? this.setColor() : null;
-        (this.outline === true || this.outline === 'true') ? this.setOutline() : null;
-        (this.pill === true || this.pill === 'true') ? this.setPill() : null;
-        (this.link === true || this.link === 'true') ? this.setLink() : null;
-        (this.basic === true || this.basic === 'true') ? this.setBasic() : null;
-        (this.icon === true || this.icon === 'true') ? this.setIcon() : null;
-    }
-    setSize() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
-        this._config.size = this.size;
-        if (this.sizeXs) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-xs-${this.sizeXs}`);
-            this._config.sizeXs = this.sizeXs;
-        }
-        if (this.sizeSm) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-sm-${this.sizeSm}`);
-            this._config.sizeSm = this.sizeSm;
-        }
-        if (this.sizeMd) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-md-${this.sizeMd}`);
-            this._config.sizeMd = this.sizeMd;
-        }
-        if (this.sizeLg) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-lg-${this.sizeLg}`);
-            this._config.sizeLg = this.sizeLg;
-        }
-        if (this.sizeXl) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-xl-${this.sizeXl}`);
-            this._config.sizeXl = this.sizeXl;
-        }
-    }
-    setColor() {
-        this._renderer.addClass(this._elementRef.nativeElement, `${this.color}`);
-        this._config.color = this.color;
-    }
-    setOutline() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-outline`);
-        this._renderer.addClass(this._elementRef.nativeElement, `color-${this.color}`);
-    }
-    setPill() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-pill`);
-    }
-    setLink() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-link`);
-    }
-    setBasic() {
-        this._renderer.removeClass(this._elementRef.nativeElement, `${this._config.color}`);
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-basic`);
-        this._renderer.addClass(this._elementRef.nativeElement, `color-${this.color}`);
-        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.1.4", ngImport: i0, type: MatchaButtonComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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", 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.1.4", 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']
-            }], pill: [{
-                type: Input,
-                args: ['pill']
-            }], icon: [{
-                type: Input,
-                args: ['icon']
-            }], link: [{
-                type: Input,
-                args: ['link']
-            }] } });
-
 class MatchaCardComponent {
     constructor() {
         this.elevation = 0;
@@ -1413,7 +1503,7 @@ class MatchaToolbarButtonComponent {
         this.buttonClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaToolbarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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=\"placeholder\" 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", "pill", "icon", "link"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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=\"placeholder\" 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.1.4", ngImport: i0, type: MatchaToolbarButtonComponent, decorators: [{
             type: Component,
@@ -1442,7 +1532,7 @@ class MatchaToolbarMainButtonComponent {
         this.buttonClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaToolbarMainButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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", "pill", "icon", "link"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: MatchaToolbarMainButtonComponent, decorators: [{
             type: Component,
@@ -1684,6 +1774,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 }]
         }] });
 
+class MatchaButtonGroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: MatchaButtonGroupModule, declarations: [MatchaButtonGroupComponent, MatchaButtonItemComponent], imports: [CommonModule,
+            MatchaTooltipModule], exports: [MatchaButtonGroupComponent, MatchaButtonItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaButtonGroupModule, imports: [CommonModule,
+            MatchaTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: MatchaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: MatchaIconModule, declarations: [MatchaIconComponent], imports: [CommonModule, MatchaTooltipModule], exports: [MatchaIconComponent] }); }
@@ -2938,7 +3047,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class MatchaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [MatchaAccordionModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [MatchaButtonGroupModule,
+            MatchaAccordionModule,
             MatchaFormFieldModule,
             MatchaInfiniteScrollModule,
             MatchaModalModule,
@@ -2975,7 +3085,8 @@ class MatchaComponentsModule {
             MatchaTableModule,
             MatchaTabsModule,
             MatchaTooltipModule,
-            MatchaTreeModule], exports: [MatchaAccordionModule,
+            MatchaTreeModule], exports: [MatchaButtonGroupModule,
+            MatchaAccordionModule,
             MatchaFormFieldModule,
             MatchaInfiniteScrollModule,
             MatchaModalModule,
@@ -3013,7 +3124,8 @@ class MatchaComponentsModule {
             MatchaTabsModule,
             MatchaTooltipModule,
             MatchaTreeModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaComponentsModule, imports: [MatchaAccordionModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaComponentsModule, imports: [MatchaButtonGroupModule,
+            MatchaAccordionModule,
             MatchaFormFieldModule,
             MatchaInfiniteScrollModule,
             MatchaModalModule,
@@ -3050,7 +3162,8 @@ class MatchaComponentsModule {
             MatchaTableModule,
             MatchaTabsModule,
             MatchaTooltipModule,
-            MatchaTreeModule, MatchaAccordionModule,
+            MatchaTreeModule, MatchaButtonGroupModule,
+            MatchaAccordionModule,
             MatchaFormFieldModule,
             MatchaInfiniteScrollModule,
             MatchaModalModule,
@@ -3096,6 +3209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         MatchaOverflowDraggableComponent
                     ],
                     imports: [
+                        MatchaButtonGroupModule,
                         MatchaAccordionModule,
                         MatchaFormFieldModule,
                         MatchaInfiniteScrollModule,
@@ -3136,6 +3250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         MatchaTreeModule
                     ],
                     exports: [
+                        MatchaButtonGroupModule,
                         MatchaAccordionModule,
                         MatchaFormFieldModule,
                         MatchaInfiniteScrollModule,
@@ -3197,5 +3312,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaBottomSheetDirective, MatchaBottomSheetModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleDirective, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxDirective, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaExpansionDirective, MatchaExpansionModule, MatchaFormFieldComponent, MatchaFormFieldDirective, MatchaFormFieldModule, MatchaFormsModule, MatchaGridComponent, MatchaGridModule, 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, MatchaProgressSpinnerDirective, MatchaProgressSpinnerModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, 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, MatchaBottomSheetDirective, MatchaBottomSheetModule, MatchaButtonComponent, MatchaButtonGroupComponent, MatchaButtonGroupModule, MatchaButtonItemComponent, MatchaButtonModule, MatchaButtonToggleDirective, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxDirective, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaExpansionDirective, MatchaExpansionModule, MatchaFormFieldComponent, MatchaFormFieldDirective, MatchaFormFieldModule, MatchaFormsModule, MatchaGridComponent, MatchaGridModule, 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, MatchaProgressSpinnerDirective, MatchaProgressSpinnerModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaTableDirective, MatchaTableModule, MatchaTabsDirective, MatchaTabsModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
 //# sourceMappingURL=matcha-components.mjs.map