matcha-components 20.172.0 → 20.175.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/matcha-components.mjs +87 -40
  2. package/fesm2022/matcha-components.mjs.map +1 -1
  3. package/index.d.ts +18 -3
  4. package/package.json +1 -1
package/fesm2022/matcha-components.mjs CHANGED
@@ -2489,16 +2489,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
2489
2489
  }] } });
2490
2490
 
2491
2491
  class MatchaCheckboxComponent {
2492
- constructor() {
2493
- this.color = 'accent';
2494
- this.indeterminate = false;
2495
- this._disabled = false;
2496
- this._checked = false;
2497
- this.checkedChange = new EventEmitter();
2498
- this.change = new EventEmitter();
2499
- // ControlValueAccessor methods
2500
- this.onChange = () => { };
2501
- this.onTouched = () => { };
2492
+ get indeterminate() {
2493
+ return this._indeterminate;
2494
+ }
2495
+ set indeterminate(value) {
2496
+ if (value !== this._indeterminate) {
2497
+ this._indeterminate = value;
2498
+ if (this.inputElement) {
2499
+ this.inputElement.nativeElement.indeterminate = value;
2500
+ }
2501
+ this.cdr.markForCheck();
2502
+ }
2502
2503
  }
2503
2504
  get disabled() {
2504
2505
  return this._disabled;
@@ -2515,11 +2516,16 @@ class MatchaCheckboxComponent {
2515
2516
  const booleanValue = value != null && `${value}` !== 'false';
2516
2517
  if (booleanValue !== this._checked) {
2517
2518
  this._checked = booleanValue;
2519
+ if (this.inputElement) {
2520
+ this.inputElement.nativeElement.checked = this._checked;
2521
+ }
2518
2522
  this.onChange(this._checked);
2523
+ this.cdr.markForCheck();
2519
2524
  }
2520
2525
  }
2521
2526
  writeValue(value) {
2522
2527
  this._checked = value;
2528
+ this.cdr.markForCheck();
2523
2529
  }
2524
2530
  registerOnChange(fn) {
2525
2531
  this.onChange = fn;
@@ -2529,25 +2535,45 @@ class MatchaCheckboxComponent {
2529
2535
  }
2530
2536
  setDisabledState(isDisabled) {
2531
2537
  this.disabled = isDisabled;
2538
+ this.cdr.markForCheck();
2539
+ }
2540
+ constructor(cdr) {
2541
+ this.cdr = cdr;
2542
+ this.color = 'accent';
2543
+ this._indeterminate = false;
2544
+ this._disabled = false;
2545
+ this._checked = false;
2546
+ this.checkedChange = new EventEmitter();
2547
+ this.change = new EventEmitter();
2548
+ // ControlValueAccessor methods
2549
+ this.onChange = () => { };
2550
+ this.onTouched = () => { };
2532
2551
  }
2533
2552
  onInputChange(event) {
2534
2553
  if (this.disabled)
2535
2554
  return;
2536
2555
  const input = event.target;
2537
- this.checked = input.checked;
2556
+ const newCheckedState = input.checked;
2557
+ // Sincronizar estado indeterminate interno imediatamente
2558
+ if (this._indeterminate) {
2559
+ this._indeterminate = false;
2560
+ // Não precisa atualizar o nativo pois o browser já fez isso ao clicar
2561
+ }
2562
+ this.checked = newCheckedState;
2538
2563
  this.onTouched();
2539
2564
  const eventData = { checked: this.checked };
2540
2565
  this.checkedChange.emit(eventData);
2541
- this.change.emit(event);
2566
+ this.change.emit({ source: this, checked: this.checked });
2567
+ this.cdr.markForCheck();
2542
2568
  }
2543
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2569
+ 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 }); }
2544
2570
  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: [
2545
2571
  {
2546
2572
  provide: NG_VALUE_ACCESSOR,
2547
2573
  useExisting: forwardRef(() => MatchaCheckboxComponent),
2548
2574
  multi: true
2549
2575
  }
2550
- ], 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"] }] }); }
2576
+ ], 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 }); }
2551
2577
  }
2552
2578
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCheckboxComponent, decorators: [{
2553
2579
  type: Component,
@@ -2557,8 +2583,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
2557
2583
  useExisting: forwardRef(() => MatchaCheckboxComponent),
2558
2584
  multi: true
2559
2585
  }
2560
- ], 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>" }]
2561
- }], propDecorators: { color: [{
2586
+ ], 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>" }]
2587
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
2588
+ type: ViewChild,
2589
+ args: ['input', { static: true }]
2590
+ }], color: [{
2562
2591
  type: Input
2563
2592
  }], indeterminate: [{
2564
2593
  type: Input
@@ -2573,19 +2602,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
2573
2602
  }] } });
2574
2603
 
2575
2604
  class MatchaRadioComponent {
2576
- constructor() {
2577
- this.color = 'accent';
2578
- this.value = null;
2579
- this.name = '';
2580
- this._disabled = false;
2581
- this._checked = false;
2582
- this._modelValue = null;
2583
- this.checkedChange = new EventEmitter();
2584
- this.change = new EventEmitter();
2585
- // ControlValueAccessor methods
2586
- this.onChange = () => { };
2587
- this.onTouched = () => { };
2588
- }
2589
2605
  set disabled(value) {
2590
2606
  this._disabled = value != null && `${value}` !== 'false';
2591
2607
  }
@@ -2598,13 +2614,18 @@ class MatchaRadioComponent {
2598
2614
  set checked(value) {
2599
2615
  if (value !== this._checked) {
2600
2616
  this._checked = value;
2617
+ if (this.inputElement) {
2618
+ this.inputElement.nativeElement.checked = value;
2619
+ }
2601
2620
  const outVal = this.value !== undefined ? this.value : this._checked;
2602
2621
  this.onChange(outVal);
2622
+ this.cdr.markForCheck();
2603
2623
  }
2604
2624
  }
2605
2625
  writeValue(value) {
2606
2626
  this._modelValue = value;
2607
2627
  this._checked = this.value !== undefined ? this.value === value : !!value;
2628
+ this.cdr.markForCheck();
2608
2629
  }
2609
2630
  registerOnChange(fn) {
2610
2631
  this.onChange = fn;
@@ -2614,10 +2635,28 @@ class MatchaRadioComponent {
2614
2635
  }
2615
2636
  setDisabledState(isDisabled) {
2616
2637
  this.disabled = isDisabled;
2638
+ this.cdr.markForCheck();
2639
+ }
2640
+ constructor(cdr) {
2641
+ this.cdr = cdr;
2642
+ this.color = 'accent';
2643
+ this.value = null;
2644
+ this.name = '';
2645
+ this._disabled = false;
2646
+ this._checked = false;
2647
+ this._modelValue = null;
2648
+ this.checkedChange = new EventEmitter();
2649
+ this.change = new EventEmitter();
2650
+ // ControlValueAccessor methods
2651
+ this.onChange = () => { };
2652
+ this.onTouched = () => { };
2617
2653
  }
2618
2654
  onInputChange(event) {
2619
2655
  if (this.disabled)
2620
2656
  return;
2657
+ // Não usar preventDefault aqui para manter o comportamento nativo do rádio (seleção)
2658
+ // Apenas paramos a propagação para o host do componente
2659
+ event.stopPropagation();
2621
2660
  this.checked = true;
2622
2661
  this.onTouched();
2623
2662
  // Emitir o valor correto para o ControlValueAccessor
@@ -2625,16 +2664,17 @@ class MatchaRadioComponent {
2625
2664
  this.onChange(outVal);
2626
2665
  const eventData = { checked: this.checked };
2627
2666
  this.checkedChange.emit(eventData);
2628
- this.change.emit(event);
2667
+ this.change.emit({ source: this, value: outVal });
2668
+ this.cdr.markForCheck();
2629
2669
  }
2630
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2670
+ 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 }); }
2631
2671
  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: [
2632
2672
  {
2633
2673
  provide: NG_VALUE_ACCESSOR,
2634
2674
  useExisting: forwardRef(() => MatchaRadioComponent),
2635
2675
  multi: true
2636
2676
  }
2637
- ], 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"] }] }); }
2677
+ ], 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 }); }
2638
2678
  }
2639
2679
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioComponent, decorators: [{
2640
2680
  type: Component,
@@ -2644,8 +2684,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
2644
2684
  useExisting: forwardRef(() => MatchaRadioComponent),
2645
2685
  multi: true
2646
2686
  }
2647
- ], 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>" }]
2648
- }], propDecorators: { color: [{
2687
+ ], 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>" }]
2688
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
2689
+ type: ViewChild,
2690
+ args: ['input', { static: true }]
2691
+ }], color: [{
2649
2692
  type: Input
2650
2693
  }], value: [{
2651
2694
  type: Input
@@ -2947,9 +2990,10 @@ class MatchaSlideToggleComponent {
2947
2990
  const newCheckedState = value === '' ? true : !!value;
2948
2991
  if (newCheckedState !== this._checked) {
2949
2992
  this._checked = newCheckedState;
2950
- // Força a detecção imediata para sincronizar o DOM do input interno
2951
- // especialmente útil quando o pai reverte o estado no mesmo ciclo
2952
- this.cdr.detectChanges();
2993
+ if (this.inputElement) {
2994
+ this.inputElement.nativeElement.checked = this._checked;
2995
+ }
2996
+ this.cdr.markForCheck();
2953
2997
  }
2954
2998
  }
2955
2999
  get checked() {
@@ -3029,7 +3073,7 @@ class MatchaSlideToggleComponent {
3029
3073
  useExisting: forwardRef(() => MatchaSlideToggleComponent),
3030
3074
  multi: true,
3031
3075
  },
3032
- ], 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 }); }
3076
+ ], 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 }); }
3033
3077
  }
3034
3078
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSlideToggleComponent, decorators: [{
3035
3079
  type: Component,
@@ -3039,8 +3083,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
3039
3083
  useExisting: forwardRef(() => MatchaSlideToggleComponent),
3040
3084
  multi: true,
3041
3085
  },
3042
- ], 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" }]
3043
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { color: [{
3086
+ ], 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>" }]
3087
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
3088
+ type: ViewChild,
3089
+ args: ['input', { static: true }]
3090
+ }], color: [{
3044
3091
  type: Input
3045
3092
  }], checked: [{
3046
3093
  type: Input