@praxisui/table 8.0.0-beta.21 → 8.0.0-beta.22

package/docs/dynamic-filter-host-integration-guide.md

@@ -118,6 +118,55 @@ Essas chaves são as mais importantes na prática:
 - `allowSaveTags`: habilita tags persistidas/visíveis;
 - `changeDebounceMs`: regula a cadência de emissão de `change` e `submit`.
 
+#### Padronizar `materialDesign` dos campos de filtro
+
+O `praxis-filter` normaliza a metadata efetiva de filtros com uma politica
+visual consistente para toolbar compacta e formulario avancado. Quando o host
+fornece metadata propria ou overrides em `alwaysVisibleFieldMetadataOverrides`,
+ele deve preservar essa politica para campos com icones, prefixos, sufixos,
+datepicker toggle, simbolo de moeda, seletor de cor ou clear button.
+
+Configuracao recomendada:
+
+```ts
+const filterFieldMaterialDesign = {
+  floatLabel: 'always',
+  subscriptSizing: 'dynamic',
+} as const;
+```
+
+Exemplo de override:
+
+```ts
+advancedFilters: {
+  settings: {
+    alwaysVisibleFieldMetadataOverrides: {
+      cpf: {
+        prefixIcon: 'fingerprint',
+        materialDesign: filterFieldMaterialDesign,
+      },
+      dataNascimento: {
+        materialDesign: filterFieldMaterialDesign,
+      },
+    },
+  },
+}
+```
+
+Nao trate isso como ajuste cosmetico local. O Angular Material recomenda
+`floatLabel="always"` para campos `fill`/`outline` com prefixos/sufixos porque o
+label em repouso nao compartilha o mesmo alinhamento do valor do input. A regra
+de plataforma e aplicar essa politica na metadata efetiva de filtro antes de
+recorrer a CSS; o runtime ja faz essa normalizacao para a barra compacta e para
+o formulario avancado.
+
+Campos compostos de faixa (`priceRange`, `dateRange`, `dateTimeRange` e
+`timeRange`) devem ocupar uma linha completa no formulario avancado. Eles
+materializam mais de um controle interno e, quando competem lado a lado com um
+campo simples, perdem alinhamento vertical e tornam o hint ambíguo. O
+`praxis-filter` aplica essa classe de layout automaticamente ao montar o
+`FormConfig` avancado.
+
 ### 3. Definir política do painel avançado
 
 Os principais knobs são:

package/docs/dynamic-filter-range-filters-guide.md

@@ -103,6 +103,13 @@ O `PraxisFilter` converte `controlType` genérico em variante inline por padrão
 
 Para monetário, `priceRange` já aponta para a experiência compacta específica do filtro.
 
+### Formulario avancado
+
+No formulario avancado, ranges compostos devem ocupar a linha completa. A regra
+evita comparar verticalmente um controle com duas entradas internas contra um
+campo simples, preserva leitura de label/hint e mantem espaco suficiente para
+`Min`/`Max`, icones e sufixos.
+
 ### Filter settings
 
 `filter-settings.component.ts` participa da história porque ele controla:

package/docs/dynamic-filter-troubleshooting-guide.md

@@ -118,6 +118,43 @@ O shape enviado não respeita o contrato ou foi interpretado de maneira diferent
 
 Compare o payload com o guia de ranges antes de tentar “corrigir no controller”.
 
+## Sintoma: label conflita com icone, prefixo ou sufixo
+
+### Causa provável
+
+Campos Material `fill`/`outline` com `prefixIcon`, `suffixIcon`, `clearButton`,
+datepicker toggle, simbolo de moeda, seletor de cor ou outros
+`matPrefix`/`matSuffix` podem exibir o label em repouso sobreposto ou desalinhado.
+
+Esse comportamento vem da propria geometria do `mat-form-field`: em `fill` e
+`outline`, o label em repouso e o valor do input nao usam o mesmo alinhamento. O
+Angular Material recomenda `floatLabel="always"` nesses casos.
+
+### Onde olhar
+
+- metadata efetiva do campo no filtro avancado;
+- `alwaysVisibleFieldMetadataOverrides`;
+- politica global aplicada pelo `praxis-filter` para materializar campos de filtro;
+- `metadata.materialDesign.floatLabel`;
+- `metadata.materialDesign.subscriptSizing`.
+
+### Ação
+
+Configure a metadata do campo ou a politica global do filtro:
+
+```json
+{
+  "materialDesign": {
+    "floatLabel": "always",
+    "subscriptSizing": "dynamic"
+  }
+}
+```
+
+Nao corrija deslocando label, prefixo, sufixo ou notch por CSS local. Esse tipo
+de patch acopla o host a detalhes internos do Angular Material e tende a quebrar
+em upgrades.
+
 ## Sintoma: campo inline não aparece na barra compacta
 
 ### Causa provável

package/fesm2022/praxisui-table.mjs

@@ -5679,7 +5679,10 @@ class DataFormattingService {
                 if (value instanceof Date)
                     return value;
                 if (typeof value === 'string' || typeof value === 'number') {
-                    let date = new Date(this.normalizeNumericDateInput(value));
+                    let date = this.parseDateOnlyString(value);
+                    if (!date) {
+                        date = new Date(this.normalizeNumericDateInput(value));
+                    }
                     if (typeof value === 'string' && isNaN(date.getTime())) {
                         const parts = value.split(',');
                         if (parts.length === 3) {
@@ -5722,6 +5725,22 @@ class DataFormattingService {
                 return value;
         }
     }
+    parseDateOnlyString(value) {
+        if (typeof value !== 'string') {
+            return null;
+        }
+        const match = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(value.trim());
+        if (!match) {
+            return null;
+        }
+        const year = Number(match[1]);
+        const month = Number(match[2]) - 1;
+        const day = Number(match[3]);
+        const date = new Date(year, month, day);
+        return date.getFullYear() === year && date.getMonth() === month && date.getDate() === day
+            ? date
+            : null;
+    }
     normalizeNumericDateInput(value) {
         if (typeof value !== 'number' || !Number.isFinite(value)) {
             return value;
@@ -34636,7 +34655,7 @@ class PraxisFilter {
             const shortcuts = shouldUseInlineDateRange
                 ? (existingShortcuts.length ? existingShortcuts : [...INLINE_DATE_RANGE_CORPORATE_SHORTCUTS])
                 : meta.shortcuts;
-            return {
+            return this.withFilterMaterialDesignPolicy({
                 ...meta,
                 controlType: inlineControlType,
                 granularity: inlineControlType === INLINE_PERIOD_RANGE_CONTROL_TYPE
@@ -34651,15 +34670,10 @@ class PraxisFilter {
                 shortcuts,
                 updateOn: 'change',
                 density: 'compact',
-                materialDesign: {
-                    ...(meta.materialDesign || {}),
-                    floatLabel: 'always',
-                    subscriptSizing: 'dynamic',
-                },
-            };
+            });
         };
         const alwaysWithDensity = initialAlways
-            .map((meta) => this.mergeAlwaysVisibleMetadata(withToolbarMaterialDesign(meta), alwaysVisibleOverrides[meta.name]));
+            .map((meta) => this.withFilterMaterialDesignPolicy(this.mergeAlwaysVisibleMetadata(withToolbarMaterialDesign(meta), alwaysVisibleOverrides[meta.name])));
         const selectedWithDensity = initialSelected.map(withToolbarMaterialDesign);
         // Separar toggles (booleans simples) para a faixa de ações, se habilitado
         const isToggle = (m) => {
@@ -34744,16 +34758,9 @@ class PraxisFilter {
             .filter((m) => !this.alwaysVisibleFields?.includes(m.name))
             .filter((m) => !this.selectedFieldIds?.includes(m.name))
             .map((m) => ({ ...m, updateOn: 'change' }));
-        // Quando o painel avançado abre em modal/gaveta, habilitar touchUi nos campos de data
-        if (this.advancedOpenMode === 'modal' || this.advancedOpenMode === 'drawer') {
-            advancedMetas = advancedMetas.map((m) => {
-                const ct = m.controlType;
-                if (ct === 'date' || ct === 'dateRange' || ct === 'dateTime' || ct === 'dateTimeRange') {
-                    return { ...m, touchUi: true };
-                }
-                return m;
-            });
-        }
+        // Material's compact datepicker popup is unreliable inside the advanced dialog/drawer overlay.
+        // Use touch UI by default there, while preserving explicit metadata overrides.
+        advancedMetas = advancedMetas.map((m) => this.withAdvancedDatePickerTouchPolicy(m));
         const hasClearOverride = this.advancedClearButtonsEnabled !== undefined;
         const clearButtonsEnabled = this.advancedClearButtonsEnabled !== false;
         if (advancedMetas.length) {
@@ -34775,6 +34782,7 @@ class PraxisFilter {
                 return m;
             });
         }
+        advancedMetas = advancedMetas.map((m) => this.withFilterMaterialDesignPolicy(m));
         this.logFilterWarn('[PFILTER] applySchemaMetas: advancedMetas', {
             count: advancedMetas.length,
             names: advancedMetas.map((m) => m.name),
@@ -34787,7 +34795,7 @@ class PraxisFilter {
                         id: 'advanced',
                         rows: [
                             {
-                                columns: advancedMetas.map((m) => ({ fields: [m.name] })),
+                                columns: advancedMetas.map((m) => this.buildAdvancedFilterColumn(m)),
                             },
                         ],
                     },
@@ -34820,6 +34828,57 @@ class PraxisFilter {
             catch { }
         });
     }
+    withFilterMaterialDesignPolicy(meta) {
+        return {
+            ...meta,
+            materialDesign: {
+                ...(meta.materialDesign || {}),
+                floatLabel: 'always',
+                subscriptSizing: 'dynamic',
+            },
+        };
+    }
+    withAdvancedDatePickerTouchPolicy(meta) {
+        if (!this.isAdvancedDatePickerControl(meta)) {
+            return meta;
+        }
+        if (Object.prototype.hasOwnProperty.call(meta, 'touchUi')) {
+            return meta;
+        }
+        if (this.advancedOpenMode !== 'modal' && this.advancedOpenMode !== 'drawer') {
+            return meta;
+        }
+        return { ...meta, touchUi: true };
+    }
+    isAdvancedDatePickerControl(meta) {
+        const token = normalizeControlTypeToken(meta?.controlType || '');
+        return (token === 'date' ||
+            token === 'daterange' ||
+            token === 'datetime' ||
+            token === 'datetimerange' ||
+            token === 'materialdatepicker' ||
+            token === 'materialdaterange');
+    }
+    buildAdvancedFilterColumn(meta) {
+        const column = {
+            id: `advanced-${meta.name}`,
+            fields: [meta.name],
+        };
+        if (this.isCompositeRangeFilterField(meta)) {
+            column.className = 'filter-column--full filter-column--range';
+        }
+        return column;
+    }
+    isCompositeRangeFilterField(meta) {
+        const token = normalizeControlTypeToken(meta?.controlType || '');
+        return (token === 'pricerange' ||
+            token === 'daterange' ||
+            token === 'datetimerange' ||
+            token === 'timerange' ||
+            token === 'materialpricerange' ||
+            token === 'materialdaterange' ||
+            token === 'materialtimerange');
+    }
     pickMetasByOrder(metas, orderedNames) {
         if (!orderedNames?.length)
             return [];

package/index.d.ts

@@ -217,6 +217,7 @@ declare class DataFormattingService {
      */
     formatValue(value: any, columnType: ColumnDataType$1, formatString: string, options?: DataFormattingOptions): any;
     private coerceValueToType;
+    private parseDateOnlyString;
     private normalizeNumericDateInput;
     private formatDate;
     private formatNumber;
@@ -647,6 +648,11 @@ declare class PraxisFilter implements OnInit, OnChanges, AfterViewInit, OnDestro
     retrySchemaLoad(): void;
     private applySchemaMetas;
     private applySchemaMetasNow;
+    private withFilterMaterialDesignPolicy;
+    private withAdvancedDatePickerTouchPolicy;
+    private isAdvancedDatePickerControl;
+    private buildAdvancedFilterColumn;
+    private isCompositeRangeFilterField;
     private pickMetasByOrder;
     private hasRemoteOptionSource;
     private withInferredFilterControlType;

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@praxisui/table",
-  "version": "8.0.0-beta.21",
+  "version": "8.0.0-beta.22",
   "description": "Advanced data table for Angular (Praxis UI) with editing, filtering, sorting, virtualization, and settings panel integration.",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",
-    "@praxisui/ai": "^8.0.0-beta.21",
-    "@praxisui/core": "^8.0.0-beta.21",
-    "@praxisui/dynamic-fields": "^8.0.0-beta.21",
-    "@praxisui/dynamic-form": "^8.0.0-beta.21",
-    "@praxisui/metadata-editor": "^8.0.0-beta.21",
-    "@praxisui/rich-content": "^8.0.0-beta.21",
-    "@praxisui/settings-panel": "^8.0.0-beta.21",
-    "@praxisui/table-rule-builder": "^8.0.0-beta.21",
+    "@praxisui/ai": "^8.0.0-beta.22",
+    "@praxisui/core": "^8.0.0-beta.22",
+    "@praxisui/dynamic-fields": "^8.0.0-beta.22",
+    "@praxisui/dynamic-form": "^8.0.0-beta.22",
+    "@praxisui/metadata-editor": "^8.0.0-beta.22",
+    "@praxisui/rich-content": "^8.0.0-beta.22",
+    "@praxisui/settings-panel": "^8.0.0-beta.22",
+    "@praxisui/table-rule-builder": "^8.0.0-beta.22",
     "@angular/cdk": "^20.0.0",
     "@angular/forms": "^20.0.0",
     "@angular/material": "^20.0.0",
     "@angular/router": "^20.0.0",
-    "@praxisui/dialog": "^8.0.0-beta.21",
+    "@praxisui/dialog": "^8.0.0-beta.22",
     "rxjs": "~7.8.0"
   },
   "dependencies": {