matcha-components 20.66.0 → 20.67.0

package/fesm2022/matcha-components.mjs

@@ -9640,6 +9640,8 @@ class MatchaChipComponent {
         /** Se o chip pode ser removido */
         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 */
@@ -9654,8 +9656,12 @@ class MatchaChipComponent {
         // 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')) {
+            // 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) {
                     this.remove();
                 }
@@ -9717,11 +9723,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 && !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"] }] }); }
+    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    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.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    <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    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: [{
                 type: Input
             }], selected: [{
@@ -9762,6 +9768,8 @@ class MatchaChipListComponent {
         this.orientation = 'horizontal';
         /** Evento emitido quando a seleção muda */
         this.change = new EventEmitter();
+        /** Evento emitido quando um chip é removido */
+        this.removed = new EventEmitter();
         this.chipListClass = true;
         this.role = 'listbox';
         this._chipSubscriptions = [];
@@ -9815,7 +9823,11 @@ class MatchaChipListComponent {
             const selectedChangeSub = chip.selectedChange.subscribe(() => {
                 this._onChipSelectionChange(chip);
             });
-            this._chipSubscriptions.push(selectedChangeSub);
+            // Listener para remoção de chips
+            const removedSub = chip.removed.subscribe(() => {
+                this._onChipRemoved(chip);
+            });
+            this._chipSubscriptions.push(selectedChangeSub, removedSub);
         });
     }
     /** Limpa as subscrições dos chips */
@@ -9839,6 +9851,20 @@ class MatchaChipListComponent {
         this._updateValue();
         this.onTouched();
     }
+    /** Manipula remoção de um chip */
+    _onChipRemoved(chip) {
+        if (this.disabled) {
+            return;
+        }
+        // Remove o chip da seleção se estiver selecionado
+        if (chip.selected) {
+            chip.selected = false;
+            this._updateValue();
+        }
+        // Emite o evento de remoção
+        this.removed.emit(chip);
+        this.onTouched();
+    }
     /** Atualiza o valor baseado nos chips selecionados */
     _updateValue() {
         if (this.multiple) {
@@ -9950,7 +9976,7 @@ class MatchaChipListComponent {
         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.ɵ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" }, 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: [
+    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,
                 useExisting: forwardRef(() => MatchaChipListComponent),
@@ -9979,6 +10005,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                 type: Input
             }], change: [{
                 type: Output
+            }], removed: [{
+                type: Output
             }], chips: [{
                 type: ContentChildren,
                 args: [MatchaChipComponent, { descendants: true }]
@@ -12059,7 +12087,8 @@ class MatchaComponentsModule {
             MatchaPageLayoutModule,
             MatchaDrawerModule,
             MatchaHighlightModule,
-            MatchaMaskModule], exports: [MatchaAccordionModule,
+            MatchaMaskModule,
+            MatchaChipModule], exports: [MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaOptionModule,
             MatchaPanelModule,
@@ -12137,7 +12166,8 @@ class MatchaComponentsModule {
             MatchaPageLayoutModule,
             MatchaDrawerModule,
             MatchaHighlightModule,
-            MatchaMaskModule, MatchaAccordionModule,
+            MatchaMaskModule,
+            MatchaChipModule, MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaOptionModule,
             MatchaPanelModule,
@@ -12221,7 +12251,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatchaPageLayoutModule,
                         MatchaDrawerModule,
                         MatchaHighlightModule,
-                        MatchaMaskModule
+                        MatchaMaskModule,
+                        MatchaChipModule
                     ],
                     exports: [MatchaAccordionModule,
                         MatchaAutocompleteModule,