matcha-components 19.51.0 → 19.53.0

package/fesm2022/matcha-components.mjs

@@ -199,32 +199,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 
 class MatchaButtonItemComponent {
-    constructor(renderer) {
-        this.renderer = renderer;
+    constructor(_render) {
+        this._render = _render;
         this.active = false;
         this.selected = new EventEmitter();
     }
     ngAfterContentInit() {
-        if (this.innerButton) {
-            this.renderer.listen(this.innerButton.nativeElement, 'click', () => this.onClick());
+        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, 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);
-        // 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');
+        /* 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.5", ngImport: i0, type: MatchaButtonItemComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -244,56 +244,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 
 class MatchaButtonGroupComponent {
     constructor() {
+        /* entradas originais */
         this._multiple = false;
         this._disabled = false;
-        this.activeColor = 'blue';
         this.inactiveColor = 'disabled';
-        this.activeType = '';
         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}`;
-    }
+    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; }
+    set gap(v) { const n = +v; this._gap = isNaN(n) ? 16 : n; }
+    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.activeColor, this.inactiveColor, this.activeType, this.inactiveType);
+        /* se algum veio com [active] / active-item usa-o, senão o primeiro */
+        const preset = this.buttonItems.find(i => i.active);
+        this.buttonItems.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) {
         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);
-            });
+            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", 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 +289,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: [{