matcha-components 19.49.0 → 19.51.0

package/fesm2022/matcha-components.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { ElementRef, Renderer2, Input, Inject, Component, EventEmitter, ContentChild, Output, ContentChildren, HostBinding, HostListener, Directive, forwardRef, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
 import { Subscription, Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControlName, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 class MatchaButtonComponent {
     constructor(_elementRef, _renderer) {
@@ -201,34 +201,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 class MatchaButtonItemComponent {
     constructor(renderer) {
         this.renderer = renderer;
-        // Propriedade que indica se o botão está ativo
         this.active = false;
-        // Evento emitido quando o botão for clicado
         this.selected = new EventEmitter();
     }
     ngAfterContentInit() {
-        // Atualiza a cor inicial do botão conforme o estado
-        this.updateButtonColor();
-        // Registra o clique no botão interno
         if (this.innerButton) {
-            this.renderer.listen(this.innerButton.nativeElement, 'click', () => {
-                this.onClick();
-            });
+            this.renderer.listen(this.innerButton.nativeElement, 'click', () => this.onClick());
         }
     }
     onClick() {
         this.selected.emit();
     }
-    // Método para definir o estado ativo e atualizar a cor
-    setActiveState(isActive, activeColor, inactiveColor) {
+    setActiveState(isActive, activeColor, inactiveColor, activeType, inactiveType) {
         this.active = isActive;
-        this.updateButtonColor(activeColor, inactiveColor);
-    }
-    // Atualiza o atributo 'color' do botão interno
-    updateButtonColor(activeColor = 'blue', inactiveColor = 'grey') {
-        if (this.innerButton) {
-            const newColor = this.active ? activeColor : inactiveColor;
-            this.renderer.setAttribute(this.innerButton.nativeElement, 'color', newColor);
+        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');
         }
     }
     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 }); }
@@ -246,59 +242,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 args: [MatchaButtonComponent, { static: true, read: ElementRef }]
             }] } });
 
-// button-group.component.ts
 class MatchaButtonGroupComponent {
     constructor() {
         this._multiple = false;
-        // Cores para os estados ativo e inativo
+        this._disabled = false;
         this.activeColor = 'blue';
-        this.inactiveColor = 'grey';
+        this.inactiveColor = 'disabled';
+        this.activeType = '';
+        this.inactiveType = 'basic';
+        this._gap = 16;
     }
     get multiple() {
         return this._multiple;
     }
     set multiple(value) {
-        // Converte string 'false' para boolean false
-        // Qualquer outro valor string será convertido para true
         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}`;
+    }
     ngAfterContentInit() {
-        console.log(this.buttonItems, 'estou funcionando');
-        // Inicializa cada button-item com o estado inativo
-        this.buttonItems.forEach(item => {
-            item.setActiveState(false, this.activeColor, this.inactiveColor);
-            // Inscreve-se para saber quando algum item for selecionado
+        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.selected.subscribe(() => this.onItemSelected(item));
         });
-        // Opcional: define o primeiro item como ativo por padrão
-        if (this.buttonItems.first) {
-            this.buttonItems.first.setActiveState(true, this.activeColor, this.inactiveColor);
-        }
     }
     onItemSelected(selectedItem) {
         if (this.multiple) {
-            // Se múltiplo, inverte o estado do item clicado
-            selectedItem.setActiveState(!selectedItem.active, this.activeColor, this.inactiveColor);
+            selectedItem.setActiveState(!selectedItem.active, this.activeColor, this.inactiveColor, this.activeType, this.inactiveType);
         }
         else {
-            // Se único, desativa todos e ativa somente o item clicado
             this.buttonItems.forEach(item => {
-                item.setActiveState(item === selectedItem, this.activeColor, this.inactiveColor);
+                item.setActiveState(item === selectedItem, this.activeColor, this.inactiveColor, this.activeType, 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", activeColor: "activeColor", inactiveColor: "inactiveColor" }, queries: [{ propertyName: "buttonItems", predicate: MatchaButtonItemComponent }], ngImport: i0, template: "<div class=\"button-group d-flex flex-wrap gap-16\" role=\"group\"><ng-content></ng-content></div>\n", styles: [""] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-button-group', standalone: false, template: "<div class=\"button-group d-flex flex-wrap gap-16\" role=\"group\"><ng-content></ng-content></div>\n" }]
+            args: [{ selector: 'matcha-button-group', standalone: false, template: "<div class=\"button-group d-flex flex-wrap\" [ngClass]=\"gapClass\" role=\"group\"><ng-content></ng-content></div>\n" }]
         }], propDecorators: { multiple: [{
                 type: Input
+            }], disabled: [{
+                type: Input
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
             }], activeColor: [{
                 type: Input
             }], inactiveColor: [{
                 type: Input
+            }], activeType: [{
+                type: Input
+            }], inactiveType: [{
+                type: Input
+            }], gap: [{
+                type: Input
             }], buttonItems: [{
                 type: ContentChildren,
                 args: [MatchaButtonItemComponent]
@@ -1561,15 +1577,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 class MatchaFormFieldComponent {
     constructor() {
         this.color = 'grey';
+        this.size = null;
+        this.sizeXs = null;
+        this.sizeSm = null;
+        this.sizeMd = null;
+        this.sizeLg = null;
+        this.sizeXl = null;
+    }
+    get control() {
+        return this.controlDir?.control;
+    }
+    get showError() {
+        return !!this.control?.invalid && (this.control?.touched || this.control?.dirty);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color" }, ngImport: i0, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative p-8 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-content select=\"matcha-error\"></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative p-8 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-content select=\"matcha-error\"></ng-content>\n</div>\n" }]
+            args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n</div>\n" }]
         }], propDecorators: { color: [{
                 type: Input
+            }], size: [{
+                type: Input,
+                args: ['size']
+            }], sizeXs: [{
+                type: Input,
+                args: ['size-xs']
+            }], sizeSm: [{
+                type: Input,
+                args: ['size-sm']
+            }], sizeMd: [{
+                type: Input,
+                args: ['size-md']
+            }], sizeLg: [{
+                type: Input,
+                args: ['size-lg']
+            }], sizeXl: [{
+                type: Input,
+                args: ['size-xl']
+            }], controlDir: [{
+                type: ContentChild,
+                args: [FormControlName]
             }] } });
 
 class MatchaLabelComponent {
@@ -1577,11 +1626,11 @@ class MatchaLabelComponent {
         this.color = 'blue-grey';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-8 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n    <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n    <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-label', standalone: false, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-8 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n    <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>" }]
+            args: [{ selector: 'matcha-label', standalone: false, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n    <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>" }]
         }], propDecorators: { color: [{
                 type: Input
             }] } });
@@ -1742,18 +1791,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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;
     }
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this._progress = 0;
+        this.color = 'accent';
+        this.size = null;
+        this.sizeXs = null;
+        this.sizeSm = null;
+        this.sizeMd = null;
+        this.sizeLg = null;
+        this.sizeXl = null;
+        this.strokeWidth = 5;
+    }
+    ngOnInit() {
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-spin');
+        this.setSize();
+    }
+    setSize() {
+        const sizes = ['tiny', 'small', 'medium', 'large', 'huge'];
+        sizes.forEach(size => {
+            this._renderer.removeClass(this._elementRef.nativeElement, `matcha-spin-${size}`);
+        });
+        if (this.size) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-spin-${this.size}`);
+        }
+    }
+    get diameter() {
+        const rect = this._elementRef.nativeElement.getBoundingClientRect();
+        return rect.width;
+    }
     get radius() {
         return (this.diameter - this.strokeWidth) / 2;
     }
@@ -1764,16 +1837,40 @@ class MatchaSpinComponent {
         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.5", ngImport: i0, type: MatchaSpinComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", 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: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSpinComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaSpinComponent, isStandalone: false, selector: "matcha-spin", inputs: { progress: "progress", color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, 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>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\">\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    <circle\n      class=\"spin-progress\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"progress ? dashOffset : null\"\n    />\n  </svg>\n</div>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaSpinComponent, decorators: [{
             type: Component,
-            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: [{
+            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>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\">\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    <circle\n      class=\"spin-progress\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"progress ? dashOffset : null\"\n    />\n  </svg>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }], propDecorators: { progress: [{
                 type: Input
             }], color: [{
                 type: Input
+            }], size: [{
+                type: Input,
+                args: ['size']
+            }], sizeXs: [{
+                type: Input,
+                args: ['size-xs']
+            }], sizeSm: [{
+                type: Input,
+                args: ['size-sm']
+            }], sizeMd: [{
+                type: Input,
+                args: ['size-md']
+            }], sizeLg: [{
+                type: Input,
+                args: ['size-lg']
+            }], sizeXl: [{
+                type: Input,
+                args: ['size-xl']
             }] } });
 
 class MatchaHintTextComponent {