matcha-components 19.43.0 → 19.45.0

package/fesm2022/matcha-components.mjs

@@ -659,7 +659,7 @@ class MatchaAccordionItemComponent {
     constructor() {
         this._stretch = false;
         this._isOpen = false;
-        this.toggle = new EventEmitter();
+        this.opened = new EventEmitter();
     }
     set stretch(value) {
         this._stretch = value != null && `${value}` !== 'false';
@@ -674,14 +674,14 @@ class MatchaAccordionItemComponent {
         return this._isOpen;
     }
     ngOnInit() {
-        this.toggle.emit(this.isOpen);
+        this.opened.emit(this.isOpen);
     }
     toggleAccordion() {
         this.isOpen = !this.isOpen;
-        this.toggle.emit(this.isOpen);
+        this.opened.emit(this.isOpen);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaAccordionItemComponent, isStandalone: false, selector: "matcha-accordion-item", inputs: { stretch: "stretch", isOpen: "isOpen" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\" (click)=\"toggleAccordion()\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], animations: [...createAnimations] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaAccordionItemComponent, isStandalone: false, selector: "matcha-accordion-item", inputs: { stretch: "stretch", isOpen: "isOpen" }, outputs: { opened: "opened" }, ngImport: i0, template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\" (click)=\"toggleAccordion()\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], animations: [...createAnimations] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaAccordionItemComponent, decorators: [{
             type: Component,
@@ -690,7 +690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], isOpen: [{
                 type: Input
-            }], toggle: [{
+            }], opened: [{
                 type: Output
             }] } });
 
@@ -699,7 +699,6 @@ class MatchaAccordionComponent {
         this._multiple = false;
         this.openedChange = new EventEmitter();
     }
-    // Se multiple for true, permite abrir vários itens simultaneamente.
     set multiple(value) {
         // Converte 'false' (string) ou false (boolean) para false, e qualquer outro valor para true.
         this._multiple = value != null && `${value}` !== 'false';
@@ -709,8 +708,7 @@ class MatchaAccordionComponent {
     }
     ngAfterContentInit() {
         this.items.forEach(item => {
-            item.toggle.subscribe((isOpen) => {
-                console.log('Accordion: Item toggled, isOpen:', isOpen);
+            item.opened.subscribe((isOpen) => {
                 this.toggleItem(item);
                 this.openedChange.emit(isOpen);
             });
@@ -1744,13 +1742,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class MatchaSpinComponent {
+    constructor() {
+        this._progress = 0;
+        this.color = 'accent';
+        this.diameter = 60;
+        this.strokeWidth = 5;
+    }
+    set progress(value) {
+        this._progress = Number(value);
+    }
+    get progress() {
+        return this._progress;
+    }
+    get radius() {
+        return (this.diameter - this.strokeWidth) / 2;
+    }
+    get circumference() {
+        return 2 * Math.PI * this.radius;
+    }
+    get dashOffset() {
+        const progress = Math.min(Math.max(Number(this.progress), 0), 100);
+        return this.circumference - (progress / 100) * this.circumference;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSpinComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaSpinComponent, isStandalone: false, selector: "matcha-spin", ngImport: i0, template: "<span class=\"rotate-infinity-1s i-matcha-action_reload i-size-md color-grey\"></span>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaSpinComponent, isStandalone: false, selector: "matcha-spin", inputs: { progress: "progress", color: "color" }, ngImport: i0, template: "<div\n  class=\"matcha-spin\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n  [style.width.px]=\"diameter\"\n  [style.height.px]=\"diameter\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\">\n\n    <circle\n      class=\"spin-placeholder\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n    />\n\n    <circle\n      class=\"spin-progress\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"progress ? dashOffset:null\"\n    />\n  </svg>\n\n</div>\n\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaSpinComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-spin', standalone: false, template: "<span class=\"rotate-infinity-1s i-matcha-action_reload i-size-md color-grey\"></span>\n" }]
-        }] });
+            args: [{ selector: 'matcha-spin', standalone: false, template: "<div\n  class=\"matcha-spin\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n  [style.width.px]=\"diameter\"\n  [style.height.px]=\"diameter\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\">\n\n    <circle\n      class=\"spin-placeholder\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n    />\n\n    <circle\n      class=\"spin-progress\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"progress ? dashOffset:null\"\n    />\n  </svg>\n\n</div>\n\n" }]
+        }], propDecorators: { progress: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
 
 class MatchaTooltipDirective {
     constructor(el, renderer) {