matcha-components 20.47.0 → 20.48.0

package/fesm2022/matcha-components.mjs

@@ -7867,6 +7867,10 @@ class MatchaOptionComponent {
     get nativeElement() {
         return this.elRef.nativeElement;
     }
+    // Método público para obter o texto interno da opção
+    getTextContent() {
+        return this.elRef.nativeElement.textContent?.trim() || '';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOptionComponent, deps: [{ token: MATCHA_OPTION_PARENT, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaOptionComponent, isStandalone: false, selector: "matcha-option", inputs: { value: "value", disabled: "disabled" }, outputs: { optionClick: "optionClick", optionSelect: "optionSelect" }, host: { attributes: { "role": "option", "tabindex": "0" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-selected": "this.selected" }, classAttribute: "matcha-option" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
@@ -8334,6 +8338,7 @@ class MatchaSelectComponent {
         this.cdr = cdr;
         // Armazenar o valor selecionado independente da QueryList
         this.selectedValue = undefined;
+        this.selectedLabel = '';
         // Configurações do painel
         this.placement = 'auto';
         this.maxHeight = 280;
@@ -8577,6 +8582,8 @@ class MatchaSelectComponent {
             return;
         // Atualizar o valor selecionado
         this.selectedValue = option.value;
+        // Armazenar o label (texto interno) da opção selecionada
+        this.selectedLabel = option.getTextContent();
         // Marcar a opção como selecionada
         option.selected = true;
         // Marcar todas as outras como não selecionadas
@@ -8643,6 +8650,8 @@ class MatchaSelectComponent {
         });
         // Armazenar o valor selecionado
         this.selectedValue = option.value;
+        // Armazenar o label (texto interno) da opção selecionada
+        this.selectedLabel = option.getTextContent();
         // Marcar a opção como selecionada diretamente
         option.selected = true;
         // Marcar todas as outras como não selecionadas
@@ -8680,6 +8689,10 @@ class MatchaSelectComponent {
         });
         return value;
     }
+    getSelectedLabel() {
+        // Retorna o label armazenado ou placeholder
+        return this.selectedLabel || '';
+    }
     // Método para definir valor programaticamente
     setValue(value) {
         this.selectedValue = value;
@@ -8688,12 +8701,23 @@ class MatchaSelectComponent {
     // Método para limpar seleção
     clearSelection() {
         this.selectedValue = undefined;
+        this.selectedLabel = '';
         this.options.forEach(o => o.selected = false);
         this.cdr.detectChanges();
     }
     // ControlValueAccessor implementation
     writeValue(value) {
         this.selectedValue = value;
+        // Atualizar o label quando o valor é definido programaticamente
+        if (value !== undefined && value !== null) {
+            const selectedOption = this.options?.find(o => o.value === value);
+            if (selectedOption) {
+                this.selectedLabel = selectedOption.getTextContent();
+            }
+        }
+        else {
+            this.selectedLabel = '';
+        }
         this.cdr.detectChanges();
     }
     registerOnChange(fn) {
@@ -8713,7 +8737,7 @@ class MatchaSelectComponent {
                 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      {{ selectedValue || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      \u25BC\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]=\"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-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,
@@ -8723,7 +8747,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      {{ selectedValue || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      \u25BC\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]=\"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-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 }]