@vipsolucoes/dynamic-form 1.0.7 → 1.0.9

package/README.md

@@ -137,6 +137,8 @@ A biblioteca suporta os seguintes tipos de campos:
 
 ### Campo Select
 
+#### Formato Padrão (Dados Fixos)
+
 ```typescript
 {
   key: 'pais',
@@ -152,6 +154,135 @@ A biblioteca suporta os seguintes tipos de campos:
 }
 ```
 
+#### Com Dados de API (Sem Mapeamento Manual)
+
+```typescript
+// Service retorna dados brutos: [{ id: 1, nome: 'São Paulo', uf: 'SP' }, ...]
+
+{
+  key: 'cidade',
+  controlType: 'select',
+  label: 'Cidade',
+  options: [],
+  optionLabel: 'nome',      // Campo do objeto para label
+  optionValue: 'id',        // Campo do objeto para value
+  optionFilter: true,       // Habilita filtro de busca
+  optionShowClear: true,    // Mostra botão limpar
+  validators: [Validators.required]
+}
+
+// No componente, passe os dados diretamente:
+this.service.loadCidades().subscribe(cidades => {
+  this.atualizarCampo('cidade', { options: cidades });
+});
+```
+
+#### Com optionMapper (Labels Compostos)
+
+```typescript
+{
+  key: 'cidade',
+  controlType: 'select',
+  label: 'Cidade',
+  options: [],
+  optionMapper: (cidade) => ({
+    label: `${cidade.nome} - ${cidade.uf}`,  // Label composto
+    value: cidade.id
+  }),
+  optionFilter: true,
+  validators: [Validators.required]
+}
+```
+
+**Propriedades Disponíveis:**
+
+- `optionLabel?`: Nome do campo para label (default: `'label'`)
+- `optionValue?`: Nome do campo para value (default: `'value'`)
+- `optionMapper?`: Função para mapear itens (tem prioridade sobre optionLabel/optionValue)
+- `optionFilter?`: Habilita filtro de busca
+- `optionShowClear?`: Mostra botão para limpar seleção
+
+### Campo Number
+
+O campo `number` suporta números inteiros, decimais e monetários com muitas opções de formatação:
+
+#### Números Inteiros (Padrão)
+
+```typescript
+{
+  key: 'quantidade',
+  controlType: 'number',
+  label: 'Quantidade',
+  validators: [Validators.required, Validators.min(1)]
+}
+```
+
+#### Campo Monetário (Currency)
+
+```typescript
+{
+  key: 'preco',
+  controlType: 'number',
+  label: 'Preço',
+  numberConfig: {
+    mode: 'currency',
+    currency: 'BRL',
+    locale: 'pt-BR',
+    minFractionDigits: 2,
+    maxFractionDigits: 2
+  },
+  validators: [Validators.required, Validators.min(0)]
+}
+```
+
+#### Campo com Prefixo/Sufixo
+
+```typescript
+{
+  key: 'desconto',
+  controlType: 'number',
+  label: 'Desconto',
+  numberConfig: {
+    prefix: '%',
+    min: 0,
+    max: 100,
+    showButtons: true
+  },
+  validators: [Validators.required, Validators.min(0), Validators.max(100)]
+}
+```
+
+#### Campo Decimal com Unidade
+
+```typescript
+{
+  key: 'peso',
+  controlType: 'number',
+  label: 'Peso',
+  numberConfig: {
+    mode: 'decimal',
+    suffix: ' kg',
+    minFractionDigits: 2,
+    maxFractionDigits: 3,
+    showClear: true
+  },
+  validators: [Validators.required, Validators.min(0)]
+}
+```
+
+**Propriedades Disponíveis em `numberConfig`:**
+
+- `mode`: `'decimal'` | `'currency'`
+- `currency`: Código da moeda (ISO 4217) - obrigatório para currency
+- `prefix`: Texto antes do valor (ex: `'R$'`, `'%'`)
+- `suffix`: Texto após o valor (ex: `' kg'`, `' m²'`)
+- `min` / `max`: Valores mínimo e máximo
+- `minFractionDigits` / `maxFractionDigits`: Casas decimais
+- `showButtons`: Exibir botões de incremento/decremento
+- `showClear`: Exibir botão para limpar valor
+- `locale`: Localização para formatação (ex: `'pt-BR'`, `'en-US'`)
+- E muitas outras opções...
+
 ### Campo DatePicker
 
 ```typescript
@@ -337,7 +468,12 @@ interface iFormConfig {
   disabled?: boolean; // Campo desabilitado
   enabledWhen?: string; // Chave do toggle que controla este campo
   styleClass?: string; // Classes CSS customizadas
-  options?: iFieldOption[]; // Opções para select (obrigatório se controlType for 'select')
+  options?: iFieldOption[] | unknown[]; // Opções para select (obrigatório se controlType for 'select')
+  optionLabel?: string; // Campo do objeto para label no select (default: 'label')
+  optionValue?: string; // Campo do objeto para value no select (default: 'value')
+  optionMapper?: (item: any) => iFieldOption; // Função para mapear itens (tem prioridade sobre optionLabel/optionValue)
+  optionFilter?: boolean; // Habilita filtro de busca no select
+  optionShowClear?: boolean; // Mostra botão para limpar seleção no select
   validators?: ValidatorFn[]; // Validadores Angular
   dateFormat?: string; // Formato da data (default: 'dd/mm/yy')
   dateViewType?: 'date' | 'month' | 'year'; // Tipo de visualização da data (default: 'date')
@@ -346,14 +482,44 @@ interface iFormConfig {
   textareaCols?: number; // Número de colunas do textarea
   toggleTrueValue?: any; // Valor quando toggle está ativo (default: true)
   toggleFalseValue?: any; // Valor quando toggle está inativo (default: false)
-  buttonConfig?: { // Configuração do botão para campos 'input-button'
+  buttonConfig?: {
+    // Configuração do botão para campos 'input-button'
     icon?: string; // Ícone do PrimeIcons
     label?: string; // Texto do botão
     tooltip?: string; // Tooltip do botão
     position?: 'left' | 'right'; // Posição do botão (default: 'right')
-    severity?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | 'contrast'; // Estilo do botão
+    severity?:
+      | 'primary'
+      | 'secondary'
+      | 'success'
+      | 'info'
+      | 'warning'
+      | 'danger'
+      | 'help'
+      | 'contrast'; // Estilo do botão
   };
   buttonCallback?: (fieldKey: string, fieldValue: any) => void | Promise<void>; // Callback executado ao clicar no botão
+  numberConfig?: {
+    // Configuração específica para campos 'number'
+    mode?: 'decimal' | 'currency';
+    currency?: string; // Código da moeda (ISO 4217)
+    currencyDisplay?: 'symbol' | 'code' | 'name';
+    minFractionDigits?: number;
+    maxFractionDigits?: number;
+    useGrouping?: boolean;
+    prefix?: string;
+    suffix?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    showButtons?: boolean;
+    buttonLayout?: 'stacked' | 'horizontal' | 'vertical';
+    showClear?: boolean;
+    locale?: string;
+    readonly?: boolean;
+    size?: 'small' | 'large';
+    variant?: 'outlined' | 'filled';
+  };
 }
 ```
 

package/fesm2022/vipsolucoes-dynamic-form.mjs

@@ -47,6 +47,8 @@ class DynamicFormErrorComponent {
         email: () => this.customMessages?.email ?? 'Por favor, insira um e-mail válido.',
         minlength: (err) => this.customMessages?.minlength?.(err.requiredLength) ?? `Mínimo de ${err.requiredLength} caracteres.`,
         maxlength: (err) => this.customMessages?.maxlength?.(err.requiredLength) ?? `Máximo de ${err.requiredLength} caracteres.`,
+        min: (err) => this.customMessages?.min?.(err.min) ?? `O valor mínimo é ${err.min}.`,
+        max: (err) => this.customMessages?.max?.(err.max) ?? `O valor máximo é ${err.max}.`,
         custom: (err) => (this.customMessages?.custom ? this.customMessages.custom(err) : err),
     };
     // Getter simples - Angular detecta mudanças automaticamente
@@ -459,22 +461,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
 class NumberInputFieldComponent {
     form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
     field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    /**
+     * Retorna a configuração numberConfig do campo, se existir.
+     */
+    numberConfig = computed(() => this.field().numberConfig, ...(ngDevMode ? [{ debugName: "numberConfig" }] : []));
+    /**
+     * Determina o modo efetivo do InputNumber.
+     * Se não houver numberConfig, retorna undefined (comportamento padrão para inteiros).
+     * Se houver numberConfig mas mode não estiver definido, retorna 'decimal'.
+     */
+    effectiveMode = computed(() => {
+        const config = this.numberConfig();
+        if (!config) {
+            return undefined; // Comportamento padrão (inteiros)
+        }
+        return config.mode ?? 'decimal';
+    }, ...(ngDevMode ? [{ debugName: "effectiveMode" }] : []));
+    /**
+     * Determina a localização efetiva.
+     * Se não especificada no numberConfig, retorna undefined (usa localização do navegador).
+     */
+    effectiveLocale = computed(() => {
+        return this.numberConfig()?.locale;
+    }, ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : []));
+    /**
+     * Determina o número mínimo de casas decimais.
+     * Para currency mode, default é 2. Para decimal mode, default é 0.
+     * Se não houver numberConfig, retorna undefined (comportamento padrão para inteiros).
+     */
+    effectiveMinFractionDigits = computed(() => {
+        const config = this.numberConfig();
+        if (!config) {
+            return undefined; // Comportamento padrão (inteiros)
+        }
+        if (config.minFractionDigits !== undefined) {
+            return config.minFractionDigits;
+        }
+        // Default baseado no mode
+        return config.mode === 'currency' ? 2 : 0;
+    }, ...(ngDevMode ? [{ debugName: "effectiveMinFractionDigits" }] : []));
+    /**
+     * Determina o número máximo de casas decimais.
+     * Para currency mode, default é 2. Para decimal mode, default é 3.
+     * Se não houver numberConfig, retorna undefined (comportamento padrão para inteiros).
+     */
+    effectiveMaxFractionDigits = computed(() => {
+        const config = this.numberConfig();
+        if (!config) {
+            return undefined; // Comportamento padrão (inteiros)
+        }
+        if (config.maxFractionDigits !== undefined) {
+            return config.maxFractionDigits;
+        }
+        // Default baseado no mode
+        return config.mode === 'currency' ? 2 : 3;
+    }, ...(ngDevMode ? [{ debugName: "effectiveMaxFractionDigits" }] : []));
+    /**
+     * Verifica se deve exibir botões de incremento/decremento.
+     */
+    hasButtons = computed(() => {
+        return this.numberConfig()?.showButtons ?? false;
+    }, ...(ngDevMode ? [{ debugName: "hasButtons" }] : []));
+    /**
+     * Verifica se deve exibir botão para limpar valor.
+     */
+    hasClearButton = computed(() => {
+        return this.numberConfig()?.showClear ?? false;
+    }, ...(ngDevMode ? [{ debugName: "hasClearButton" }] : []));
+    /**
+     * Verifica se o campo está em estado inválido.
+     */
+    isInvalid = computed(() => {
+        const control = this.form().get(this.field().key);
+        if (!control) {
+            return false;
+        }
+        return control.invalid && (control.touched || control.dirty);
+    }, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+    /**
+     * Verifica se o campo tem validação required.
+     */
+    hasRequiredValidator = computed(() => {
+        const control = this.form().get(this.field().key);
+        if (!control) {
+            return false;
+        }
+        return control.hasError('required');
+    }, ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: NumberInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: NumberInputFieldComponent, isStandalone: true, selector: "vp-number-input-field", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <div [formGroup]="form()">
       <p-iftalabel>
-        <p-inputNumber [id]="field().key" [formControlName]="field().key" [placeholder]="field().placeholder || ''" styleClass="w-full" class="w-full" />
+        <p-inputNumber
+          [inputId]="field().key"
+          [formControlName]="field().key"
+          [placeholder]="field().placeholder || ''"
+          [mode]="effectiveMode() ?? undefined"
+          [currency]="numberConfig()?.currency ?? undefined"
+          [currencyDisplay]="numberConfig()?.currencyDisplay ?? undefined"
+          [minFractionDigits]="effectiveMinFractionDigits() ?? undefined"
+          [maxFractionDigits]="effectiveMaxFractionDigits() ?? undefined"
+          [useGrouping]="numberConfig()?.useGrouping ?? true"
+          [prefix]="numberConfig()?.prefix ?? undefined"
+          [suffix]="numberConfig()?.suffix ?? undefined"
+          [min]="numberConfig()?.min ?? undefined"
+          [max]="numberConfig()?.max ?? undefined"
+          [step]="numberConfig()?.step ?? undefined"
+          [showButtons]="hasButtons()"
+          [buttonLayout]="numberConfig()?.buttonLayout ?? 'stacked'"
+          [showClear]="hasClearButton()"
+          [locale]="effectiveLocale() ?? undefined"
+          [readonly]="numberConfig()?.readonly ?? false"
+          [size]="numberConfig()?.size ?? undefined"
+          [variant]="numberConfig()?.variant ?? 'outlined'"
+          [invalid]="isInvalid()"
+          [disabled]="field().disabled ?? false"
+          [required]="hasRequiredValidator()"
+          styleClass="w-full"
+          class="w-full"
+        />
         <label [for]="field().key">{{ field().label }}</label>
       </p-iftalabel>
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%}p-iftalabel{display:block;width:100%}:host ::ng-deep p-inputNumber,:host ::ng-deep .p-inputnumber,:host ::ng-deep .p-inputnumber input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: IftaLabelModule }, { kind: "component", type: i2.IftaLabel, selector: "p-iftalabel, p-iftaLabel, p-ifta-label" }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$2.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:100%}p-iftalabel{display:block;width:100%}:host ::ng-deep p-inputNumber,:host ::ng-deep .p-inputnumber,:host ::ng-deep .p-inputnumber input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: IftaLabelModule }, { kind: "component", type: i2.IftaLabel, selector: "p-iftalabel, p-iftaLabel, p-ifta-label" }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$2.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: NumberInputFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vp-number-input-field', standalone: true, imports: [ReactiveFormsModule, IftaLabelModule, InputNumberModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div [formGroup]="form()">
       <p-iftalabel>
-        <p-inputNumber [id]="field().key" [formControlName]="field().key" [placeholder]="field().placeholder || ''" styleClass="w-full" class="w-full" />
+        <p-inputNumber
+          [inputId]="field().key"
+          [formControlName]="field().key"
+          [placeholder]="field().placeholder || ''"
+          [mode]="effectiveMode() ?? undefined"
+          [currency]="numberConfig()?.currency ?? undefined"
+          [currencyDisplay]="numberConfig()?.currencyDisplay ?? undefined"
+          [minFractionDigits]="effectiveMinFractionDigits() ?? undefined"
+          [maxFractionDigits]="effectiveMaxFractionDigits() ?? undefined"
+          [useGrouping]="numberConfig()?.useGrouping ?? true"
+          [prefix]="numberConfig()?.prefix ?? undefined"
+          [suffix]="numberConfig()?.suffix ?? undefined"
+          [min]="numberConfig()?.min ?? undefined"
+          [max]="numberConfig()?.max ?? undefined"
+          [step]="numberConfig()?.step ?? undefined"
+          [showButtons]="hasButtons()"
+          [buttonLayout]="numberConfig()?.buttonLayout ?? 'stacked'"
+          [showClear]="hasClearButton()"
+          [locale]="effectiveLocale() ?? undefined"
+          [readonly]="numberConfig()?.readonly ?? false"
+          [size]="numberConfig()?.size ?? undefined"
+          [variant]="numberConfig()?.variant ?? 'outlined'"
+          [invalid]="isInvalid()"
+          [disabled]="field().disabled ?? false"
+          [required]="hasRequiredValidator()"
+          styleClass="w-full"
+          class="w-full"
+        />
         <label [for]="field().key">{{ field().label }}</label>
       </p-iftalabel>
     </div>
@@ -523,6 +666,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
 class RadioButtonFieldComponent {
     form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
     field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    options = computed(() => {
+        return this.field().options;
+    }, ...(ngDevMode ? [{ debugName: "options" }] : []));
     layout = computed(() => {
         return this.field().radioLayout ?? 'vertical';
     }, ...(ngDevMode ? [{ debugName: "layout" }] : []));
@@ -544,7 +690,7 @@ class RadioButtonFieldComponent {
         [class.radiobutton-options-horizontal]="layout() === 'horizontal'"
         [class.radiobutton-options-vertical]="layout() === 'vertical'"
       >
-        @for (option of field().options; track option.value) {
+        @for (option of options(); track option.value) {
         <div class="radiobutton-option">
           <p-radiobutton
             [formControlName]="field().key"
@@ -577,7 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
         [class.radiobutton-options-horizontal]="layout() === 'horizontal'"
         [class.radiobutton-options-vertical]="layout() === 'vertical'"
       >
-        @for (option of field().options; track option.value) {
+        @for (option of options(); track option.value) {
         <div class="radiobutton-option">
           <p-radiobutton
             [formControlName]="field().key"
@@ -602,6 +748,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
 class SelectFieldComponent {
     form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
     field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    /**
+     * Aplica optionMapper se existir, caso contrário retorna as opções originais.
+     * Prioridade: optionMapper > optionLabel/optionValue > label/value padrão
+     */
+    mappedOptions = computed(() => {
+        const options = this.field().options ?? [];
+        const mapper = this.field().optionMapper;
+        if (mapper) {
+            return options.map(mapper);
+        }
+        return options;
+    }, ...(ngDevMode ? [{ debugName: "mappedOptions" }] : []));
+    /**
+     * Determina o optionLabel efetivo a ser usado.
+     * Se optionMapper estiver definido, usa 'label' (pois mapper já transformou).
+     * Caso contrário, usa optionLabel configurado ou 'label' como padrão.
+     */
+    effectiveOptionLabel = computed(() => {
+        if (this.field().optionMapper) {
+            return 'label';
+        }
+        return this.field().optionLabel ?? 'label';
+    }, ...(ngDevMode ? [{ debugName: "effectiveOptionLabel" }] : []));
+    /**
+     * Determina o optionValue efetivo a ser usado.
+     * Se optionMapper estiver definido, usa 'value' (pois mapper já transformou).
+     * Caso contrário, usa optionValue configurado ou 'value' como padrão.
+     */
+    effectiveOptionValue = computed(() => {
+        if (this.field().optionMapper) {
+            return 'value';
+        }
+        return this.field().optionValue ?? 'value';
+    }, ...(ngDevMode ? [{ debugName: "effectiveOptionValue" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: SelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: SelectFieldComponent, isStandalone: true, selector: "vp-select-field", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <div [formGroup]="form()">
@@ -609,11 +789,14 @@ class SelectFieldComponent {
         <p-select
           [inputId]="field().key"
           [formControlName]="field().key"
-          [options]="field().options!"
+          [options]="mappedOptions()"
           [placeholder]="field().placeholder || 'Selecione'"
-          optionLabel="label"
-          optionValue="value"
-          class="w-full" />
+          [optionLabel]="effectiveOptionLabel()"
+          [optionValue]="effectiveOptionValue()"
+          [filter]="field().optionFilter ?? false"
+          [showClear]="field().optionShowClear ?? false"
+          class="w-full"
+        />
         <label [for]="field().key">{{ field().label }}</label>
       </p-iftalabel>
     </div>
@@ -627,11 +810,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
         <p-select
           [inputId]="field().key"
           [formControlName]="field().key"
-          [options]="field().options!"
+          [options]="mappedOptions()"
           [placeholder]="field().placeholder || 'Selecione'"
-          optionLabel="label"
-          optionValue="value"
-          class="w-full" />
+          [optionLabel]="effectiveOptionLabel()"
+          [optionValue]="effectiveOptionValue()"
+          [filter]="field().optionFilter ?? false"
+          [showClear]="field().optionShowClear ?? false"
+          class="w-full"
+        />
         <label [for]="field().key">{{ field().label }}</label>
       </p-iftalabel>
     </div>