matcha-components 20.173.0 → 20.178.0

package/fesm2022/matcha-components.mjs

@@ -2489,16 +2489,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class MatchaCheckboxComponent {
-    constructor() {
-        this.color = 'accent';
-        this.indeterminate = false;
-        this._disabled = false;
-        this._checked = false;
-        this.checkedChange = new EventEmitter();
-        this.change = new EventEmitter();
-        // ControlValueAccessor methods
-        this.onChange = () => { };
-        this.onTouched = () => { };
+    get indeterminate() {
+        return this._indeterminate;
+    }
+    set indeterminate(value) {
+        if (value !== this._indeterminate) {
+            this._indeterminate = value;
+            if (this.inputElement) {
+                this.inputElement.nativeElement.indeterminate = value;
+            }
+            this.cdr.markForCheck();
+        }
     }
     get disabled() {
         return this._disabled;
@@ -2515,11 +2516,16 @@ class MatchaCheckboxComponent {
         const booleanValue = value != null && `${value}` !== 'false';
         if (booleanValue !== this._checked) {
             this._checked = booleanValue;
+            if (this.inputElement) {
+                this.inputElement.nativeElement.checked = this._checked;
+            }
             this.onChange(this._checked);
+            this.cdr.markForCheck();
         }
     }
     writeValue(value) {
         this._checked = value;
+        this.cdr.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2529,25 +2535,45 @@ class MatchaCheckboxComponent {
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.color = 'accent';
+        this._indeterminate = false;
+        this._disabled = false;
+        this._checked = false;
+        this.checkedChange = new EventEmitter();
+        this.change = new EventEmitter();
+        // ControlValueAccessor methods
+        this.onChange = () => { };
+        this.onTouched = () => { };
     }
     onInputChange(event) {
         if (this.disabled)
             return;
         const input = event.target;
-        this.checked = input.checked;
+        const newCheckedState = input.checked;
+        // Sincronizar estado indeterminate interno imediatamente
+        if (this._indeterminate) {
+            this._indeterminate = false;
+            // Não precisa atualizar o nativo pois o browser já fez isso ao clicar
+        }
+        this.checked = newCheckedState;
         this.onTouched();
         const eventData = { checked: this.checked };
         this.checkedChange.emit(eventData);
-        this.change.emit(event);
+        this.change.emit({ source: this, checked: this.checked });
+        this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaCheckboxComponent, isStandalone: false, selector: "matcha-checkbox", inputs: { color: "color", indeterminate: "indeterminate", disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange", change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaCheckboxComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<label\n    class=\"matcha-checkbox flex-align-center\"\n    [class.matcha-checkbox-disabled]=\"disabled\">\n    <div\n        class=\"matcha-checkbox-container w-40 h-40 max-w-40 max-h-40 min-w-40 min-h-40 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"] }] }); }
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"matcha-checkbox flex-align-center\" [class.matcha-checkbox-disabled]=\"disabled\">\n    <div class=\"matcha-checkbox-container w-40 h-40 max-w-40 max-h-40 min-w-40 min-h-40 flex-center-center radius-full cursor-pointer\"\n        matchaRipple>\n        <input #input type=\"checkbox\" class=\"matcha-checkbox-input\" [checked]=\"checked\" [disabled]=\"disabled\"\n            [indeterminate]=\"indeterminate\" (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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCheckboxComponent, decorators: [{
             type: Component,
@@ -2557,8 +2583,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             useExisting: forwardRef(() => MatchaCheckboxComponent),
                             multi: true
                         }
-                    ], template: "<label\n    class=\"matcha-checkbox flex-align-center\"\n    [class.matcha-checkbox-disabled]=\"disabled\">\n    <div\n        class=\"matcha-checkbox-container w-40 h-40 max-w-40 max-h-40 min-w-40 min-h-40 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>" }]
-        }], propDecorators: { color: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"matcha-checkbox flex-align-center\" [class.matcha-checkbox-disabled]=\"disabled\">\n    <div class=\"matcha-checkbox-container w-40 h-40 max-w-40 max-h-40 min-w-40 min-h-40 flex-center-center radius-full cursor-pointer\"\n        matchaRipple>\n        <input #input type=\"checkbox\" class=\"matcha-checkbox-input\" [checked]=\"checked\" [disabled]=\"disabled\"\n            [indeterminate]=\"indeterminate\" (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>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], color: [{
                 type: Input
             }], indeterminate: [{
                 type: Input
@@ -2573,19 +2602,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class MatchaRadioComponent {
-    constructor() {
-        this.color = 'accent';
-        this.value = null;
-        this.name = '';
-        this._disabled = false;
-        this._checked = false;
-        this._modelValue = null;
-        this.checkedChange = new EventEmitter();
-        this.change = new EventEmitter();
-        // ControlValueAccessor methods
-        this.onChange = () => { };
-        this.onTouched = () => { };
-    }
     set disabled(value) {
         this._disabled = value != null && `${value}` !== 'false';
     }
@@ -2598,13 +2614,18 @@ class MatchaRadioComponent {
     set checked(value) {
         if (value !== this._checked) {
             this._checked = value;
+            if (this.inputElement) {
+                this.inputElement.nativeElement.checked = value;
+            }
             const outVal = this.value !== undefined ? this.value : this._checked;
             this.onChange(outVal);
+            this.cdr.markForCheck();
         }
     }
     writeValue(value) {
         this._modelValue = value;
         this._checked = this.value !== undefined ? this.value === value : !!value;
+        this.cdr.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2614,10 +2635,28 @@ class MatchaRadioComponent {
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.color = 'accent';
+        this.value = null;
+        this.name = '';
+        this._disabled = false;
+        this._checked = false;
+        this._modelValue = null;
+        this.checkedChange = new EventEmitter();
+        this.change = new EventEmitter();
+        // ControlValueAccessor methods
+        this.onChange = () => { };
+        this.onTouched = () => { };
     }
     onInputChange(event) {
         if (this.disabled)
             return;
+        // Não usar preventDefault aqui para manter o comportamento nativo do rádio (seleção)
+        // Apenas paramos a propagação para o host do componente
+        event.stopPropagation();
         this.checked = true;
         this.onTouched();
         // Emitir o valor correto para o ControlValueAccessor
@@ -2625,16 +2664,17 @@ class MatchaRadioComponent {
         this.onChange(outVal);
         const eventData = { checked: this.checked };
         this.checkedChange.emit(eventData);
-        this.change.emit(event);
+        this.change.emit({ source: this, value: outVal });
+        this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaRadioComponent, isStandalone: false, selector: "matcha-radio", inputs: { color: "color", value: "value", name: "name", disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange", change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaRadioComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<label\n    class=\"matcha-radio flex-align-center\"\n    [class.matcha-radio-disabled]=\"disabled\">\n    <div\n        class=\"matcha-radio-container w-40 h-40 max-w-40 max-h-40 min-w-40 min-h-40 flex-center-center radius-full cursor-pointer\"\n        matchaRipple>\n        <input\n            type=\"radio\"\n            class=\"matcha-radio-input\"\n            [attr.name]=\"name\"\n            [value]=\"value\"\n            [checked]=\"checked\"\n            [disabled]=\"disabled\"\n            (change)=\"onInputChange($event)\">\n    </div>\n\n    <span class=\"matcha-radio-label fw-500 lh-20\">\n        <ng-content></ng-content>\n    </span>\n</label>", styles: [""], dependencies: [{ kind: "directive", type: MatchaRippleDirective, selector: "[matchaRipple]", inputs: ["rippleColor"] }] }); }
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<label\n    class=\"matcha-radio flex-align-center\"\n    [class.matcha-radio-disabled]=\"disabled\">\n    <div\n        class=\"matcha-radio-container w-40 h-40 max-w-40 max-h-40 min-w-40 min-h-40 flex-center-center radius-full cursor-pointer\"\n        matchaRipple>\n        <input\n            type=\"radio\"\n            class=\"matcha-radio-input\"\n            [attr.name]=\"name\"\n            [value]=\"value\"\n            [checked]=\"checked\"\n            [disabled]=\"disabled\"\n            (change)=\"onInputChange($event)\">\n    </div>\n\n    <span class=\"matcha-radio-label fw-500 lh-20\">\n        <ng-content></ng-content>\n    </span>\n</label>", styles: [""], dependencies: [{ kind: "directive", type: MatchaRippleDirective, selector: "[matchaRipple]", inputs: ["rippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioComponent, decorators: [{
             type: Component,
@@ -2644,8 +2684,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             useExisting: forwardRef(() => MatchaRadioComponent),
                             multi: true
                         }
-                    ], template: "<label\n    class=\"matcha-radio flex-align-center\"\n    [class.matcha-radio-disabled]=\"disabled\">\n    <div\n        class=\"matcha-radio-container w-40 h-40 max-w-40 max-h-40 min-w-40 min-h-40 flex-center-center radius-full cursor-pointer\"\n        matchaRipple>\n        <input\n            type=\"radio\"\n            class=\"matcha-radio-input\"\n            [attr.name]=\"name\"\n            [value]=\"value\"\n            [checked]=\"checked\"\n            [disabled]=\"disabled\"\n            (change)=\"onInputChange($event)\">\n    </div>\n\n    <span class=\"matcha-radio-label fw-500 lh-20\">\n        <ng-content></ng-content>\n    </span>\n</label>" }]
-        }], propDecorators: { color: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n    class=\"matcha-radio flex-align-center\"\n    [class.matcha-radio-disabled]=\"disabled\">\n    <div\n        class=\"matcha-radio-container w-40 h-40 max-w-40 max-h-40 min-w-40 min-h-40 flex-center-center radius-full cursor-pointer\"\n        matchaRipple>\n        <input\n            type=\"radio\"\n            class=\"matcha-radio-input\"\n            [attr.name]=\"name\"\n            [value]=\"value\"\n            [checked]=\"checked\"\n            [disabled]=\"disabled\"\n            (change)=\"onInputChange($event)\">\n    </div>\n\n    <span class=\"matcha-radio-label fw-500 lh-20\">\n        <ng-content></ng-content>\n    </span>\n</label>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], color: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -2661,6 +2704,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Output
             }] } });
 
+let nextUniqueId = 0;
+class MatchaRadioGroupComponent {
+    get value() { return this._value; }
+    set value(newValue) {
+        if (this._value !== newValue) {
+            this._value = newValue;
+            this.updateSelectedRadioFromValue();
+            this.onChange(this._value);
+            this._cdr.markForCheck();
+        }
+    }
+    get disabled() { return this._disabled; }
+    set disabled(value) {
+        this._disabled = value;
+        this.updateDisabledState();
+    }
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        this._value = null;
+        this.name = `matcha-radio-group-${nextUniqueId++}`;
+        this._disabled = false;
+        this.change = new EventEmitter();
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this._unsubscribeAll = new Subject();
+        this._radioSubscriptions = [];
+        this._isInitialized = false;
+    }
+    ngAfterContentInit() {
+        this._isInitialized = true;
+        // Initial setup
+        this.updateSelectedRadioFromValue();
+        this.updateDisabledState();
+        this.updateNames();
+        this.subscribeToRadios();
+        // Handle dynamic additions/removals
+        this.radios.changes.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            this.updateSelectedRadioFromValue();
+            this.updateDisabledState();
+            this.updateNames();
+            this.subscribeToRadios();
+        });
+    }
+    updateNames() {
+        if (this.radios) {
+            this.radios.forEach(radio => {
+                radio.name = this.name;
+                radio['cdr'].markForCheck();
+            });
+        }
+    }
+    subscribeToRadios() {
+        this._radioSubscriptions.forEach(sub => sub.unsubscribe());
+        this._radioSubscriptions = [];
+        if (this.radios) {
+            this.radios.forEach(radio => {
+                const sub = radio.change.pipe(takeUntil(this._unsubscribeAll)).subscribe((event) => {
+                    this.onTouched();
+                    if (this.value !== event.value) {
+                        this._value = event.value; // Update internal value without triggering setter logic again if unnecessary, but setter updates radios.
+                        // Actually, if clicked, the radio is already checked.
+                        // Just update value and emit.
+                        this.onChange(this._value);
+                        this.change.emit(event);
+                    }
+                });
+                this._radioSubscriptions.push(sub);
+            });
+        }
+    }
+    writeValue(value) {
+        this._value = value;
+        this.updateSelectedRadioFromValue();
+        this._cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    updateSelectedRadioFromValue() {
+        if (this.radios && this._isInitialized) {
+            this.radios.forEach(radio => {
+                radio.checked = this._value === radio.value;
+            });
+        }
+    }
+    updateDisabledState() {
+        if (this.radios && this._isInitialized && this.disabled !== undefined) {
+            this.radios.forEach(radio => {
+                radio.disabled = this.disabled;
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaRadioGroupComponent, isStandalone: false, selector: "matcha-radio-group", inputs: { value: "value", name: "name", disabled: "disabled" }, outputs: { change: "change" }, host: { attributes: { "role": "radiogroup" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MatchaRadioGroupComponent),
+                multi: true
+            }
+        ], queries: [{ propertyName: "radios", predicate: i0.forwardRef(() => MatchaRadioComponent), descendants: true }], ngImport: i0, template: "<ng-content></ng-content>", styles: [".matcha-radio-group{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-radio-group', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MatchaRadioGroupComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        'role': 'radiogroup',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>", styles: [".matcha-radio-group{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { radios: [{
+                type: ContentChildren,
+                args: [forwardRef(() => MatchaRadioComponent), { descendants: true }]
+            }], value: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
 class MatchaSpinComponent {
     set progress(value) {
         this._progress = Number(value);
@@ -2947,9 +3125,10 @@ class MatchaSlideToggleComponent {
         const newCheckedState = value === '' ? true : !!value;
         if (newCheckedState !== this._checked) {
             this._checked = newCheckedState;
-            // Força a detecção imediata para sincronizar o DOM do input interno
-            // especialmente útil quando o pai reverte o estado no mesmo ciclo
-            this.cdr.detectChanges();
+            if (this.inputElement) {
+                this.inputElement.nativeElement.checked = this._checked;
+            }
+            this.cdr.markForCheck();
         }
     }
     get checked() {
@@ -3029,7 +3208,7 @@ class MatchaSlideToggleComponent {
                 useExisting: forwardRef(() => MatchaSlideToggleComponent),
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<label\n  class=\"matcha-slide-toggle-wrapper flex-align-center\"\n  [class.matcha-slide-toggle-disabled]=\"disabled\"\n  >\n  <input\n    type=\"checkbox\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n  />\n\n  <span class=\"matcha-slide-toggle-label ml-8 fw-500 fs-16 lh-20\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"matcha-slide-toggle-wrapper flex-align-center\" [class.matcha-slide-toggle-disabled]=\"disabled\">\n  <input #input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"onInputChange($event)\" />\n\n  <span class=\"matcha-slide-toggle-label ml-8 fw-500 fs-16 lh-20\">\n    <ng-content></ng-content>\n  </span>\n</label>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSlideToggleComponent, decorators: [{
             type: Component,
@@ -3039,8 +3218,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             useExisting: forwardRef(() => MatchaSlideToggleComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  class=\"matcha-slide-toggle-wrapper flex-align-center\"\n  [class.matcha-slide-toggle-disabled]=\"disabled\"\n  >\n  <input\n    type=\"checkbox\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n  />\n\n  <span class=\"matcha-slide-toggle-label ml-8 fw-500 fs-16 lh-20\">\n    <ng-content></ng-content>\n  </span>\n</label>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { color: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"matcha-slide-toggle-wrapper flex-align-center\" [class.matcha-slide-toggle-disabled]=\"disabled\">\n  <input #input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"onInputChange($event)\" />\n\n  <span class=\"matcha-slide-toggle-label ml-8 fw-500 fs-16 lh-20\">\n    <ng-content></ng-content>\n  </span>\n</label>" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], color: [{
                 type: Input
             }], checked: [{
                 type: Input
@@ -13356,7 +13538,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
 class MatchaRadioModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioModule, declarations: [MatchaRadioComponent], imports: [CommonModule, MatchaRippleModule], exports: [MatchaRadioComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioModule, declarations: [MatchaRadioComponent,
+            MatchaRadioGroupComponent], imports: [CommonModule, MatchaRippleModule], exports: [MatchaRadioComponent,
+            MatchaRadioGroupComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioModule, imports: [CommonModule, MatchaRippleModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioModule, decorators: [{
@@ -13364,10 +13548,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             args: [{
                     declarations: [
                         MatchaRadioComponent,
+                        MatchaRadioGroupComponent
                     ],
                     imports: [CommonModule, MatchaRippleModule],
                     exports: [
                         MatchaRadioComponent,
+                        MatchaRadioGroupComponent
                     ],
                 }]
         }] });
@@ -14016,5 +14202,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaRadioComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
+export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
 //# sourceMappingURL=matcha-components.mjs.map