matcha-components 20.149.0 → 20.151.0

package/fesm2022/matcha-components.mjs

@@ -2206,8 +2206,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         }] });
 
 class MatchaFormFieldComponent {
-    constructor(elementRef) {
+    constructor(elementRef, cdr) {
         this.elementRef = elementRef;
+        this.cdr = cdr;
         this.color = 'grey';
         this.size = null;
         this.sizeXs = null;
@@ -2215,9 +2216,20 @@ class MatchaFormFieldComponent {
         this.sizeMd = null;
         this.sizeLg = null;
         this.sizeXl = null;
+        this.isDisabled = false;
     }
     ngAfterViewInit() {
         this.generateDataCy();
+        this.checkDisabledState();
+        this.setupDisabledObserver();
+    }
+    ngOnDestroy() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+        if (this.controlSubscription) {
+            this.controlSubscription.unsubscribe();
+        }
     }
     generateDataCy() {
         // Busca o matcha-label dentro do form-field
@@ -2245,13 +2257,94 @@ class MatchaFormFieldComponent {
     get showError() {
         return !!this.control?.invalid && !!this.control?.touched;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /**
+     * Verifica se algum input filho está disabled
+     */
+    checkDisabledState() {
+        const nativeElement = this.elementRef.nativeElement;
+        // Verificar FormControl disabled
+        if (this.control?.disabled) {
+            this.isDisabled = true;
+            this.cdr.detectChanges();
+            return;
+        }
+        // Verificar inputs nativos (input, textarea, select)
+        const nativeInputs = nativeElement.querySelectorAll('input:disabled, textarea:disabled, select:disabled');
+        if (nativeInputs.length > 0) {
+            this.isDisabled = true;
+            this.cdr.detectChanges();
+            return;
+        }
+        // Verificar componentes customizados com atributo disabled
+        const customComponentsWithAttr = nativeElement.querySelectorAll('matcha-select[disabled], matcha-autocomplete[disabled], matcha-date[disabled]');
+        if (customComponentsWithAttr.length > 0) {
+            this.isDisabled = true;
+            this.cdr.detectChanges();
+            return;
+        }
+        // Verificar componentes customizados com classe disabled
+        const disabledByClass = nativeElement.querySelectorAll('.matcha-select-disabled, .matcha-autocomplete-disabled');
+        if (disabledByClass.length > 0) {
+            this.isDisabled = true;
+            this.cdr.detectChanges();
+            return;
+        }
+        // Verificar componentes customizados através de elementos que podem ter a propriedade disabled
+        // O MutationObserver vai detectar mudanças nas classes e atributos
+        const matchaSelect = nativeElement.querySelector('matcha-select');
+        const matchaAutocomplete = nativeElement.querySelector('matcha-autocomplete');
+        if (matchaSelect) {
+            // Verificar se tem classe disabled ou atributo disabled
+            if (matchaSelect.hasAttribute('disabled') ||
+                matchaSelect.classList.contains('matcha-select-disabled')) {
+                this.isDisabled = true;
+                this.cdr.detectChanges();
+                return;
+            }
+        }
+        if (matchaAutocomplete) {
+            if (matchaAutocomplete.hasAttribute('disabled') ||
+                matchaAutocomplete.classList.contains('matcha-autocomplete-disabled')) {
+                this.isDisabled = true;
+                this.cdr.detectChanges();
+                return;
+            }
+        }
+        // Se nenhum input está disabled, atualizar estado
+        if (this.isDisabled) {
+            this.isDisabled = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Configura observadores para detectar mudanças no estado disabled
+     */
+    setupDisabledObserver() {
+        // Observar mudanças no FormControl
+        if (this.control) {
+            this.controlSubscription = this.control.statusChanges?.subscribe(() => {
+                this.checkDisabledState();
+            });
+        }
+        // Observar mudanças nos atributos e classes disabled dos elementos filhos
+        this.mutationObserver = new MutationObserver(() => {
+            this.checkDisabledState();
+        });
+        // Observar mudanças nos atributos, classes e na árvore DOM
+        this.mutationObserver.observe(this.elementRef.nativeElement, {
+            attributes: true,
+            attributeFilter: ['disabled', 'class'],
+            childList: true,
+            subtree: true
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\"\n         [class.matcha-form-field-disabled]=\"isDisabled\"\n         #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { color: [{
+            args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\"\n         [class.matcha-form-field-disabled]=\"isDisabled\"\n         #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { color: [{
                 type: Input
             }], size: [{
                 type: Input,
@@ -8951,11 +9044,11 @@ 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: "<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", 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", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-autocomplete', encapsulation: ViewEncapsulation.None, standalone: false, template: "<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" }]
+            args: [{ selector: 'matcha-autocomplete', encapsulation: ViewEncapsulation.None, standalone: false, 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" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [MatchaOptionComponent, { descendants: true }]
@@ -8991,6 +9084,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class MatchaSelectComponent {
+    /**
+     * Getter consolidado para verificar se o componente está disabled
+     * Combina o estado do @Input disabled com o estado do FormControl
+     */
+    get isCurrentlyDisabled() {
+        return this.disabled || this.isDisabledByForm;
+    }
+    /**
+     * 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.isCurrentlyDisabled;
+    }
+    /**
+     * 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.isCurrentlyDisabled ? '' : null;
+    }
     constructor(elRef, renderer, cdr) {
         this.elRef = elRef;
         this.renderer = renderer;
@@ -9012,7 +9126,7 @@ class MatchaSelectComponent {
         // ControlValueAccessor properties
         this.onChange = (value) => { };
         this.onTouched = () => { };
-        this.isDisabled = false;
+        this.isDisabledByForm = false;
     }
     ngAfterContentInit() {
         // quando options mudarem, resetamos estado relevante
@@ -9057,7 +9171,7 @@ class MatchaSelectComponent {
         if (!this.triggerElement)
             return;
         this.triggerElement.addEventListener('keydown', (event) => {
-            if (this.disabled || this.isDisabled)
+            if (this.isCurrentlyDisabled)
                 return;
             switch (event.key) {
                 case 'ArrowDown':
@@ -9143,12 +9257,15 @@ class MatchaSelectComponent {
         this.elRef.nativeElement.dispatchEvent(selectionEvent);
     }
     onTriggerClick() {
-        if (this.disabled || this.isDisabled)
+        if (this.isCurrentlyDisabled) {
+            this.ensurePanelClosed();
             return;
+        }
         this.togglePanel();
     }
     openPanel() {
-        if (this.disabled || this.isDisabled) {
+        if (this.isCurrentlyDisabled) {
+            this.ensurePanelClosed();
             return;
         }
         // Garantir que o triggerElement está configurado
@@ -9353,18 +9470,35 @@ class MatchaSelectComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /**
+     * Garante que o painel está fechado quando o componente está disabled
+     */
+    ensurePanelClosed() {
+        if (this.open) {
+            this.closePanel();
+        }
+    }
+    /**
+     * ControlValueAccessor: Define o estado disabled do FormControl
+     */
     setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
+        this.isDisabledByForm = isDisabled;
+        // Se foi desabilitado, garantir que o painel está fechado
+        if (isDisabled) {
+            this.ensurePanelClosed();
+        }
+        // Atualizar a UI
+        this.cdr.markForCheck();
         this.cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSelectComponent, 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: MatchaSelectComponent, isStandalone: false, selector: "matcha-select", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", placeholder: "placeholder", disabled: "disabled" }, outputs: { opened: "opened", closed: "closed", selectionChange: "selectionChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaSelectComponent, isStandalone: false, selector: "matcha-select", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", placeholder: "placeholder", disabled: "disabled" }, outputs: { opened: "opened", closed: "closed", selectionChange: "selectionChange" }, host: { properties: { "class.matcha-select-disabled": "this.hostDisabledClass", "attr.disabled": "this.hostDisabledAttr" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"disabled || isDisabled\">\n  <div\n    class=\"matcha-select-trigger\"\n    [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"disabled || isDisabled\"\n    (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"(disabled || isDisabled) ? -1 : 0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"disabled || isDisabled\">\n\n    <span class=\"matcha-select-value\" [class.matcha-select-placeholder]=\"!selectedValue\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      <span class=\"i-matcha-action_arrow_down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel\n    #panel\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [open]=\"open\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"isCurrentlyDisabled\">\n  <div\n    class=\"matcha-select-trigger\"\n    [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"isCurrentlyDisabled\"\n    (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n    <span class=\"matcha-select-value\" [class.matcha-select-placeholder]=\"!selectedValue\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      <span class=\"i-matcha-action_arrow_down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel\n    #panel\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [open]=\"open\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>\n", styles: [""], 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: MatchaSelectComponent, decorators: [{
             type: Component,
@@ -9374,7 +9508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             useExisting: forwardRef(() => MatchaSelectComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"disabled || isDisabled\">\n  <div\n    class=\"matcha-select-trigger\"\n    [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"disabled || isDisabled\"\n    (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"(disabled || isDisabled) ? -1 : 0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"disabled || isDisabled\">\n\n    <span class=\"matcha-select-value\" [class.matcha-select-placeholder]=\"!selectedValue\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      <span class=\"i-matcha-action_arrow_down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel\n    #panel\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [open]=\"open\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>\n" }]
+                    ], template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"isCurrentlyDisabled\">\n  <div\n    class=\"matcha-select-trigger\"\n    [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"isCurrentlyDisabled\"\n    (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n    <span class=\"matcha-select-value\" [class.matcha-select-placeholder]=\"!selectedValue\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      <span class=\"i-matcha-action_arrow_down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel\n    #panel\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [open]=\"open\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [MatchaOptionComponent, { descendants: true }]
@@ -9397,6 +9531,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Output
             }], selectionChange: [{
                 type: Output
+            }], hostDisabledClass: [{
+                type: HostBinding,
+                args: ['class.matcha-select-disabled']
+            }], hostDisabledAttr: [{
+                type: HostBinding,
+                args: ['attr.disabled']
             }] } });
 
 /**
@@ -9763,12 +9903,6 @@ class MatchaHighlightComponent {
      * On init
      */
     ngOnInit() {
-        // Debug: Verificar se Prism está carregado
-        const Prism = window.Prism;
-        console.log('Prism loaded:', typeof Prism !== 'undefined');
-        if (typeof Prism !== 'undefined') {
-            console.log('Prism languages:', Object.keys(Prism.languages));
-        }
         // Aplicar tema
         // this.applyTheme();
         // If there is no language defined, return...
@@ -9831,7 +9965,6 @@ class MatchaHighlightComponent {
                 this.loadPrismComponent('/assets/prismjs/components/prism-javascript.js');
                 this.loadPrismComponent('/assets/prismjs/components/prism-css.js');
                 this.loadPrismComponent('/assets/prismjs/components/prism-markup.js');
-                console.log('PrismJS carregado com sucesso');
                 resolve();
             };
             script.onerror = () => {
@@ -9860,9 +9993,6 @@ class MatchaHighlightComponent {
             await this.loadPrismJS();
         }
         const Prism = window.Prism;
-        console.log('Highlighting code:', sourceCode.substring(0, 50) + '...');
-        console.log('Language:', this.lang);
-        console.log('Prism available:', typeof Prism !== 'undefined');
         // Check if Prism is available
         if (typeof Prism === 'undefined') {
             console.error('Prism.js is not loaded');
@@ -9871,8 +10001,6 @@ class MatchaHighlightComponent {
         }
         // Check if the language is supported
         if (!Prism.languages[this.lang]) {
-            console.error(`Language "${this.lang}" is not supported by Prism.js`);
-            console.log('Available languages:', Object.keys(Prism.languages));
             this._elementRef.nativeElement.innerHTML = '<pre><code>' + sourceCode + '</code></pre>';
             return;
         }
@@ -9880,7 +10008,6 @@ class MatchaHighlightComponent {
         const sourceLines = sourceCode.split('\n');
         // Verificar se o array não está vazio
         if (sourceLines.length === 0) {
-            console.warn('Source code is empty');
             this._elementRef.nativeElement.innerHTML = '<pre><code></code></pre>';
             return;
         }
@@ -9897,7 +10024,6 @@ class MatchaHighlightComponent {
         // Find the first non-whitespace char index in
         // Verificar novamente se o array não está vazio após remoções
         if (sourceLines.length === 0) {
-            console.warn('Source code is empty after trimming');
             this._elementRef.nativeElement.innerHTML = '<pre><code></code></pre>';
             return;
         }
@@ -9916,10 +10042,8 @@ class MatchaHighlightComponent {
                 source = source + '\n';
             }
         });
-        console.log('Processed source:', source.substring(0, 50) + '...');
         // Generate the highlighted code
         const highlightedCode = Prism.highlight(source, Prism.languages[this.lang], this.lang);
-        console.log('Highlighted result:', highlightedCode.substring(0, 100) + '...');
         // Replace the innerHTML of the highlight-content div with the highlighted code
         const highlightContent = this._elementRef.nativeElement.querySelector('.highlight-content');
         if (highlightContent) {