matcha-components 20.64.0 → 20.65.0

package/fesm2022/matcha-components.mjs

@@ -9647,6 +9647,24 @@ class MatchaChipComponent {
         /** Evento emitido quando o chip é destruído */
         this.destroyed = new EventEmitter();
     }
+    ngAfterViewInit() {
+        this._setupChipRemoveDirective();
+    }
+    _setupChipRemoveDirective() {
+        // Usa event delegation para capturar cliques em elementos com matchaChipRemove
+        this._elementRef.nativeElement.addEventListener('click', (event) => {
+            const target = event.target;
+            if (target && target.hasAttribute('matchaChipRemove')) {
+                event.stopPropagation();
+                if (this.removable && !this.disabled) {
+                    this.remove();
+                }
+            }
+        });
+    }
+    hasCustomRemoveIcon() {
+        return this._elementRef.nativeElement.querySelector('[matchaChipRemove]') !== null;
+    }
     /** Manipula o clique no chip */
     _handleClick(event) {
         if (this.disabled) {
@@ -9699,11 +9717,11 @@ class MatchaChipComponent {
         this.destroyed.emit(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MatchaChipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", 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 fs-14 fw-700 lh-20 color-label\">\n  <ng-content></ng-content>\n</span>\n<ng-container *ngIf=\"removable\">\n  <matcha-divider direction=\"vertical\" gap=\"0\"></matcha-divider>\n  <button \n\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    <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.7", 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 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    <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.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\">\n  <matcha-divider direction=\"vertical\" gap=\"0\"></matcha-divider>\n  <button \n\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    <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 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    <matcha-icon name=\"close\" class=\"fs-14\" color=\"label\"></matcha-icon>\n  </button>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { color: [{
                 type: Input
             }], selected: [{
@@ -9797,7 +9815,11 @@ class MatchaChipListComponent {
             const selectedChangeSub = chip.selectedChange.subscribe(() => {
                 this._onChipSelectionChange(chip);
             });
-            this._chipSubscriptions.push(selectedChangeSub);
+            // Listener para remoção
+            const removedSub = chip.removed.subscribe(() => {
+                this._onChipRemoved(chip, index);
+            });
+            this._chipSubscriptions.push(selectedChangeSub, removedSub);
         });
     }
     /** Limpa as subscrições dos chips */
@@ -9821,6 +9843,10 @@ class MatchaChipListComponent {
         this._updateValue();
         this.onTouched();
     }
+    /** Manipula a remoção de um chip */
+    _onChipRemoved(chip, index) {
+        this._updateValue();
+    }
     /** Atualiza o valor baseado nos chips selecionados */
     _updateValue() {
         if (this.multiple) {