matcha-components 19.51.0 → 19.52.0

package/fesm2022/matcha-components.mjs

@@ -212,20 +212,27 @@ class MatchaButtonItemComponent {
     onClick() {
         this.selected.emit();
     }
-    setActiveState(isActive, activeColor, inactiveColor, activeType, inactiveType) {
+    setActiveState(isActive, inactiveColor, inactiveType) {
         this.active = isActive;
-        const color = isActive ? activeColor : inactiveColor;
-        const type = isActive ? activeType : inactiveType;
-        // Aplica a cor correta ao botão interno
-        this.renderer.setAttribute(this.innerButton.nativeElement, 'color', color);
+        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');
-        });
+        // ['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');
-        }
+        // 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: [""] }); }
@@ -246,9 +253,7 @@ class MatchaButtonGroupComponent {
     constructor() {
         this._multiple = false;
         this._disabled = false;
-        this.activeColor = 'blue';
         this.inactiveColor = 'disabled';
-        this.activeType = '';
         this.inactiveType = 'basic';
         this._gap = 16;
     }
@@ -278,22 +283,22 @@ class MatchaButtonGroupComponent {
         this.buttonItems.forEach((item, index) => {
             const isFirst = index === 0;
             // Opcionalmente, primeiro botão pode iniciar ativo por padrão
-            item.setActiveState(isFirst, this.activeColor, this.inactiveColor, this.activeType, this.inactiveType);
+            item.setActiveState(isFirst, this.inactiveColor, this.inactiveType);
             item.selected.subscribe(() => this.onItemSelected(item));
         });
     }
     onItemSelected(selectedItem) {
         if (this.multiple) {
-            selectedItem.setActiveState(!selectedItem.active, this.activeColor, this.inactiveColor, this.activeType, this.inactiveType);
+            selectedItem.setActiveState(!selectedItem.active, this.inactiveColor, this.inactiveType);
         }
         else {
             this.buttonItems.forEach(item => {
-                item.setActiveState(item === selectedItem, this.activeColor, this.inactiveColor, this.activeType, this.inactiveType);
+                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", activeColor: "activeColor", inactiveColor: "inactiveColor", activeType: "activeType", 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"] }] }); }
+    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,
@@ -305,12 +310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }], isDisabled: [{
                 type: HostBinding,
                 args: ['attr.disabled']
-            }], activeColor: [{
-                type: Input
             }], inactiveColor: [{
                 type: Input
-            }], activeType: [{
-                type: Input
             }], inactiveType: [{
                 type: Input
             }], gap: [{