@govbr-ds/webcomponents 2.0.0-next.56 → 2.0.0-next.57

package/dist/hydrate/index.mjs

@@ -10242,7 +10242,17 @@ class Input {
         this.hasActionSlot = false;
         this.hasFeedbackSlot = false;
         this.handleInput = (event) => {
-            this.value = event.target.value;
+            var _a;
+            const inputElement = event.target;
+            let nextValue = (_a = inputElement.value) !== null && _a !== void 0 ? _a : '';
+            if (this.hasMaskConfigured()) {
+                const maskedValue = this.applyMask(nextValue);
+                if (maskedValue !== nextValue) {
+                    inputElement.value = maskedValue;
+                }
+                nextValue = maskedValue;
+            }
+            this.value = nextValue;
             this.valueChange.emit(this.value);
         };
         this.renderLabel = () => {
@@ -10295,6 +10305,7 @@ class Input {
         this.hasActionSlot = this.hasSlotContent('action');
         this.hasFeedbackSlot = this.hasSlotContent('feedback');
         this.internalState = this.state;
+        this.applyMaskToValue();
         if (this.hasFeedbackSlot) {
             this.initializeStateWithFeedback();
         }
@@ -10347,6 +10358,18 @@ class Input {
             warning: this.internalState === 'warning',
         };
     }
+    handleValueChange(newValue) {
+        if (!this.hasMaskConfigured()) {
+            return;
+        }
+        const maskedValue = this.applyMask(newValue !== null && newValue !== void 0 ? newValue : '');
+        if (maskedValue !== newValue) {
+            this.value = maskedValue;
+        }
+    }
+    handleMaskChange() {
+        this.applyMaskToValue();
+    }
     hasSlotContent(slotName) {
         return this.el.querySelector(`[slot="${slotName}"]`) !== null;
     }
@@ -10369,11 +10392,49 @@ class Input {
             return hAsync("slot", { name: "feedback" });
         }
     }
+    applyMaskToValue() {
+        if (!this.hasMaskConfigured() || this.value === undefined || this.value === null) {
+            return;
+        }
+        const maskedValue = this.applyMask(this.value);
+        if (this.value !== maskedValue) {
+            this.value = maskedValue;
+        }
+    }
+    applyMask(value) {
+        if (!this.hasMaskConfigured()) {
+            return value !== null && value !== void 0 ? value : '';
+        }
+        const digits = (value !== null && value !== void 0 ? value : '').replace(/\D/g, '');
+        if (digits.length === 0) {
+            return '';
+        }
+        let maskedValue = '';
+        let digitIndex = 0;
+        for (let i = 0; i < this.mask.length && digitIndex < digits.length; i++) {
+            const maskChar = this.mask[i];
+            if (maskChar === '#') {
+                maskedValue += digits[digitIndex];
+                digitIndex++;
+            }
+            else {
+                maskedValue += maskChar;
+            }
+        }
+        return maskedValue;
+    }
+    hasMaskConfigured() {
+        return typeof this.mask === 'string' && this.mask.length > 0;
+    }
     render() {
-        return (hAsync(Host, { key: 'b86101fdb03dd510bd6ef30656cf12139bcdfc1e' }, hAsync("div", { key: 'ca5d66789aee3feae1918e70a0c25af070cf708f', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? this.renderInlineInputContent() : this.renderInputContent(), this.renderFeedback())));
+        return (hAsync(Host, { key: '251164fce4650bd0fa1a1b9189537b11c2ebe6b6' }, hAsync("div", { key: '7b2f561f2cc1d767ba75b483e3d2b93bccd30901', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? this.renderInlineInputContent() : this.renderInputContent(), this.renderFeedback())));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "mask": ["handleMaskChange"]
+    }; }
     static get style() { return inputCss; }
     static get cmpMeta() { return {
         "$flags$": 329,
@@ -10403,6 +10464,7 @@ class Input {
             "maxlength": [514],
             "multiple": [516],
             "pattern": [513],
+            "mask": [513],
             "step": [514],
             "actionLabel": [513, "action-label"],
             "isPasswordVisible": [32],
@@ -10413,7 +10475,7 @@ class Input {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["type", "type"], ["autocomplete", "autocomplete"], ["density", "density"], ["disabled", "disabled"], ["isInline", "is-inline"], ["isHighlight", "is-highlight"], ["state", "state"], ["label", "label"], ["customId", "custom-id"], ["name", "name"], ["placeholder", "placeholder"], ["readonly", "readonly"], ["required", "required"], ["value", "value"], ["controlWidth", "control-width"], ["borderless", "borderless"], ["helpText", "help-text"], ["autocorrect", "autocorrect"], ["min", "min"], ["max", "max"], ["minlength", "minlength"], ["maxlength", "maxlength"], ["multiple", "multiple"], ["pattern", "pattern"], ["step", "step"], ["actionLabel", "action-label"]]
+        "$attrsToReflect$": [["type", "type"], ["autocomplete", "autocomplete"], ["density", "density"], ["disabled", "disabled"], ["isInline", "is-inline"], ["isHighlight", "is-highlight"], ["state", "state"], ["label", "label"], ["customId", "custom-id"], ["name", "name"], ["placeholder", "placeholder"], ["readonly", "readonly"], ["required", "required"], ["value", "value"], ["controlWidth", "control-width"], ["borderless", "borderless"], ["helpText", "help-text"], ["autocorrect", "autocorrect"], ["min", "min"], ["max", "max"], ["minlength", "minlength"], ["maxlength", "maxlength"], ["multiple", "multiple"], ["pattern", "pattern"], ["mask", "mask"], ["step", "step"], ["actionLabel", "action-label"]]
     }; }
 }
 let inputId = 0;
@@ -12568,8 +12630,12 @@ class Select {
         // Representa as opções do select disponíveis para renderização.
         // Cada opção contém `label`, `value` e o estado de seleção (`selected`).
         this.parsedOptions = [];
+        // Opções filtradas de acordo com o termo de busca digitado.
+        this.filteredOptions = [];
         // Valor exibido no input, refletindo as opções selecionadas.
         this.inputValue = '';
+        // Termo digitado no input (modo busca).
+        this.searchTerm = '';
         // Indica se todas as opções estão selecionadas. Comportamento do checkbox "Selecionar Todos".
         this.isAllSelected = false;
         // Controla se a lista de opções do select está expandida (aberta) ou colapsada (fechada).
@@ -12618,6 +12684,8 @@ class Select {
             }
             // Sanitiza as opções (remove opções inválidas, etc.)
             this.parsedOptions = parsedOptions;
+            // Atualiza lista filtrada considerando o termo atual
+            this.filteredOptions = this.getFilteredOptions(this.searchTerm);
             // Atualiza o estado do componente
             this.updateSelectedOptions();
             this.updateSelectedAllState();
@@ -12634,6 +12702,7 @@ class Select {
         this.selectedValue = newVal;
         this.updateSelectedOptions(); // mantém inputValue coeso
         this.updateSelectedAllState();
+        this.filteredOptions = this.getFilteredOptions(this.searchTerm);
     }
     componentWillLoad() {
         this.isExpanded = this.isOpen;
@@ -12736,17 +12805,23 @@ class Select {
     }
     handleSelection(index) {
         var _a, _b;
-        if (index < 0 || index >= this.parsedOptions.length) {
+        if (index < 0 || index >= this.filteredOptions.length) {
+            return;
+        }
+        // Localiza opção original a partir da lista filtrada
+        const selectedOption = this.filteredOptions[index];
+        const originalIndex = this.parsedOptions.findIndex((o) => o.value === selectedOption.value);
+        if (originalIndex === -1) {
             return;
         }
         if (this.isMultiple) {
             const updatedOptions = [...this.parsedOptions];
-            updatedOptions[index].selected = !updatedOptions[index].selected;
+            updatedOptions[originalIndex].selected = !updatedOptions[originalIndex].selected;
             this.parsedOptions = updatedOptions;
         }
         else {
             const updatedOptions = this.parsedOptions.map((option) => (Object.assign(Object.assign({}, option), { selected: false })));
-            updatedOptions[index].selected = true;
+            updatedOptions[originalIndex].selected = true;
             this.parsedOptions = updatedOptions;
             this.isExpanded = false;
         }
@@ -12759,6 +12834,7 @@ class Select {
         this.valueChange.emit(this.selectedValue);
         this.updateSelectedOptions();
         this.updateSelectedAllState();
+        this.filteredOptions = this.getFilteredOptions(this.searchTerm);
         try {
             this.elementInternals.setFormValue(JSON.stringify((_b = this.selectedValue) !== null && _b !== void 0 ? _b : []));
         }
@@ -12769,6 +12845,23 @@ class Select {
     updateSelectedOptions() {
         this.inputValue = this.getStringValue(this.parsedOptions.filter((option) => option.selected));
     }
+    normalizeText(text) {
+        return (text || '')
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .toLowerCase();
+    }
+    getFilteredOptions(term) {
+        if (!term) {
+            return this.parsedOptions;
+        }
+        const normalizedTerm = this.normalizeText(term);
+        return this.parsedOptions.filter((option) => {
+            const normalizedLabel = this.normalizeText(option.label || option.value);
+            const normalizedValue = this.normalizeText(option.value);
+            return normalizedLabel.includes(normalizedTerm) || normalizedValue.includes(normalizedTerm);
+        });
+    }
     getStringValue(options) {
         if (options.length > 0) {
             const firstSelected = options[0].label || options[0].value;
@@ -12822,13 +12915,16 @@ class Select {
         }
     }
     renderInput() {
-        return (hAsync("br-input", { exportparts: "label", value: this.inputValue, label: this.label, isInline: this.isInline, controlWidth: this.inputWidth, borderless: this.borderless, placeholder: this.placeholder, actionLabel: this.isExpanded ? 'Recolher lista de opções' : 'Exibir lista de opções', readonly: true, onClick: () => this.toggleOpen(), onKeyDown: (event) => this.handleKeydownOnInput(event) }, this.showSearchIcon && hAsync("br-icon", { slot: "icon", "icon-name": "fa-solid:search", "aria-hidden": "true" }), hAsync("br-icon", { slot: "action", "icon-name": this.isExpanded ? 'fa-solid:angle-up' : 'fa-solid:angle-down', height: "16", "aria-hidden": "true" })));
+        return (hAsync("br-input", { exportparts: "label", value: this.searchTerm || this.inputValue, label: this.label, isInline: this.isInline, controlWidth: this.inputWidth, borderless: this.borderless, placeholder: this.placeholder, actionLabel: this.isExpanded ? 'Recolher lista de opções' : 'Exibir lista de opções', readonly: false, onClick: () => this.toggleOpen(), onInput: (event) => this.handleSearchInput(event), onFocus: () => this.handleSearchFocus(), onBlur: () => this.handleSearchBlur(), onKeyDown: (event) => this.handleKeydownOnInput(event) }, this.showSearchIcon && hAsync("br-icon", { slot: "icon", "icon-name": "fa-solid:search", "aria-hidden": "true" }), hAsync("br-icon", { slot: "action", "icon-name": this.isExpanded ? 'fa-solid:angle-up' : 'fa-solid:angle-down', height: "16", "aria-hidden": "true" })));
     }
     renderSelectAllCheckbox() {
         return (hAsync("div", { class: `br-item highlighted ${this.isAllSelected ? 'selected' : ''}`, "data-all": "data-all", tabindex: "-1", role: "option", "aria-selected": this.isAllSelected, onKeyDown: (event) => this.handleSelectAllKeyDown(event), onClick: () => this.toggleSelectAll() }, hAsync("br-checkbox", { name: `checkbox-${this.customId}`, label: this.isAllSelected ? this.unselectAllLabel : this.selectAllLabel, checked: this.isAllSelected, onCheckedChange: () => this.toggleSelectAll() })));
     }
     renderOptions() {
-        return this.parsedOptions.map((option, index) => (hAsync("div", { class: `br-item ${option.selected ? 'selected' : ''}`, key: `${option.label}-${this.customId}`, role: "option", tabindex: this.focusedIndex === index ? 0 : -1, "aria-selected": option.selected, onClick: () => this.handleSelection(index), onKeyDown: (event) => this.handleKeydownOnItem(event, index) }, this.isMultiple ? (hAsync("br-checkbox", { name: `checkbox-${index}-${this.customId}`, label: option.label || option.value, checked: option.selected === true, onCheckedChange: () => this.handleSelection(index) })) : (hAsync("br-radio", { exportparts: "radio-input, radio-label", name: `radio-${index}-${this.customId}`, label: option.label || option.value, checked: option.selected === true, onCheckedChange: () => this.handleSelection(index) })))));
+        if (this.filteredOptions.length === 0) {
+            return (hAsync("div", { class: "br-item empty", role: "option", "aria-selected": "false", tabindex: -1 }, "Nenhum resultado encontrado"));
+        }
+        return this.filteredOptions.map((option, index) => (hAsync("div", { class: `br-item ${option.selected ? 'selected' : ''}`, key: `${option.label}-${this.customId}`, role: "option", tabindex: this.focusedIndex === index ? 0 : -1, "aria-selected": option.selected, onClick: () => this.handleSelection(index), onKeyDown: (event) => this.handleKeydownOnItem(event, index) }, this.isMultiple ? (hAsync("br-checkbox", { name: `checkbox-${index}-${this.customId}`, label: option.label || option.value, checked: option.selected === true, onCheckedChange: () => this.handleSelection(index) })) : (hAsync("br-radio", { exportparts: "radio-input, radio-label", name: `radio-${index}-${this.customId}`, label: option.label || option.value, checked: option.selected === true, onCheckedChange: () => this.handleSelection(index) })))));
     }
     /**
      * Determina um id para o radio.
@@ -12845,13 +12941,68 @@ class Select {
             this.isExpanded = !this.isExpanded;
         });
     }
+    /**
+     * Limpa todas as opções selecionadas.
+     */
+    clear() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const updatedOptions = this.parsedOptions.map((option) => (Object.assign(Object.assign({}, option), { selected: false })));
+            this.parsedOptions = updatedOptions;
+            const newValue = this.isMultiple ? [] : undefined;
+            this.selectedValue = newValue;
+            this.value = newValue;
+            this.updateSelectedOptions();
+            this.updateSelectedAllState();
+            this.valueChange.emit(newValue);
+            try {
+                this.elementInternals.setFormValue(JSON.stringify(newValue !== null && newValue !== void 0 ? newValue : (this.isMultiple ? [] : null)));
+            }
+            catch (_a) {
+                // Ignora erro em testes onde setFormValue não é implementado
+            }
+        });
+    }
+    /**
+     * Retorna o valor selecionado.
+     * @returns {Promise<string | string[]>} O valor atual.
+     */
+    getValue() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.value;
+        });
+    }
+    /**
+     * Define o valor do componente.
+     * @param {string | string[]} newValue O novo valor a ser definido.
+     */
+    setValue(newValue) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.value = newValue;
+            // O @Watch('value') cuidará da sincronização
+        });
+    }
     getCssClassMap() {
         return {
             'br-select': true,
         };
     }
+    handleSearchInput(event) {
+        var _a;
+        const value = (_a = event.target.value) !== null && _a !== void 0 ? _a : '';
+        this.searchTerm = value;
+        this.filteredOptions = this.getFilteredOptions(value);
+        this.isExpanded = true;
+    }
+    handleSearchFocus() {
+        this.filteredOptions = this.getFilteredOptions(this.searchTerm);
+    }
+    handleSearchBlur() {
+        // Ao sair do campo, volta a exibir o resumo das seleções
+        this.searchTerm = '';
+        this.filteredOptions = this.getFilteredOptions('');
+    }
     render() {
-        return (hAsync("div", { key: '28a2e3a517671a43786e0595dcb09d9e6176c640', class: this.getCssClassMap(), id: this.getComputedId() }, this.renderInput(), this.isExpanded && (hAsync("br-list", { key: '884049d5cfb8f4d9f3235e699a61a0b83b0dccf9', tabindex: -1, onKeyDown: (event) => this.handleKeydownOnList(event) }, this.isMultiple && this.renderSelectAllCheckbox(), this.renderOptions()))));
+        return (hAsync("div", { key: '0cc55b88b7a17c5e930f76db97f9edb7e4a2948d', class: this.getCssClassMap(), id: this.getComputedId() }, this.renderInput(), this.isExpanded && (hAsync("br-list", { key: '55af5ca9de920524dcf05091e2c9369fd199c67f', tabindex: -1, onKeyDown: (event) => this.handleKeydownOnList(event) }, this.isMultiple && this.renderSelectAllCheckbox(), this.renderOptions()))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -12876,14 +13027,19 @@ class Select {
             "inputWidth": [513, "input-width"],
             "borderless": [516],
             "customId": [513, "custom-id"],
-            "value": [1],
+            "value": [1025],
             "parsedOptions": [32],
+            "filteredOptions": [32],
             "inputValue": [32],
+            "searchTerm": [32],
             "selectedValue": [32],
             "isAllSelected": [32],
             "isExpanded": [32],
             "focusedIndex": [32],
-            "toggleOpen": [64]
+            "toggleOpen": [64],
+            "clear": [64],
+            "getValue": [64],
+            "setValue": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",

package/dist/types/components/input/input.d.ts

@@ -136,6 +136,10 @@ export declare class Input {
      * Define o padrão de entrada para validação.
      */
     readonly pattern: string;
+    /**
+     * Máscara aplicada ao valor digitado (use `#` para marcar posições numéricas).
+     */
+    readonly mask?: string;
     /**
      * Define o valor do passo para campos de entrada numéricos.
      */
@@ -159,6 +163,8 @@ export declare class Input {
      * Valor atualizado do input
      */
     valueChange: EventEmitter<string>;
+    protected handleValueChange(newValue: string): void;
+    protected handleMaskChange(): void;
     private readonly handleInput;
     private readonly renderLabel;
     private hasSlotContent;
@@ -173,5 +179,8 @@ export declare class Input {
     private readonly renderInputWithIcon;
     private readonly renderInputWithoutIcon;
     private renderFeedback;
+    private applyMaskToValue;
+    private applyMask;
+    private hasMaskConfigured;
     render(): any;
 }

package/dist/types/components/select/select.d.ts

@@ -87,7 +87,13 @@ export declare class Select {
         value: string;
         selected?: boolean;
     }[];
+    filteredOptions: {
+        label: string;
+        value: string;
+        selected?: boolean;
+    }[];
     inputValue: string;
+    searchTerm: string;
     /** Valor selecionado (string para single, string[] para multiple) */
     value?: string | string[];
     selectedValue?: string | string[];
@@ -126,6 +132,8 @@ export declare class Select {
     private closeSelect;
     private handleSelection;
     private updateSelectedOptions;
+    private normalizeText;
+    private getFilteredOptions;
     private getStringValue;
     private emitSelectedOptions;
     private updateSelectedAllState;
@@ -141,6 +149,23 @@ export declare class Select {
      * Inverte o valor da prop `isOpen`
      */
     toggleOpen(): Promise<void>;
+    /**
+     * Limpa todas as opções selecionadas.
+     */
+    clear(): Promise<void>;
+    /**
+     * Retorna o valor selecionado.
+     * @returns {Promise<string | string[]>} O valor atual.
+     */
+    getValue(): Promise<string | string[]>;
+    /**
+     * Define o valor do componente.
+     * @param {string | string[]} newValue O novo valor a ser definido.
+     */
+    setValue(newValue: string | string[]): Promise<void>;
     private getCssClassMap;
+    private handleSearchInput;
+    private handleSearchFocus;
+    private handleSearchBlur;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -748,6 +748,10 @@ export namespace Components {
           * Texto exibido como rótulo do input.
          */
         "label": string;
+        /**
+          * Máscara aplicada ao valor digitado (use `#` para marcar posições numéricas).
+         */
+        "mask"?: string;
         /**
           * Define o valor máximo para campos de entrada numéricos.
          */
@@ -1308,11 +1312,20 @@ export namespace Components {
           * @default false
          */
         "borderless": boolean;
+        /**
+          * Limpa todas as opções selecionadas.
+         */
+        "clear": () => Promise<void>;
         /**
           * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
           * @default `br-select-${selectId++}`
          */
         "customId": string;
+        /**
+          * Retorna o valor selecionado.
+          * @returns O valor atual.
+         */
+        "getValue": () => Promise<string | string[]>;
         /**
           * Largura do campo de entrada interno (por exemplo, '88px'). Quando definido, sobrescreve a largura padrão de 100% do input.
          */
@@ -1342,10 +1355,10 @@ export namespace Components {
          */
         "options": | string
     | {
-      label: string
-      value: string
-      selected?: boolean
-    }[];
+        label: string
+        value: string
+        selected?: boolean
+      }[];
         /**
           * Texto auxiliar exibido antes de uma seleção.
           * @default ''
@@ -1356,6 +1369,11 @@ export namespace Components {
           * @default 'Selecionar todos'
          */
         "selectAllLabel": string;
+        /**
+          * Define o valor do componente.
+          * @param newValue O novo valor a ser definido.
+         */
+        "setValue": (newValue: string | string[]) => Promise<void>;
         /**
           * Exibe o ícone de busca no campo de entrada.
           * @default false
@@ -3565,6 +3583,10 @@ declare namespace LocalJSX {
           * Texto exibido como rótulo do input.
          */
         "label"?: string;
+        /**
+          * Máscara aplicada ao valor digitado (use `#` para marcar posições numéricas).
+         */
+        "mask"?: string;
         /**
           * Define o valor máximo para campos de entrada numéricos.
          */
@@ -4171,10 +4193,10 @@ declare namespace LocalJSX {
          */
         "options"?: | string
     | {
-      label: string
-      value: string
-      selected?: boolean
-    }[];
+        label: string
+        value: string
+        selected?: boolean
+      }[];
         /**
           * Texto auxiliar exibido antes de uma seleção.
           * @default ''