@praxisui/table 8.0.0-beta.30 → 8.0.0-beta.32

package/README.md

@@ -168,10 +168,21 @@ Filtro runtime:
 - The table assistant is part of the global Praxis semantic copilot experience, not a standalone table patch bot.
 - In customization mode, opening the assistant registers a `PraxisAssistantContextSnapshot` through `PraxisAssistantSessionRegistryService`.
 - The table session identity follows `table:{routeKey}:{componentInstanceId || tableId}` so multiple tables on the same page can preserve separate assistant sessions.
-- Minimizing the table shell keeps a global minimized session that the App Shell can reopen; the App Shell does not interpret or execute table semantics.
+- Minimizing the table shell keeps the governed session in `PraxisAssistantSessionRegistryService` with `presence: 'origin-anchor'`; the visual affordance returns to the table assistant trigger, which changes to the minimized state and reopens the preserved session. The App Shell does not interpret or execute table semantics.
 - The table snapshot stores only safe context: table identity, target, context chips, manifest reference, resource path, schema field names, data/runtime digests, capability refs and governance hints.
 - Prompts that indicate shared business decisions, such as rules, policies, compliance, LGPD, approval, eligibility or access control, must be routed to governed `domain-rules` handoff instead of local table config patches.
 
+### Consultative answers vs governed edits
+
+`@praxisui/table` declares two component-level response modes through its authoring context:
+
+- `consult/answer`: use when the user asks a factual or how-to question about the current table. Examples: "qual endpoint esta servindo esta tabela?", "quais campos existem nesta tabela?", "quais recursos de estilização a tabela suporta?" and "como criar uma coluna que soma duas colunas?".
+- `edit/componentEditPlan`: use when the user asks to apply or materialize a change. Examples: "mostre ativo como badge verde", "crie uma coluna bonus com 10% do salario", "deixe o avatar vermelho quando salario for maior que 30000" and "anime as linhas com salario acima de 30000".
+
+Consultative answers are selected by the backend/LLM from the component `responseModes` contract and return `type: "info"`. The table runtime must not classify user intent through local keywords; it only sends grounded context such as `resourcePath`, schema fields and the table authoring manifest, then renders the orchestrator response without an apply action. For how-to or documentation-style turns, the orchestrator should explain the governed operation shape and give a safe example instead of collecting missing edit parameters.
+
+Governed edits must be selected by the same backend/LLM response-mode decision and produce a validated `componentEditPlan`; the table compiles that plan into a patch and only then exposes the review/apply step.
+
 ## Migration Note
 
 - This release treats `enableCustomization=false` as the canonical default.
@@ -295,6 +306,29 @@ animacao. `rowConditionalRenderers` fica tipado no contrato publico para tooltip
 e animacao de linha, preservando os campos planos `tooltip`/`animation` como
 fallback.
 
+Animações condicionais devem ser authoradas como decisão semântica, não como CSS
+manual em `style.animation`. Para animar a linha inteira, use
+`rowConditionalRenderers[].animation`; para animar somente uma célula/coluna, use
+`columns[].conditionalRenderers[].animation`. Prefira presets semânticos
+(`info-soft`, `success-confirm`, `warning-attention`, `critical-alert`,
+`audit-review`, `sync-pending` ou aliases como `pulse-soft`, `sla-breach`,
+`risk-critical`) antes de `type` bruto. Exemplo:
+
+```ts
+rowConditionalRenderers: [
+  {
+    id: 'salario-alto-pulse',
+    condition: { '>': [{ var: 'salario' }, 30000] },
+    animation: { preset: 'pulse-soft', trigger: 'onAppear', intensity: 'subtle', repeat: 'once' },
+    enabled: true,
+  },
+]
+```
+
+`appearance.animations.enabled = false` desativa animações; os flags
+`appearance.animations.specific.row` e `appearance.animations.specific.cell`
+desativam seletivamente animações condicionais de linha e célula.
+
 Colunas calculadas usam `columns[].computed.expression` como AST JSON Logic
 canonico. Regras, estilos e renderers condicionais podem referenciar esses
 valores via `computed.<field>`. Quando uma coluna calculada depende de outra
@@ -1757,9 +1791,9 @@ Deteccao:
 - somente quando `FieldDefinition.controlType === 'avatar'`
 
 Renderer aplicado:
-- `renderer: { type: 'avatar', avatar: { srcField, initialsExpr, shape: 'circle', size: 28 } }`
+- `renderer: { type: 'avatar', avatar: { srcField, initialsField: 'nomeCompleto', shape: 'circle', size: 32 } }`
 - alinhamento central e largura compacta (~56px)
-- `initialsExpr` com fallback para `nomeCompleto|nome|fullName|name|title`
+- `initialsField` deriva as iniciais a partir de um campo textual bruto
 
 Avatar explicito:
 - `renderer: { type: 'avatar', avatar: { srcField, initialsExpr, initialsField, shape: 'circle', size: 28 } }`
@@ -1767,7 +1801,7 @@ Avatar explicito:
 - `initialsExpr` deve retornar as iniciais prontas; ele nao transforma automaticamente um campo bruto em iniciais
 - quando quiser derivar iniciais a partir de um campo textual, prefira `initialsField`
 - exemplo recomendado: `avatar: { srcField: 'photoUrl', initialsField: 'name' }`
-- exemplo de `initialsExpr` explicito: `avatar: { initialsExpr: \"= (row.name || '').trim().split(/\\s+/).slice(0,2).map(p => p[0] || '').join('').toUpperCase()\" }`
+- exemplo de `initialsExpr` explicito: `avatar: { initialsExpr: 'initials' }`
 
 Comportamento importante:
 - a autodeteccao ocorre apenas no bootstrap (nao sobrescreve configuracoes de colunas persistidas)
@@ -1777,8 +1811,11 @@ Comportamento importante:
 Ajustes comuns:
 - `renderer.avatar.shape`: `'square' | 'rounded' | 'circle'`
 - `renderer.avatar.size`: numero em px
+- `renderer.avatar.backgroundColor`: cor de fundo do circulo
+- `renderer.avatar.textColor`: cor das iniciais
 - `renderer.avatar.alt` / `altField`
 - use `conditionalRenderers` para variar renderer por linha
+- exemplo condicional: `condition: { ">": [{ "var": "salario" }, 30000] }` com `avatar: { initialsField: 'name', backgroundColor: '#D32F2F', textColor: '#FFFFFF' }`
 
 A11y, seguranca e performance:
 - `alt`/`altField` sao respeitados

package/fesm2022/praxisui-table-filter-form-dialog-host.component-DbwGIMjF.mjs

@@ -0,0 +1,232 @@
+import * as i0 from '@angular/core';
+import { Inject, Component } from '@angular/core';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i14 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i10 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { PraxisFilterForm } from '@praxisui/dynamic-form';
+
+class FilterFormDialogHostComponent {
+    data;
+    ref;
+    valid = true;
+    ready = false;
+    lastValue = {};
+    formGroup = null;
+    canSave = false;
+    saving = false;
+    constructor(data, ref) {
+        this.data = data;
+        this.ref = ref;
+    }
+    onReady(ev) {
+        try {
+            this.formGroup = ev?.formGroup || null;
+            const dto = this.data?.initialDto || {};
+            if (ev?.formGroup && dto && Object.keys(dto).length) {
+                ev.formGroup.patchValue(dto, { emitEvent: false });
+            }
+            this.lastValue = this.formGroup?.getRawValue?.() ?? this.lastValue;
+        }
+        catch { }
+        this.ready = true;
+        this.updateCanSave();
+    }
+    onChange(ev) {
+        this.lastValue = ev?.formData ?? {};
+        this.updateCanSave();
+    }
+    onValidity(v) {
+        this.valid = v;
+        this.updateCanSave();
+    }
+    apply() {
+        const formData = this.formGroup?.getRawValue?.() ??
+            this.lastValue ??
+            this.data?.initialDto ??
+            {};
+        this.ref.close({ formData });
+    }
+    close() { this.ref.close(); }
+    clean(obj) {
+        const out = {};
+        Object.keys(obj || {}).forEach((k) => {
+            const v = obj[k];
+            if (v !== '' && v !== null && v !== undefined)
+                out[k] = v;
+        });
+        return out;
+    }
+    buildDtoForSave() {
+        const base = this.data?.initialDto || {};
+        const current = this.formGroup?.getRawValue?.() ?? this.lastValue ?? {};
+        const merged = { ...base, ...current };
+        return this.clean(merged);
+    }
+    updateCanSave() {
+        this.canSave =
+            this.ready &&
+                this.valid &&
+                Object.keys(this.buildDtoForSave() || {}).length > 0;
+    }
+    saveShortcutTooltip() {
+        if (this.saving) {
+            return this.data.i18n?.shortcutSaving || 'Salvando atalho...';
+        }
+        if (!this.valid) {
+            return this.data.i18n?.shortcutInvalid || 'Corrija os filtros antes de salvar o atalho.';
+        }
+        if (!Object.keys(this.buildDtoForSave() || {}).length) {
+            return this.data.i18n?.shortcutRequiresFilter || 'Preencha ao menos um filtro para salvar um atalho.';
+        }
+        return '';
+    }
+    saveShortcut() {
+        if (!this.canSave || this.saving)
+            return;
+        const dto = this.buildDtoForSave();
+        if (!Object.keys(dto).length)
+            return;
+        this.saving = true;
+        try {
+            this.data?.onSaveShortcut?.(dto);
+        }
+        finally {
+            this.saving = false;
+            this.updateCanSave();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FilterFormDialogHostComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: FilterFormDialogHostComponent, isStandalone: true, selector: "praxis-filter-form-dialog-host", ngImport: i0, template: `
+    <div mat-dialog-title class="pfx-dialog-title" id="filterDialogTitle">
+      <div class="pfx-dialog-title-text">
+        <mat-icon>tune</mat-icon>
+        <span>{{ data.title || 'Filtro avançado' }}</span>
+      </div>
+      <button mat-icon-button type="button" class="pfx-dialog-close" (click)="close()"
+        [attr.aria-label]="data.i18n?.cancel || 'Fechar'">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+    <mat-dialog-content class="pfx-filter-dialog-content" aria-labelledby="filterDialogTitle">
+      @if (data?.schemaLoading) {
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      }
+      @if (data?.config && !ready) {
+        <div
+          class="pfx-dialog-loading"
+          role="status"
+          aria-live="polite"
+          >
+          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+          <span>{{ data.i18n?.opening || 'Carregando filtros...' }}</span>
+        </div>
+      }
+      @if (data?.config) {
+        <praxis-filter-form
+          [class.pfx-form-pending]="!ready"
+          [formId]="data.formId"
+          [resourcePath]="data.resourcePath"
+          [mode]="'edit'"
+          [config]="data.config"
+          (formReady)="onReady($event)"
+          (valueChange)="onChange($event)"
+          (validityChange)="onValidity($event)"
+        ></praxis-filter-form>
+      }
+      @if (!data?.config && !data?.schemaLoading) {
+        <p class="pfx-empty-state">{{ data.i18n?.noData || 'Nenhum dado' }}</p>
+      }
+    </mat-dialog-content>
+    <mat-dialog-actions align="end" class="pfx-dialog-actions">
+      @if (data?.allowSaveTags) {
+        <button mat-stroked-button type="button"
+          class="pfx-save-shortcut-button"
+          [disabled]="!canSave || saving"
+          [matTooltip]="saveShortcutTooltip()"
+          [matTooltipDisabled]="canSave && !saving"
+          (click)="saveShortcut()">
+          <mat-icon aria-hidden="true">{{ saving ? 'hourglass_empty' : 'bookmark_add' }}</mat-icon>
+          {{ data.i18n?.saveAsShortcut || 'Salvar como atalho' }}
+        </button>
+      }
+      <button mat-stroked-button type="button" (click)="close()">{{ data.i18n?.cancel || 'Cancelar' }}</button>
+      <button mat-flat-button color="primary" (click)="apply()" [disabled]="!valid">
+        {{ data.i18n?.apply || 'Aplicar' }}
+      </button>
+    </mat-dialog-actions>
+    `, isInline: true, styles: [".pfx-dialog-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:8px}.pfx-dialog-title-text{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--mdc-dialog-subhead-color, var(--md-sys-color-on-surface))}.pfx-dialog-close{margin-left:auto}.pfx-filter-dialog-content{display:flex;flex-direction:column;gap:12px;padding-top:8px}.pfx-empty-state{margin:8px 0 0;color:var(--mdc-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant))}.pfx-dialog-loading{display:flex;flex-direction:column;gap:10px;min-height:128px;justify-content:center;color:var(--mdc-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant));font-size:.875rem}.pfx-form-pending{height:0;overflow:hidden;visibility:hidden;pointer-events:none}.pfx-dialog-actions{padding:var(--pdx-dialog-actions-padding, 12px 24px 16px);border-top:1px solid var(--md-sys-color-outline-variant);background:transparent;display:flex;align-items:center;gap:8px}.pfx-save-shortcut-button{margin-right:auto}.pfx-save-shortcut-button mat-icon{margin-right:6px;width:18px;height:18px;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i14.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisFilterForm, selector: "praxis-filter-form", inputs: ["config", "formId", "resourcePath", "mode"], outputs: ["formReady", "valueChange", "submit", "requestSearch", "validityChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FilterFormDialogHostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-filter-form-dialog-host', standalone: true, imports: [MatDialogModule, MatButtonModule, MatProgressBarModule, MatIconModule, MatTooltipModule, PraxisFilterForm], template: `
+    <div mat-dialog-title class="pfx-dialog-title" id="filterDialogTitle">
+      <div class="pfx-dialog-title-text">
+        <mat-icon>tune</mat-icon>
+        <span>{{ data.title || 'Filtro avançado' }}</span>
+      </div>
+      <button mat-icon-button type="button" class="pfx-dialog-close" (click)="close()"
+        [attr.aria-label]="data.i18n?.cancel || 'Fechar'">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+    <mat-dialog-content class="pfx-filter-dialog-content" aria-labelledby="filterDialogTitle">
+      @if (data?.schemaLoading) {
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      }
+      @if (data?.config && !ready) {
+        <div
+          class="pfx-dialog-loading"
+          role="status"
+          aria-live="polite"
+          >
+          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+          <span>{{ data.i18n?.opening || 'Carregando filtros...' }}</span>
+        </div>
+      }
+      @if (data?.config) {
+        <praxis-filter-form
+          [class.pfx-form-pending]="!ready"
+          [formId]="data.formId"
+          [resourcePath]="data.resourcePath"
+          [mode]="'edit'"
+          [config]="data.config"
+          (formReady)="onReady($event)"
+          (valueChange)="onChange($event)"
+          (validityChange)="onValidity($event)"
+        ></praxis-filter-form>
+      }
+      @if (!data?.config && !data?.schemaLoading) {
+        <p class="pfx-empty-state">{{ data.i18n?.noData || 'Nenhum dado' }}</p>
+      }
+    </mat-dialog-content>
+    <mat-dialog-actions align="end" class="pfx-dialog-actions">
+      @if (data?.allowSaveTags) {
+        <button mat-stroked-button type="button"
+          class="pfx-save-shortcut-button"
+          [disabled]="!canSave || saving"
+          [matTooltip]="saveShortcutTooltip()"
+          [matTooltipDisabled]="canSave && !saving"
+          (click)="saveShortcut()">
+          <mat-icon aria-hidden="true">{{ saving ? 'hourglass_empty' : 'bookmark_add' }}</mat-icon>
+          {{ data.i18n?.saveAsShortcut || 'Salvar como atalho' }}
+        </button>
+      }
+      <button mat-stroked-button type="button" (click)="close()">{{ data.i18n?.cancel || 'Cancelar' }}</button>
+      <button mat-flat-button color="primary" (click)="apply()" [disabled]="!valid">
+        {{ data.i18n?.apply || 'Aplicar' }}
+      </button>
+    </mat-dialog-actions>
+    `, styles: [".pfx-dialog-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:8px}.pfx-dialog-title-text{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--mdc-dialog-subhead-color, var(--md-sys-color-on-surface))}.pfx-dialog-close{margin-left:auto}.pfx-filter-dialog-content{display:flex;flex-direction:column;gap:12px;padding-top:8px}.pfx-empty-state{margin:8px 0 0;color:var(--mdc-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant))}.pfx-dialog-loading{display:flex;flex-direction:column;gap:10px;min-height:128px;justify-content:center;color:var(--mdc-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant));font-size:.875rem}.pfx-form-pending{height:0;overflow:hidden;visibility:hidden;pointer-events:none}.pfx-dialog-actions{padding:var(--pdx-dialog-actions-padding, 12px 24px 16px);border-top:1px solid var(--md-sys-color-outline-variant);background:transparent;display:flex;align-items:center;gap:8px}.pfx-save-shortcut-button{margin-right:auto}.pfx-save-shortcut-button mat-icon{margin-right:6px;width:18px;height:18px;font-size:18px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }] });
+
+export { FilterFormDialogHostComponent };