matcha-components 20.273.0 → 20.275.0

package/fesm2022/matcha-components.mjs

@@ -3055,7 +3055,7 @@ class MatchaButtonComponent {
         }
     }
     setGap() {
-        this._renderer.addClass(this._elementRef.nativeElement, `px-${this.gap}`);
+        this._renderer.addClass(this._elementRef.nativeElement, `px-${this.gap}--force`);
         this._renderer.addClass(this._elementRef.nativeElement, `gap-${this.gap}`);
         this._config.gap = this.gap;
     }
@@ -14074,63 +14074,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 
 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;
-    }
-    set selected(value) {
-        this._selected = value;
-        this.selectedChange.emit(this._selected);
-    }
-    /** Se o chip está desabilitado */
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-    }
+        const classes = ['matcha-chip'];
+        if (this._removable)
+            classes.push('matcha-chip-removable');
+        if (this._selected)
+            classes.push('matcha-chip-selected');
+        if (this._selectable)
+            classes.push('matcha-chip-selectable');
+        if (this._disabled)
+            classes.push('matcha-chip-disabled');
+        return classes.join(' ');
+    }
+    get selected() { return this._selected; }
+    set selected(v) {
+        const coerced = v === 'false' ? false : !!v;
+        if (this._selected !== coerced) {
+            this._selected = coerced;
+            this.selectedChange.emit(this._selected);
+        }
+    }
+    get selectable() { return this._selectable; }
+    set selectable(v) { this._selectable = v === 'false' ? false : !!v; }
+    get removable() { return this._removable; }
+    set removable(v) { this._removable = v === 'false' ? false : !!v; }
+    get disabled() { return this._disabled; }
+    set disabled(v) { this._disabled = v === 'false' ? false : !!v; }
     constructor(_elementRef) {
         this._elementRef = _elementRef;
-        /** Cor do chip (primary, accent, warn) */
         this.color = 'default';
         this._selected = false;
-        /** Se o chip pode ser selecionado */
-        this.selectable = false;
-        /** Se o chip pode ser removido */
-        this.removable = false;
+        this._selectable = false;
+        this._removable = false;
         this._disabled = false;
-        /** Valor associado ao chip */
         this.value = null;
-        /** Evento emitido quando o chip é selecionado */
         this.selectedChange = new EventEmitter();
-        /** Evento emitido quando o botão de remover é clicado */
         this.removed = new EventEmitter();
-        /** Evento emitido quando o chip é destruído */
         this.destroyed = new EventEmitter();
         this._hasCustomRemoveIcon = false;
     }
     ngOnInit() {
-        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');
-        // Verifica conteúdo projetado antes do template renderizar o botão padrão
-        this._hasCustomRemoveIcon = element.querySelector('[matchaChipRemove]') !== null;
+        this._hasCustomRemoveIcon = this._elementRef.nativeElement.querySelector('[matchaChipRemove]') !== null;
     }
     ngAfterViewInit() {
         this._setupChipRemoveDirective();
     }
     _setupChipRemoveDirective() {
-        // Usa event delegation para capturar cliques em elementos com matchaChipRemove
         this._elementRef.nativeElement.addEventListener('click', (event) => {
             const target = event.target;
-            // Verifica se o elemento clicado tem o atributo matchaChipRemove
-            // ou se é um elemento filho de um elemento com matchaChipRemove
             const removeElement = target.closest('[matchaChipRemove]');
             if (removeElement) {
                 event.stopPropagation();
                 event.preventDefault();
-                if (this.removable && !this.disabled) {
+                if (this._removable && !this._disabled) {
                     this.remove();
                 }
             }
@@ -14139,51 +14134,45 @@ class MatchaChipComponent {
     hasCustomRemoveIcon() {
         return this._elementRef.nativeElement.querySelector('[matchaChipRemove]') !== null;
     }
-    /** Manipula o clique no chip */
     _handleClick(event) {
-        if (this.disabled) {
+        if (this._disabled) {
             event.preventDefault();
             return;
         }
-        if (this.selectable) {
+        if (this._selectable) {
             this.toggleSelected();
         }
     }
-    /** Manipula o evento de teclado */
     _handleKeydown(event) {
-        if (this.disabled) {
+        if (this._disabled)
             return;
-        }
         switch (event.key) {
             case 'Delete':
             case 'Backspace':
-                if (this.removable) {
+                if (this._removable) {
                     this.remove();
                     event.preventDefault();
                 }
                 break;
             case ' ':
             case 'Enter':
-                if (this.selectable) {
+                if (this._selectable) {
                     this.toggleSelected();
                     event.preventDefault();
                 }
                 break;
         }
     }
-    /** Alterna o estado de seleção do chip */
     toggleSelected() {
-        if (this.selectable && !this.disabled) {
-            this.selected = !this.selected;
+        if (this._selectable && !this._disabled) {
+            this.selected = !this._selected;
         }
     }
-    /** Remove o chip */
     remove() {
-        if (this.removable && !this.disabled) {
+        if (this._removable && !this._disabled) {
             this.removed.emit(this);
         }
     }
-    /** Foco no elemento do chip */
     focus() {
         this._elementRef.nativeElement.focus();
     }
@@ -14191,11 +14180,11 @@ class MatchaChipComponent {
         this.destroyed.emit(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaChipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaChipComponent, isStandalone: false, selector: "matcha-chip", inputs: { color: "color", selected: "selected", selectable: "selectable", removable: "removable", disabled: "disabled", value: "value" }, outputs: { selectedChange: "selectedChange", removed: "removed", destroyed: "destroyed" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<span class=\"matcha-chip-content 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", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "direction"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaChipComponent, isStandalone: false, selector: "matcha-chip", inputs: { color: "color", selected: "selected", selectable: "selectable", removable: "removable", disabled: "disabled", value: "value" }, outputs: { selectedChange: "selectedChange", removed: "removed", destroyed: "destroyed" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<span class=\"matcha-chip-content color-label\">\n  <ng-content></ng-content>\n</span>\n<ng-container *ngIf=\"removable && !_hasCustomRemoveIcon\">\n  <matcha-divider direction=\"vertical\" gap=\"0\" class=\"py-8\"></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", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "direction"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-chip', standalone: false, template: "<span class=\"matcha-chip-content 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" }]
+            args: [{ selector: 'matcha-chip', standalone: false, template: "<span class=\"matcha-chip-content color-label\">\n  <ng-content></ng-content>\n</span>\n<ng-container *ngIf=\"removable && !_hasCustomRemoveIcon\">\n  <matcha-divider direction=\"vertical\" gap=\"0\" class=\"py-8\"></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: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']