matcha-components 20.160.0 → 20.162.0

package/fesm2022/matcha-components.mjs

@@ -372,6 +372,7 @@ class MatchaAccordionItemComponent {
         this._isOpen = false;
         this._clickableHeader = true;
         this.opened = new EventEmitter();
+        this.isOpenChange = new EventEmitter();
         this.toggleRequested = new EventEmitter();
     }
     set stretch(value) {
@@ -390,7 +391,12 @@ class MatchaAccordionItemComponent {
         return this._clickableHeader;
     }
     set isOpen(value) {
-        this._isOpen = value != null && `${value}` !== 'false';
+        const newValue = value != null && `${value}` !== 'false';
+        if (this._isOpen !== newValue) {
+            this._isOpen = newValue;
+            this.isOpenChange.emit(this._isOpen);
+            this.opened.emit(this._isOpen);
+        }
     }
     get isOpen() {
         return this._isOpen;
@@ -402,20 +408,19 @@ class MatchaAccordionItemComponent {
         this.opened.emit(this.isOpen);
     }
     ngOnChanges(changes) {
-        if (changes['isOpen']) {
-            this.opened.emit(this.isOpen);
-        }
+        // O setter já lida com a emissão de mudanças, 
+        // mas mantemos o gancho se necessário para outros inputs no futuro.
     }
     toggleAccordion() {
         // Emite evento para o accordion pai controlar o estado
         this.toggleRequested.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAccordionItemComponent, isStandalone: false, selector: "matcha-accordion-item", inputs: { stretch: "stretch", clickableHeader: "clickableHeader", isOpen: "isOpen" }, outputs: { opened: "opened", toggleRequested: "toggleRequested" }, host: { properties: { "class.stretch": "this.stretchClass", "class.is-open": "this.isOpenClass" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\"\n             [class.cursor-pointer]=\"clickableHeader\"\n             (click)=\"clickableHeader ? toggleAccordion() : null\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], animations: [...createAnimations] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAccordionItemComponent, isStandalone: false, selector: "matcha-accordion-item", inputs: { stretch: "stretch", clickableHeader: "clickableHeader", isOpen: "isOpen" }, outputs: { opened: "opened", isOpenChange: "isOpenChange", toggleRequested: "toggleRequested" }, host: { properties: { "class.stretch": "this.stretchClass", "class.is-open": "this.isOpenClass" } }, exportAs: ["matchaAccordionItem"], usesOnChanges: true, ngImport: i0, template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\"\n             [class.cursor-pointer]=\"clickableHeader\"\n             (click)=\"clickableHeader ? toggleAccordion() : null\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], animations: [...createAnimations] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-accordion-item', standalone: false, animations: [...createAnimations], template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\"\n             [class.cursor-pointer]=\"clickableHeader\"\n             (click)=\"clickableHeader ? toggleAccordion() : null\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'matcha-accordion-item', standalone: false, animations: [...createAnimations], exportAs: 'matchaAccordionItem', template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\"\n             [class.cursor-pointer]=\"clickableHeader\"\n             (click)=\"clickableHeader ? toggleAccordion() : null\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
         }], propDecorators: { stretch: [{
                 type: Input
             }], stretchClass: [{
@@ -430,6 +435,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['class.is-open']
             }], opened: [{
                 type: Output
+            }], isOpenChange: [{
+                type: Output
             }], toggleRequested: [{
                 type: Output
             }] } });
@@ -8819,6 +8826,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class MatchaAutocompleteComponent {
+    /**
+     * HostBinding para adicionar classe disabled no elemento raiz do componente
+     * Isso permite que o matcha-form-field detecte o estado disabled
+     */
+    get hostDisabledClass() {
+        return this.disabled;
+    }
+    /**
+     * HostBinding para adicionar atributo disabled no elemento raiz do componente
+     * Isso permite que o matcha-form-field detecte o estado disabled
+     */
+    get hostDisabledAttr() {
+        return this.disabled ? '' : null;
+    }
     constructor(elRef, renderer, cdr) {
         this.elRef = elRef;
         this.renderer = renderer;
@@ -8829,6 +8850,7 @@ class MatchaAutocompleteComponent {
         this.placement = 'auto';
         this.maxHeight = 280;
         this.minWidth = 160;
+        this.disabled = false;
         // Funcionalidades avançadas
         this.autoSelectOnBlur = false;
         this.displayWith = null;
@@ -8895,6 +8917,8 @@ class MatchaAutocompleteComponent {
         console.log('MatchaAutocomplete: Evento de seleção disparado', data);
     }
     openPanel() {
+        if (this.disabled)
+            return;
         if (!this.triggerElement) {
             console.log('MatchaAutocomplete: triggerElement não encontrado');
             return;
@@ -8925,6 +8949,8 @@ class MatchaAutocompleteComponent {
         this.closed.emit();
     }
     togglePanel() {
+        if (this.disabled)
+            return;
         this.open ? this.closePanel() : this.openPanel();
     }
     resetActive() {
@@ -9069,7 +9095,7 @@ class MatchaAutocompleteComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", autoSelectOnBlur: "autoSelectOnBlur", displayWith: "displayWith", displayProperty: "displayProperty", showClearButton: "showClearButton", clearButtonIcon: "clearButtonIcon", clearButtonAriaLabel: "clearButtonAriaLabel" }, outputs: { opened: "opened", closed: "closed", cleared: "cleared", autoSelected: "autoSelected" }, queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-autocomplete-container\">\n    <matcha-panel\n        #panel\n        [open]=\"open\"\n        [placement]=\"placement\"\n        [maxHeight]=\"maxHeight\"\n        [minWidth]=\"minWidth\"\n        [triggerElement]=\"triggerElement\"\n        (opened)=\"opened.emit()\"\n        (closed)=\"closed.emit()\">\n        <div class=\"matcha-panel-content flex-column\">\n            <ng-content></ng-content>\n        </div>\n    </matcha-panel>\n</div>\n", dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", disabled: "disabled", autoSelectOnBlur: "autoSelectOnBlur", displayWith: "displayWith", displayProperty: "displayProperty", showClearButton: "showClearButton", clearButtonIcon: "clearButtonIcon", clearButtonAriaLabel: "clearButtonAriaLabel" }, outputs: { opened: "opened", closed: "closed", cleared: "cleared", autoSelected: "autoSelected" }, host: { properties: { "class.matcha-autocomplete-disabled": "this.hostDisabledClass", "attr.disabled": "this.hostDisabledAttr" } }, queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-autocomplete-container\">\n    <matcha-panel\n        #panel\n        [open]=\"open\"\n        [placement]=\"placement\"\n        [maxHeight]=\"maxHeight\"\n        [minWidth]=\"minWidth\"\n        [triggerElement]=\"triggerElement\"\n        (opened)=\"opened.emit()\"\n        (closed)=\"closed.emit()\">\n        <div class=\"matcha-panel-content flex-column\">\n            <ng-content></ng-content>\n        </div>\n    </matcha-panel>\n</div>\n", dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
             type: Component,
@@ -9086,6 +9112,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], minWidth: [{
                 type: Input
+            }], disabled: [{
+                type: Input
+            }], hostDisabledClass: [{
+                type: HostBinding,
+                args: ['class.matcha-autocomplete-disabled']
+            }], hostDisabledAttr: [{
+                type: HostBinding,
+                args: ['attr.disabled']
             }], autoSelectOnBlur: [{
                 type: Input
             }], displayWith: [{
@@ -12197,6 +12231,7 @@ class MatchaAutocompleteTriggerDirective {
         this.renderer = renderer;
         this.cdr = cdr;
         this.ngControl = ngControl;
+        this.disabled = false;
         this.subs = new Subscription();
     }
     ngAfterViewInit() {
@@ -12340,6 +12375,8 @@ class MatchaAutocompleteTriggerDirective {
         this.updateClearButtonVisibility();
     }
     onClick() {
+        if (this.disabled || this.panel?.disabled || this.el.nativeElement.disabled)
+            return;
         // Abrir painel quando clicar no input
         this.panel.openPanel();
     }
@@ -12348,6 +12385,8 @@ class MatchaAutocompleteTriggerDirective {
         // O painel será aberto apenas quando o usuário clicar ou digitar
     }
     onInput(e) {
+        if (this.disabled || this.panel?.disabled || this.el.nativeElement.disabled)
+            return;
         // se o usuário digitar, apenas reabre painel. O filtro de opções geralmente é controlado pelo componente pai
         if (!this.panel.open)
             this.panel.openPanel();
@@ -12394,7 +12433,7 @@ class MatchaAutocompleteTriggerDirective {
         }
     }
     onKeydown(ev) {
-        if (!this.panel)
+        if (!this.panel || this.disabled || this.panel.disabled || this.el.nativeElement.disabled)
             return;
         switch (ev.key) {
             case 'ArrowDown':
@@ -12500,7 +12539,7 @@ class MatchaAutocompleteTriggerDirective {
         if (!this.clearButton)
             return;
         const hasSelection = this.panel.hasSelection();
-        const isDisabled = this.el.nativeElement.disabled;
+        const isDisabled = this.el.nativeElement.disabled || this.disabled || this.panel?.disabled;
         if (hasSelection && !isDisabled && this.panel.showClearButton) {
             this.renderer.setStyle(this.clearButton, 'display', 'block');
         }
@@ -12509,7 +12548,7 @@ class MatchaAutocompleteTriggerDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i2.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteTriggerDirective, isStandalone: false, selector: "[matchaAutocomplete]", inputs: { panel: ["matchaAutocomplete", "panel"] }, host: { listeners: { "click": "onClick()", "focus": "onFocus()", "input": "onInput($event)", "blur": "onBlur()", "keydown": "onKeydown($event)", "document:click": "onDocClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteTriggerDirective, isStandalone: false, selector: "[matchaAutocomplete]", inputs: { panel: ["matchaAutocomplete", "panel"], disabled: "disabled" }, host: { listeners: { "click": "onClick()", "focus": "onFocus()", "input": "onInput($event)", "blur": "onBlur()", "keydown": "onKeydown($event)", "document:click": "onDocClick($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteTriggerDirective, decorators: [{
             type: Directive,
@@ -12522,6 +12561,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }] }], propDecorators: { panel: [{
                 type: Input,
                 args: ['matchaAutocomplete']
+            }], disabled: [{
+                type: Input
             }], onClick: [{
                 type: HostListener,
                 args: ['click']