matcha-components 20.68.0 → 20.70.0

package/fesm2022/matcha-components.mjs

@@ -9612,6 +9612,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             }] } });
 
 class MatchaChipComponent {
+    get hostClasses() {
+        return 'matcha-chip radius-full d-flex align-items-center gap-8 px-14 py-10 h-20';
+    }
     /** Se o chip está selecionado */
     get selected() {
         return this._selected;
@@ -9627,9 +9630,6 @@ class MatchaChipComponent {
     set disabled(value) {
         this._disabled = value;
     }
-    get hostClasses() {
-        return 'matcha-chip radius-full d-flex align-items-center gap-8 px-14 py-10 h-20';
-    }
     constructor(_elementRef) {
         this._elementRef = _elementRef;
         /** Cor do chip (primary, accent, warn) */
@@ -9649,6 +9649,11 @@ class MatchaChipComponent {
         /** Evento emitido quando o chip é destruído */
         this.destroyed = new EventEmitter();
     }
+    ngOnInit() {
+        // Aplica as classes CSS diretamente no elemento
+        const element = this._elementRef.nativeElement;
+        element.classList.add('matcha-chip', 'radius-full', 'd-flex', 'align-items-center', 'gap-8', 'px-14', 'py-10', 'h-20');
+    }
     ngAfterViewInit() {
         this._setupChipRemoveDirective();
     }
@@ -9728,7 +9733,10 @@ class MatchaChipComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MatchaChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-chip', standalone: false, template: "<span class=\"matcha-chip-content fs-14 fw-700 lh-20 color-label\">\n  <ng-content></ng-content>\n</span>\n<ng-container *ngIf=\"removable && !hasCustomRemoveIcon()\">\n  <matcha-divider direction=\"vertical\" gap=\"0\"></matcha-divider>\n  <button \n    type=\"button\"\n    class=\"matcha-chip-remove d-flex align-items-center justify-content-center w-20 h-20 min-w-20 radius-full cursor-pointer border-0 background-transparent p-0 m-0\"\n    [disabled]=\"disabled\"\n    (click)=\"remove(); $event.stopPropagation()\"\n    tabindex=\"-1\"\n    aria-label=\"Remove\"\n    matchaChipRemove>\n    <matcha-icon name=\"close\" class=\"fs-14\" color=\"label\"></matcha-icon>\n  </button>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { color: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], color: [{
                 type: Input
             }], selected: [{
                 type: Input
@@ -9746,9 +9754,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                 type: Output
             }], destroyed: [{
                 type: Output
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
             }], _handleClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -9758,7 +9763,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             }] } });
 
 class MatchaChipListComponent {
-    constructor() {
+    /** Se a chip list está desabilitada */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        this._updateChipsDisabledState();
+    }
+    /** Valor(es) selecionado(s) */
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        this._value = newValue;
+        this._updateChipsSelectionState();
+    }
+    get isDisabled() { return this.disabled; }
+    get ariaMultiselectable() { return this.multiple ? 'true' : null; }
+    get ariaDisabled() { return this.disabled.toString(); }
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
         /** Se múltiplos chips podem ser selecionados */
         this.multiple = false;
         /** Se os chips podem ser selecionados */
@@ -9778,25 +9803,11 @@ class MatchaChipListComponent {
         this.onChange = () => { };
         this.onTouched = () => { };
     }
-    /** Se a chip list está desabilitada */
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-        this._updateChipsDisabledState();
-    }
-    /** Valor(es) selecionado(s) */
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        this._value = newValue;
-        this._updateChipsSelectionState();
+    ngOnInit() {
+        // Aplica as classes CSS diretamente no elemento
+        const element = this._elementRef.nativeElement;
+        element.classList.add('matcha-chip-list');
     }
-    get isDisabled() { return this.disabled; }
-    get ariaMultiselectable() { return this.multiple ? 'true' : null; }
-    get ariaDisabled() { return this.disabled.toString(); }
     ngAfterContentInit() {
         this._setupChipListeners();
         this._updateChipsSelectionState();
@@ -9975,7 +9986,7 @@ class MatchaChipListComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MatchaChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MatchaChipListComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: MatchaChipListComponent, isStandalone: false, selector: "matcha-chip-list", inputs: { multiple: "multiple", selectable: "selectable", disabled: "disabled", value: "value", orientation: "orientation" }, outputs: { change: "change", removed: "removed" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.matcha-chip-list": "this.chipListClass", "class.matcha-chip-list-disabled": "this.isDisabled", "attr.role": "this.role", "attr.aria-multiselectable": "this.ariaMultiselectable", "attr.aria-disabled": "this.ariaDisabled" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -9993,7 +10004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                             multi: true
                         }
                     ], template: "<div class=\"matcha-chip-list-wrapper\" [class.matcha-chip-list-vertical]=\"orientation === 'vertical'\">\n  <ng-content></ng-content>\n</div>" }]
-        }], propDecorators: { multiple: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { multiple: [{
                 type: Input
             }], selectable: [{
                 type: Input