@praxisui/table-rule-builder 9.0.0-beta.9 → 9.0.0-beta.90

package/fesm2022/praxisui-table-rule-builder.mjs

@@ -1,26 +1,28 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component, Injectable, EventEmitter, Output } from '@angular/core';
-import * as i3$1 from '@angular/common';
+import { Input, ChangeDetectionStrategy, Component, Injectable, EventEmitter, Output, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import * as i4$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@praxisui/core';
+import { providePraxisI18nConfig, ComponentMetadataRegistry } from '@praxisui/core';
 import { Subject } from 'rxjs';
 import { auditTime, takeUntil } from 'rxjs/operators';
-import * as i2 from '@angular/material/form-field';
+import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4$1 from '@angular/material/button';
+import * as i5$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/material/icon';
+import * as i6 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6$1 from '@angular/material/tooltip';
+import * as i7$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i7 from '@angular/material/menu';
+import * as i8 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i4 from '@angular/material/button-toggle';
+import * as i5 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i6 from '@angular/material/slider';
+import * as i7 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import { PdxColorPickerComponent } from '@praxisui/dynamic-fields';
 
@@ -234,15 +236,284 @@ const DEFAULT_EFFECT_PRESETS = {
     },
 };
 
+const PRAXIS_TABLE_RULE_BUILDER_EN_US = {
+    'panel.title': 'C. Effects',
+    'panel.subtitle': 'Configure visual styles and elements when the rule is true',
+    'tabs.estilo': 'Style',
+    'tabs.layout': 'Layout',
+    'tabs.icone': 'Icon / Badge',
+    'tabs.fundo': 'Background',
+    'tabs.animacao': 'Animation',
+    'tabs.tooltip': 'Tooltip',
+    'preview.title': 'Preview',
+    'preview.hint': 'The changes above reflect the style applied when the condition is true.',
+    'advanced.title': 'Advanced',
+    'advanced.description': 'Description',
+    'actions.apply': 'Apply',
+    'actions.reset': 'Reset',
+    'presets.label': 'Presets',
+    'presets.aprovado': 'Approved',
+    'presets.alerta': 'Warning',
+    'presets.erro': 'Error',
+    'presets.info': 'Info',
+    'tabs.ariaLabel': 'Effect categories',
+    'preview.sampleText': 'Sample cell value',
+    'advanced.cssClass': 'CSS class',
+    'advanced.inlineStyle': 'Inline style',
+    'advanced.descriptionPlaceholder': 'e.g. highlight critical result',
+    'advanced.cssClassPlaceholder': 'e.g. praxis-cell--alert',
+    'advanced.inlineStylePlaceholder': 'e.g. font-weight: 600;',
+    'style.group': 'Style editor',
+    'style.textColor': 'Text color',
+    'style.textColorAutomaticHint': 'Automatic when unchanged; the runtime derives accessible contrast for solid backgrounds.',
+    'preview.contrastUnresolved': 'Contrast is not proven in this context yet. Transparency, gradients, CSS variables, or external styles require runtime preview validation.',
+    'style.textBackgroundColor': 'Text background color',
+    'style.bold': 'Bold',
+    'style.italic': 'Italic',
+    'style.underline': 'Underline',
+    'style.transform': 'Transform',
+    'style.transformAria': 'Text transform',
+    'style.transform.none': 'None',
+    'style.transform.uppercase': 'UPPERCASE',
+    'style.transform.lowercase': 'lowercase',
+    'style.transform.capitalize': 'Capitalize',
+    'style.opacity': 'Opacity',
+    'style.size': 'Size',
+    'layout.group': 'Layout editor',
+    'layout.border': 'Border',
+    'layout.borderColor': 'Border color',
+    'layout.borderWidth': 'Width',
+    'layout.padding': 'Padding',
+    'layout.align': 'Alignment',
+    'layout.elevation': 'Elevation (shadow)',
+    'icon.group': 'Icon and badge editor',
+    'icon.label': 'Icon (mat-icon)',
+    'icon.color': 'Icon color',
+    'icon.position': 'Icon position',
+    'icon.position.before': 'Before',
+    'icon.position.after': 'After',
+    'icon.position.overlay': 'Overlay',
+    'badge.text': 'Badge text',
+    'badge.color': 'Badge color',
+    'badge.style': 'Style',
+    'badge.style.aria': 'Badge style',
+    'badge.style.solid': 'Solid',
+    'badge.style.soft': 'Soft',
+    'badge.style.outline': 'Outline',
+    'background.group': 'Background editor',
+    'background.color': 'Color',
+    'background.gradient': 'CSS gradient',
+    'background.alpha': 'Transparency',
+    'background.blur': 'Blur (px)',
+    'animation.group': 'Animation editor',
+    'animation.enabled': 'Enable animation',
+    'animation.preset': 'Preset',
+    'animation.preset.aria': 'Animation preset',
+    'animation.preset.none': 'No preset',
+    'animation.type': 'Type',
+    'animation.type.aria': 'Animation type',
+    'animation.defaultFromPreset': 'Preset default',
+    'animation.duration': 'Duration (ms)',
+    'animation.duration.placeholder': 'Preset/default',
+    'animation.delay': 'Delay (ms)',
+    'animation.delay.placeholder': 'Optional',
+    'animation.trigger': 'Trigger',
+    'animation.trigger.aria': 'Animation trigger',
+    'animation.trigger.onChange': 'On change',
+    'animation.trigger.onAppear': 'On appear',
+    'animation.trigger.onHover': 'On hover',
+    'animation.trigger.onConditionEnter': 'On condition enter',
+    'animation.trigger.onConditionExit': 'On condition exit',
+    'animation.trigger.onDataRefresh': 'On data refresh',
+    'animation.repeat': 'Repeat',
+    'animation.repeat.aria': 'Animation repeat',
+    'animation.repeat.once': 'Once',
+    'animation.repeat.loop': 'Loop',
+    'animation.repeat.infinite': 'Infinite',
+    'animation.intensity': 'Intensity',
+    'animation.intensity.aria': 'Animation intensity',
+    'animation.intensity.subtle': 'Subtle',
+    'animation.intensity.normal': 'Normal',
+    'animation.intensity.strong': 'Strong',
+    'tooltip.group': 'Tooltip editor',
+    'tooltip.text': 'Text',
+    'tooltip.text.placeholder': 'Cell details',
+    'tooltip.position': 'Position',
+    'tooltip.position.aria': 'Tooltip position',
+    'tooltip.position.top': 'Top',
+    'tooltip.position.right': 'Right',
+    'tooltip.position.bottom': 'Bottom',
+    'tooltip.position.left': 'Left',
+    'tooltip.backgroundColor': 'Background color',
+    'tooltip.delay': 'Delay (ms)',
+};
+
+const PRAXIS_TABLE_RULE_BUILDER_PT_BR = {
+    'panel.title': 'C. Efeitos',
+    'panel.subtitle': 'Configure estilos e elementos visuais quando a regra for verdadeira',
+    'tabs.estilo': 'Estilo',
+    'tabs.layout': 'Layout',
+    'tabs.icone': 'Ícone / Badge',
+    'tabs.fundo': 'Fundo',
+    'tabs.animacao': 'Animação',
+    'tabs.tooltip': 'Tooltip',
+    'preview.title': 'Pré-visualização',
+    'preview.hint': 'As mudanças acima refletem o estilo aplicado quando a condição é verdadeira.',
+    'advanced.title': 'Avançado',
+    'advanced.description': 'Descrição',
+    'actions.apply': 'Aplicar',
+    'actions.reset': 'Redefinir',
+    'presets.label': 'Presets',
+    'presets.aprovado': 'Aprovado',
+    'presets.alerta': 'Alerta',
+    'presets.erro': 'Erro',
+    'presets.info': 'Info',
+    'tabs.ariaLabel': 'Categorias de efeitos',
+    'preview.sampleText': 'Valor da célula',
+    'advanced.cssClass': 'Classe CSS',
+    'advanced.inlineStyle': 'Estilo inline',
+    'advanced.descriptionPlaceholder': 'ex.: destacar resultado crítico',
+    'advanced.cssClassPlaceholder': 'ex.: praxis-cell--alert',
+    'advanced.inlineStylePlaceholder': 'ex.: font-weight: 600;',
+    'style.group': 'Editor de estilo',
+    'style.textColor': 'Cor do texto',
+    'style.textColorAutomaticHint': 'Automática quando não alterada; o runtime deriva contraste acessível para fundos sólidos.',
+    'preview.contrastUnresolved': 'Contraste ainda não comprovado neste contexto. Transparência, gradiente, variável CSS ou estilo externo exige validação no preview do runtime.',
+    'style.textBackgroundColor': 'Cor de fundo do texto',
+    'style.bold': 'Negrito',
+    'style.italic': 'Itálico',
+    'style.underline': 'Sublinhado',
+    'style.transform': 'Transformação',
+    'style.transformAria': 'Transformação do texto',
+    'style.transform.none': 'Nenhuma',
+    'style.transform.uppercase': 'MAIÚSCULAS',
+    'style.transform.lowercase': 'minúsculas',
+    'style.transform.capitalize': 'Capitalizar',
+    'style.opacity': 'Opacidade',
+    'style.size': 'Tamanho',
+    'layout.group': 'Editor de layout',
+    'layout.border': 'Borda',
+    'layout.borderColor': 'Cor da borda',
+    'layout.borderWidth': 'Espessura',
+    'layout.padding': 'Padding',
+    'layout.align': 'Alinhamento',
+    'layout.elevation': 'Elevação (sombra)',
+    'icon.group': 'Editor de ícone e badge',
+    'icon.label': 'Ícone (mat-icon)',
+    'icon.color': 'Cor do ícone',
+    'icon.position': 'Posição do ícone',
+    'icon.position.before': 'Antes',
+    'icon.position.after': 'Depois',
+    'icon.position.overlay': 'Sobreposto',
+    'badge.text': 'Texto do badge',
+    'badge.color': 'Cor do badge',
+    'badge.style': 'Estilo',
+    'badge.style.aria': 'Estilo do badge',
+    'badge.style.solid': 'Sólido',
+    'badge.style.soft': 'Suave',
+    'badge.style.outline': 'Contorno',
+    'background.group': 'Editor de fundo',
+    'background.color': 'Cor',
+    'background.gradient': 'Gradient CSS',
+    'background.alpha': 'Transparência',
+    'background.blur': 'Desfoque (px)',
+    'animation.group': 'Editor de animação',
+    'animation.enabled': 'Ativar animação',
+    'animation.preset': 'Preset',
+    'animation.preset.aria': 'Preset de animação',
+    'animation.preset.none': 'Sem preset',
+    'animation.type': 'Tipo',
+    'animation.type.aria': 'Tipo de animação',
+    'animation.defaultFromPreset': 'Padrão do preset',
+    'animation.duration': 'Duração (ms)',
+    'animation.duration.placeholder': 'Preset/default',
+    'animation.delay': 'Delay (ms)',
+    'animation.delay.placeholder': 'Opcional',
+    'animation.trigger': 'Disparo',
+    'animation.trigger.aria': 'Disparo da animação',
+    'animation.trigger.onChange': 'Ao mudar',
+    'animation.trigger.onAppear': 'Ao aparecer',
+    'animation.trigger.onHover': 'Ao passar o mouse',
+    'animation.trigger.onConditionEnter': 'Ao entrar na condição',
+    'animation.trigger.onConditionExit': 'Ao sair da condição',
+    'animation.trigger.onDataRefresh': 'Ao atualizar dados',
+    'animation.repeat': 'Repetição',
+    'animation.repeat.aria': 'Repetição da animação',
+    'animation.repeat.once': 'Uma vez',
+    'animation.repeat.loop': 'Loop',
+    'animation.repeat.infinite': 'Infinito',
+    'animation.intensity': 'Intensidade',
+    'animation.intensity.aria': 'Intensidade da animação',
+    'animation.intensity.subtle': 'Sutil',
+    'animation.intensity.normal': 'Normal',
+    'animation.intensity.strong': 'Forte',
+    'tooltip.group': 'Editor de tooltip',
+    'tooltip.text': 'Texto',
+    'tooltip.text.placeholder': 'Detalhes da célula',
+    'tooltip.position': 'Posição',
+    'tooltip.position.aria': 'Posição do tooltip',
+    'tooltip.position.top': 'Topo',
+    'tooltip.position.right': 'Direita',
+    'tooltip.position.bottom': 'Baixo',
+    'tooltip.position.left': 'Esquerda',
+    'tooltip.backgroundColor': 'Cor do fundo',
+    'tooltip.delay': 'Delay (ms)',
+};
+
+const PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE = 'praxisTableRuleBuilder';
+const PRAXIS_TABLE_RULE_BUILDER_LABEL_KEYS = [
+    'panel.title',
+    'panel.subtitle',
+    'tabs.estilo',
+    'tabs.layout',
+    'tabs.icone',
+    'tabs.fundo',
+    'tabs.animacao',
+    'tabs.tooltip',
+    'preview.title',
+    'preview.hint',
+    'advanced.title',
+    'advanced.description',
+    'actions.apply',
+    'actions.reset',
+    'presets.label',
+    'presets.aprovado',
+    'presets.alerta',
+    'presets.erro',
+    'presets.info',
+    'tabs.ariaLabel',
+    'preview.sampleText',
+    'advanced.cssClass',
+    'advanced.inlineStyle',
+    'advanced.descriptionPlaceholder',
+    'advanced.cssClassPlaceholder',
+    'advanced.inlineStylePlaceholder',
+];
+const PRAXIS_TABLE_RULE_BUILDER_I18N_CONFIG = {
+    namespaces: {
+        [PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE]: {
+            'pt-BR': PRAXIS_TABLE_RULE_BUILDER_PT_BR,
+            'en-US': PRAXIS_TABLE_RULE_BUILDER_EN_US,
+        },
+    },
+};
+
 class EstiloEditorComponent {
+    i18n;
     group;
-    // Public for template (strictTemplates): used by mat-slider
+    constructor(i18n) {
+        this.i18n = i18n;
+    }
+    tx(key, fallback) {
+        return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
+    }
+    // Public for template (strictTemplates): used by mat-slider.
     formatOpacity(v) { return (v ?? 0).toFixed(2); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EstiloEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EstiloEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: EstiloEditorComponent, isStandalone: true, selector: "praxis-effects-estilo-editor", inputs: { group: "group" }, ngImport: i0, template: `
-    <div class="estilo-grid" role="group" aria-label="Editor de estilo" [formGroup]="group">
+    <div class="estilo-grid" role="group" [attr.aria-label]="tx('style.group', 'Editor de estilo')" [formGroup]="group">
       <pdx-color-picker
-        label="Cor do texto"
+        [label]="tx('style.textColor', 'Cor do texto')"
         formControlName="color"
         [format]="'hex'"
         [preview]="true"
@@ -251,9 +522,13 @@ class EstiloEditorComponent {
         [gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
         [popupSettings]="{ width: 340 }"
       ></pdx-color-picker>
+      <p class="accessible-surface-hint">
+        <mat-icon aria-hidden="true">contrast</mat-icon>
+        {{ tx('style.textColorAutomaticHint', 'Automática quando não alterada; o runtime deriva contraste acessível para fundos sólidos.') }}
+      </p>
 
       <pdx-color-picker
-        label="Cor de fundo do texto"
+        [label]="tx('style.textBackgroundColor', 'Cor de fundo do texto')"
         formControlName="bgColor"
         [format]="'hex'"
         [preview]="true"
@@ -265,44 +540,44 @@ class EstiloEditorComponent {
 
       <div class="toggles">
         <mat-button-toggle-group multiple>
-          <mat-button-toggle [checked]="group.get('bold')?.value" (change)="group.get('bold')?.setValue($event.source.checked)" aria-label="Negrito">
+          <mat-button-toggle [checked]="group.get('bold')?.value" (change)="group.get('bold')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.bold', 'Negrito')">
             <mat-icon>format_bold</mat-icon>
           </mat-button-toggle>
-          <mat-button-toggle [checked]="group.get('italic')?.value" (change)="group.get('italic')?.setValue($event.source.checked)" aria-label="Itálico">
+          <mat-button-toggle [checked]="group.get('italic')?.value" (change)="group.get('italic')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.italic', 'Italico')">
             <mat-icon>format_italic</mat-icon>
           </mat-button-toggle>
-          <mat-button-toggle [checked]="group.get('underline')?.value" (change)="group.get('underline')?.setValue($event.source.checked)" aria-label="Sublinhado">
+          <mat-button-toggle [checked]="group.get('underline')?.value" (change)="group.get('underline')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.underline', 'Sublinhado')">
             <mat-icon>format_underlined</mat-icon>
           </mat-button-toggle>
         </mat-button-toggle-group>
       </div>
 
       <mat-form-field appearance="outline">
-        <mat-label>Transformação</mat-label>
-        <select matNativeControl formControlName="transform" aria-label="Transformação do texto">
-          <option [ngValue]="null">Nenhuma</option>
-          <option value="uppercase">MAIÚSCULAS</option>
-          <option value="lowercase">minúsculas</option>
-          <option value="capitalize">Capitalizar</option>
+        <mat-label>{{ tx('style.transform', 'Transformacao') }}</mat-label>
+        <select matNativeControl formControlName="transform" [attr.aria-label]="tx('style.transformAria', 'Transformacao do texto')">
+          <option [ngValue]="null">{{ tx('style.transform.none', 'Nenhuma') }}</option>
+          <option value="uppercase">{{ tx('style.transform.uppercase', 'MAIUSCULAS') }}</option>
+          <option value="lowercase">{{ tx('style.transform.lowercase', 'minusculas') }}</option>
+          <option value="capitalize">{{ tx('style.transform.capitalize', 'Capitalizar') }}</option>
         </select>
       </mat-form-field>
 
       <div class="sliders">
         <label class="slider">
-          <span>Opacidade</span>
+          <span>{{ tx('style.opacity', 'Opacidade') }}</span>
           <mat-slider min="0" max="1" step="0.05" [displayWith]="formatOpacity">
             <input matSliderThumb formControlName="opacity" />
           </mat-slider>
         </label>
         <label class="slider">
-          <span>Tamanho</span>
+          <span>{{ tx('style.size', 'Tamanho') }}</span>
           <mat-slider min="-2" max="2" step="1">
             <input matSliderThumb formControlName="fontScale" />
           </mat-slider>
         </label>
       </div>
     </div>
-  `, isInline: true, styles: [".estilo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.toggles{display:flex;align-items:center;gap:8px}.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.slider{display:flex;flex-direction:column;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: PdxColorPickerComponent, selector: "pdx-color-picker", inputs: ["actionsLayout", "activeView", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "disabledMode", "readonlyMode", "visible", "presentationMode", "fillMode", "format", "gradientSettings", "icon", "iconClass", "svgIcon", "paletteSettings", "popupSettings", "preview", "rounded", "size", "tabindex", "views", "maxRecent", "showRecent"], outputs: ["valueChange", "open", "close", "cancel", "activeViewChange", "activeColorClick", "focusEvent", "blurEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".estilo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start;min-width:0}pdx-color-picker,mat-form-field{min-width:0}.accessible-surface-hint{display:flex;align-items:flex-start;gap:6px;margin:-6px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.accessible-surface-hint mat-icon{flex:0 0 auto;width:16px;height:16px;font-size:16px}.toggles{display:flex;align-items:center;gap:8px;min-width:0}.toggles mat-button-toggle-group{flex-wrap:wrap}.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;min-width:0}.slider{display:flex;flex-direction:column;gap:6px;min-width:0}.slider span{white-space:nowrap}mat-slider{width:100%;min-width:0}@media(max-width:520px){.estilo-grid,.sliders{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: PdxColorPickerComponent, selector: "pdx-color-picker", inputs: ["actionsLayout", "activeView", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "disabledMode", "readonlyMode", "visible", "presentationMode", "fillMode", "format", "gradientSettings", "icon", "iconClass", "svgIcon", "paletteSettings", "popupSettings", "preview", "rounded", "size", "tabindex", "views", "maxRecent", "showRecent"], outputs: ["valueChange", "open", "close", "cancel", "activeViewChange", "activeColorClick", "focusEvent", "blurEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EstiloEditorComponent, decorators: [{
             type: Component,
@@ -313,11 +588,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatButtonToggleModule,
                         MatIconModule,
                         MatSliderModule,
-                        PdxColorPickerComponent
+                        PdxColorPickerComponent,
                     ], template: `
-    <div class="estilo-grid" role="group" aria-label="Editor de estilo" [formGroup]="group">
+    <div class="estilo-grid" role="group" [attr.aria-label]="tx('style.group', 'Editor de estilo')" [formGroup]="group">
       <pdx-color-picker
-        label="Cor do texto"
+        [label]="tx('style.textColor', 'Cor do texto')"
         formControlName="color"
         [format]="'hex'"
         [preview]="true"
@@ -326,9 +601,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
         [popupSettings]="{ width: 340 }"
       ></pdx-color-picker>
+      <p class="accessible-surface-hint">
+        <mat-icon aria-hidden="true">contrast</mat-icon>
+        {{ tx('style.textColorAutomaticHint', 'Automática quando não alterada; o runtime deriva contraste acessível para fundos sólidos.') }}
+      </p>
 
       <pdx-color-picker
-        label="Cor de fundo do texto"
+        [label]="tx('style.textBackgroundColor', 'Cor de fundo do texto')"
         formControlName="bgColor"
         [format]="'hex'"
         [preview]="true"
@@ -340,56 +619,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 
       <div class="toggles">
         <mat-button-toggle-group multiple>
-          <mat-button-toggle [checked]="group.get('bold')?.value" (change)="group.get('bold')?.setValue($event.source.checked)" aria-label="Negrito">
+          <mat-button-toggle [checked]="group.get('bold')?.value" (change)="group.get('bold')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.bold', 'Negrito')">
             <mat-icon>format_bold</mat-icon>
           </mat-button-toggle>
-          <mat-button-toggle [checked]="group.get('italic')?.value" (change)="group.get('italic')?.setValue($event.source.checked)" aria-label="Itálico">
+          <mat-button-toggle [checked]="group.get('italic')?.value" (change)="group.get('italic')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.italic', 'Italico')">
             <mat-icon>format_italic</mat-icon>
           </mat-button-toggle>
-          <mat-button-toggle [checked]="group.get('underline')?.value" (change)="group.get('underline')?.setValue($event.source.checked)" aria-label="Sublinhado">
+          <mat-button-toggle [checked]="group.get('underline')?.value" (change)="group.get('underline')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.underline', 'Sublinhado')">
             <mat-icon>format_underlined</mat-icon>
           </mat-button-toggle>
         </mat-button-toggle-group>
       </div>
 
       <mat-form-field appearance="outline">
-        <mat-label>Transformação</mat-label>
-        <select matNativeControl formControlName="transform" aria-label="Transformação do texto">
-          <option [ngValue]="null">Nenhuma</option>
-          <option value="uppercase">MAIÚSCULAS</option>
-          <option value="lowercase">minúsculas</option>
-          <option value="capitalize">Capitalizar</option>
+        <mat-label>{{ tx('style.transform', 'Transformacao') }}</mat-label>
+        <select matNativeControl formControlName="transform" [attr.aria-label]="tx('style.transformAria', 'Transformacao do texto')">
+          <option [ngValue]="null">{{ tx('style.transform.none', 'Nenhuma') }}</option>
+          <option value="uppercase">{{ tx('style.transform.uppercase', 'MAIUSCULAS') }}</option>
+          <option value="lowercase">{{ tx('style.transform.lowercase', 'minusculas') }}</option>
+          <option value="capitalize">{{ tx('style.transform.capitalize', 'Capitalizar') }}</option>
         </select>
       </mat-form-field>
 
       <div class="sliders">
         <label class="slider">
-          <span>Opacidade</span>
+          <span>{{ tx('style.opacity', 'Opacidade') }}</span>
           <mat-slider min="0" max="1" step="0.05" [displayWith]="formatOpacity">
             <input matSliderThumb formControlName="opacity" />
           </mat-slider>
         </label>
         <label class="slider">
-          <span>Tamanho</span>
+          <span>{{ tx('style.size', 'Tamanho') }}</span>
           <mat-slider min="-2" max="2" step="1">
             <input matSliderThumb formControlName="fontScale" />
           </mat-slider>
         </label>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".estilo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.toggles{display:flex;align-items:center;gap:8px}.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.slider{display:flex;flex-direction:column;gap:6px}\n"] }]
-        }], propDecorators: { group: [{
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".estilo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start;min-width:0}pdx-color-picker,mat-form-field{min-width:0}.accessible-surface-hint{display:flex;align-items:flex-start;gap:6px;margin:-6px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.accessible-surface-hint mat-icon{flex:0 0 auto;width:16px;height:16px;font-size:16px}.toggles{display:flex;align-items:center;gap:8px;min-width:0}.toggles mat-button-toggle-group{flex-wrap:wrap}.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;min-width:0}.slider{display:flex;flex-direction:column;gap:6px;min-width:0}.slider span{white-space:nowrap}mat-slider{width:100%;min-width:0}@media(max-width:520px){.estilo-grid,.sliders{grid-template-columns:1fr}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
                 type: Input
             }] } });
 
 class LayoutEditorComponent {
+    i18n;
     group;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    constructor(i18n) {
+        this.i18n = i18n;
+    }
+    tx(key, fallback) {
+        return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: LayoutEditorComponent, isStandalone: true, selector: "praxis-effects-layout-editor", inputs: { group: "group" }, ngImport: i0, template: `
-    <div class="layout-grid" role="group" aria-label="Editor de layout" [formGroup]="group">
+    <div class="layout-grid" role="group" [attr.aria-label]="tx('layout.group', 'Editor de layout')" [formGroup]="group">
       <div class="borders">
-        <span class="lbl">Borda</span>
-        <mat-button-toggle-group [value]="group.get('border')?.value" (change)="group.get('border')?.setValue($event.value)" aria-label="Borda">
+        <span class="lbl">{{ tx('layout.border', 'Borda') }}</span>
+        <mat-button-toggle-group [value]="group.get('border')?.value" (change)="group.get('border')?.setValue($event.value)" [attr.aria-label]="tx('layout.border', 'Borda')">
           <mat-button-toggle value="none"><mat-icon>crop_free</mat-icon></mat-button-toggle>
           <mat-button-toggle value="left"><mat-icon>border_left</mat-icon></mat-button-toggle>
           <mat-button-toggle value="right"><mat-icon>border_right</mat-icon></mat-button-toggle>
@@ -400,21 +686,21 @@ class LayoutEditorComponent {
       </div>
 
       <mat-form-field appearance="outline">
-        <mat-label>Cor da borda</mat-label>
+        <mat-label>{{ tx('layout.borderColor', 'Cor da borda') }}</mat-label>
         <input matInput type="text" formControlName="borderColor" placeholder="#487BFF" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Espessura</mat-label>
+        <mat-label>{{ tx('layout.borderWidth', 'Espessura') }}</mat-label>
         <input matInput type="number" formControlName="borderWidth" placeholder="2" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Padding</mat-label>
+        <mat-label>{{ tx('layout.padding', 'Padding') }}</mat-label>
         <input matInput type="number" formControlName="padding" placeholder="6" />
       </mat-form-field>
 
       <div class="align">
-        <span class="lbl">Alinhamento</span>
-        <mat-button-toggle-group [value]="group.get('align')?.value" (change)="group.get('align')?.setValue($event.value)" aria-label="Alinhamento">
+        <span class="lbl">{{ tx('layout.align', 'Alinhamento') }}</span>
+        <mat-button-toggle-group [value]="group.get('align')?.value" (change)="group.get('align')?.setValue($event.value)" [attr.aria-label]="tx('layout.align', 'Alinhamento')">
           <mat-button-toggle value="start"><mat-icon>format_align_left</mat-icon></mat-button-toggle>
           <mat-button-toggle value="center"><mat-icon>format_align_center</mat-icon></mat-button-toggle>
           <mat-button-toggle value="end"><mat-icon>format_align_right</mat-icon></mat-button-toggle>
@@ -422,19 +708,19 @@ class LayoutEditorComponent {
       </div>
 
       <mat-form-field appearance="outline">
-        <mat-label>Elevação (sombra)</mat-label>
+        <mat-label>{{ tx('layout.elevation', 'Elevacao (sombra)') }}</mat-label>
         <input matInput type="number" formControlName="elevation" placeholder="6" />
       </mat-form-field>
     </div>
-  `, isInline: true, styles: [".layout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.borders,.align{display:flex;align-items:center;gap:8px}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".layout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center;min-width:0}mat-form-field{min-width:0}.borders,.align{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.borders mat-button-toggle-group,.align mat-button-toggle-group{flex-wrap:wrap}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-effects-layout-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatIconModule], template: `
-    <div class="layout-grid" role="group" aria-label="Editor de layout" [formGroup]="group">
+    <div class="layout-grid" role="group" [attr.aria-label]="tx('layout.group', 'Editor de layout')" [formGroup]="group">
       <div class="borders">
-        <span class="lbl">Borda</span>
-        <mat-button-toggle-group [value]="group.get('border')?.value" (change)="group.get('border')?.setValue($event.value)" aria-label="Borda">
+        <span class="lbl">{{ tx('layout.border', 'Borda') }}</span>
+        <mat-button-toggle-group [value]="group.get('border')?.value" (change)="group.get('border')?.setValue($event.value)" [attr.aria-label]="tx('layout.border', 'Borda')">
           <mat-button-toggle value="none"><mat-icon>crop_free</mat-icon></mat-button-toggle>
           <mat-button-toggle value="left"><mat-icon>border_left</mat-icon></mat-button-toggle>
           <mat-button-toggle value="right"><mat-icon>border_right</mat-icon></mat-button-toggle>
@@ -445,21 +731,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       </div>
 
       <mat-form-field appearance="outline">
-        <mat-label>Cor da borda</mat-label>
+        <mat-label>{{ tx('layout.borderColor', 'Cor da borda') }}</mat-label>
         <input matInput type="text" formControlName="borderColor" placeholder="#487BFF" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Espessura</mat-label>
+        <mat-label>{{ tx('layout.borderWidth', 'Espessura') }}</mat-label>
         <input matInput type="number" formControlName="borderWidth" placeholder="2" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Padding</mat-label>
+        <mat-label>{{ tx('layout.padding', 'Padding') }}</mat-label>
         <input matInput type="number" formControlName="padding" placeholder="6" />
       </mat-form-field>
 
       <div class="align">
-        <span class="lbl">Alinhamento</span>
-        <mat-button-toggle-group [value]="group.get('align')?.value" (change)="group.get('align')?.setValue($event.value)" aria-label="Alinhamento">
+        <span class="lbl">{{ tx('layout.align', 'Alinhamento') }}</span>
+        <mat-button-toggle-group [value]="group.get('align')?.value" (change)="group.get('align')?.setValue($event.value)" [attr.aria-label]="tx('layout.align', 'Alinhamento')">
           <mat-button-toggle value="start"><mat-icon>format_align_left</mat-icon></mat-button-toggle>
           <mat-button-toggle value="center"><mat-icon>format_align_center</mat-icon></mat-button-toggle>
           <mat-button-toggle value="end"><mat-icon>format_align_right</mat-icon></mat-button-toggle>
@@ -467,176 +753,197 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       </div>
 
       <mat-form-field appearance="outline">
-        <mat-label>Elevação (sombra)</mat-label>
+        <mat-label>{{ tx('layout.elevation', 'Elevacao (sombra)') }}</mat-label>
         <input matInput type="number" formControlName="elevation" placeholder="6" />
       </mat-form-field>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".layout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.borders,.align{display:flex;align-items:center;gap:8px}.lbl{font-size:.85rem;opacity:.8}\n"] }]
-        }], propDecorators: { group: [{
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".layout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center;min-width:0}mat-form-field{min-width:0}.borders,.align{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.borders mat-button-toggle-group,.align mat-button-toggle-group{flex-wrap:wrap}.lbl{font-size:.85rem;opacity:.8}\n"] }]
+        }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
                 type: Input
             }] } });
 
 class IconeBadgeEditorComponent {
+    i18n;
     group;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconeBadgeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    constructor(i18n) {
+        this.i18n = i18n;
+    }
+    tx(key, fallback) {
+        return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconeBadgeEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: IconeBadgeEditorComponent, isStandalone: true, selector: "praxis-effects-icone-badge-editor", inputs: { group: "group" }, ngImport: i0, template: `
-    <div class="icone-grid" role="group" aria-label="Editor de ícone e badge" [formGroup]="group">
+    <div class="icone-grid" role="group" [attr.aria-label]="tx('icon.group', 'Editor de icone e badge')" [formGroup]="group">
       <mat-form-field appearance="outline">
-        <mat-label>Ícone (mat-icon)</mat-label>
+        <mat-label>{{ tx('icon.label', 'Icone (mat-icon)') }}</mat-label>
         <input matInput type="text" formControlName="icon" placeholder="check_circle" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Cor do ícone</mat-label>
+        <mat-label>{{ tx('icon.color', 'Cor do icone') }}</mat-label>
         <input matInput type="text" formControlName="iconColor" placeholder="#35D07F" />
       </mat-form-field>
 
       <div class="pos">
-        <span class="lbl">Posição do ícone</span>
-        <mat-button-toggle-group [value]="group.get('iconPos')?.value" (change)="group.get('iconPos')?.setValue($event.value)" aria-label="Posição do ícone">
-          <mat-button-toggle value="before">Antes</mat-button-toggle>
-          <mat-button-toggle value="after">Depois</mat-button-toggle>
-          <mat-button-toggle value="overlay">Sobreposto</mat-button-toggle>
+        <span class="lbl">{{ tx('icon.position', 'Posicao do icone') }}</span>
+        <mat-button-toggle-group [value]="group.get('iconPos')?.value" (change)="group.get('iconPos')?.setValue($event.value)" [attr.aria-label]="tx('icon.position', 'Posicao do icone')">
+          <mat-button-toggle value="before">{{ tx('icon.position.before', 'Antes') }}</mat-button-toggle>
+          <mat-button-toggle value="after">{{ tx('icon.position.after', 'Depois') }}</mat-button-toggle>
+          <mat-button-toggle value="overlay">{{ tx('icon.position.overlay', 'Sobreposto') }}</mat-button-toggle>
         </mat-button-toggle-group>
       </div>
 
       <mat-form-field appearance="outline">
-        <mat-label>Texto do badge</mat-label>
+        <mat-label>{{ tx('badge.text', 'Texto do badge') }}</mat-label>
         <input matInput type="text" formControlName="badgeText" placeholder="Aprovado" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Cor do badge</mat-label>
+        <mat-label>{{ tx('badge.color', 'Cor do badge') }}</mat-label>
         <input matInput type="text" formControlName="badgeColor" placeholder="#2a8455" />
       </mat-form-field>
 
       <div class="variant">
-        <span class="lbl">Estilo</span>
-        <mat-button-toggle-group [value]="group.get('badgeStyle')?.value" (change)="group.get('badgeStyle')?.setValue($event.value)" aria-label="Estilo do badge">
-          <mat-button-toggle value="solid">Sólido</mat-button-toggle>
-          <mat-button-toggle value="soft">Suave</mat-button-toggle>
-          <mat-button-toggle value="outline">Contorno</mat-button-toggle>
+        <span class="lbl">{{ tx('badge.style', 'Estilo') }}</span>
+        <mat-button-toggle-group [value]="group.get('badgeStyle')?.value" (change)="group.get('badgeStyle')?.setValue($event.value)" [attr.aria-label]="tx('badge.style.aria', 'Estilo do badge')">
+          <mat-button-toggle value="solid">{{ tx('badge.style.solid', 'Solido') }}</mat-button-toggle>
+          <mat-button-toggle value="soft">{{ tx('badge.style.soft', 'Suave') }}</mat-button-toggle>
+          <mat-button-toggle value="outline">{{ tx('badge.style.outline', 'Contorno') }}</mat-button-toggle>
         </mat-button-toggle-group>
       </div>
     </div>
-  `, isInline: true, styles: [".icone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.pos,.variant{display:flex;align-items:center;gap:8px}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".icone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center;min-width:0}mat-form-field{min-width:0}.pos,.variant{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.pos mat-button-toggle-group,.variant mat-button-toggle-group{flex-wrap:wrap}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconeBadgeEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-effects-icone-badge-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatIconModule], template: `
-    <div class="icone-grid" role="group" aria-label="Editor de ícone e badge" [formGroup]="group">
+    <div class="icone-grid" role="group" [attr.aria-label]="tx('icon.group', 'Editor de icone e badge')" [formGroup]="group">
       <mat-form-field appearance="outline">
-        <mat-label>Ícone (mat-icon)</mat-label>
+        <mat-label>{{ tx('icon.label', 'Icone (mat-icon)') }}</mat-label>
         <input matInput type="text" formControlName="icon" placeholder="check_circle" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Cor do ícone</mat-label>
+        <mat-label>{{ tx('icon.color', 'Cor do icone') }}</mat-label>
         <input matInput type="text" formControlName="iconColor" placeholder="#35D07F" />
       </mat-form-field>
 
       <div class="pos">
-        <span class="lbl">Posição do ícone</span>
-        <mat-button-toggle-group [value]="group.get('iconPos')?.value" (change)="group.get('iconPos')?.setValue($event.value)" aria-label="Posição do ícone">
-          <mat-button-toggle value="before">Antes</mat-button-toggle>
-          <mat-button-toggle value="after">Depois</mat-button-toggle>
-          <mat-button-toggle value="overlay">Sobreposto</mat-button-toggle>
+        <span class="lbl">{{ tx('icon.position', 'Posicao do icone') }}</span>
+        <mat-button-toggle-group [value]="group.get('iconPos')?.value" (change)="group.get('iconPos')?.setValue($event.value)" [attr.aria-label]="tx('icon.position', 'Posicao do icone')">
+          <mat-button-toggle value="before">{{ tx('icon.position.before', 'Antes') }}</mat-button-toggle>
+          <mat-button-toggle value="after">{{ tx('icon.position.after', 'Depois') }}</mat-button-toggle>
+          <mat-button-toggle value="overlay">{{ tx('icon.position.overlay', 'Sobreposto') }}</mat-button-toggle>
         </mat-button-toggle-group>
       </div>
 
       <mat-form-field appearance="outline">
-        <mat-label>Texto do badge</mat-label>
+        <mat-label>{{ tx('badge.text', 'Texto do badge') }}</mat-label>
         <input matInput type="text" formControlName="badgeText" placeholder="Aprovado" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Cor do badge</mat-label>
+        <mat-label>{{ tx('badge.color', 'Cor do badge') }}</mat-label>
         <input matInput type="text" formControlName="badgeColor" placeholder="#2a8455" />
       </mat-form-field>
 
       <div class="variant">
-        <span class="lbl">Estilo</span>
-        <mat-button-toggle-group [value]="group.get('badgeStyle')?.value" (change)="group.get('badgeStyle')?.setValue($event.value)" aria-label="Estilo do badge">
-          <mat-button-toggle value="solid">Sólido</mat-button-toggle>
-          <mat-button-toggle value="soft">Suave</mat-button-toggle>
-          <mat-button-toggle value="outline">Contorno</mat-button-toggle>
+        <span class="lbl">{{ tx('badge.style', 'Estilo') }}</span>
+        <mat-button-toggle-group [value]="group.get('badgeStyle')?.value" (change)="group.get('badgeStyle')?.setValue($event.value)" [attr.aria-label]="tx('badge.style.aria', 'Estilo do badge')">
+          <mat-button-toggle value="solid">{{ tx('badge.style.solid', 'Solido') }}</mat-button-toggle>
+          <mat-button-toggle value="soft">{{ tx('badge.style.soft', 'Suave') }}</mat-button-toggle>
+          <mat-button-toggle value="outline">{{ tx('badge.style.outline', 'Contorno') }}</mat-button-toggle>
         </mat-button-toggle-group>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".icone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.pos,.variant{display:flex;align-items:center;gap:8px}.lbl{font-size:.85rem;opacity:.8}\n"] }]
-        }], propDecorators: { group: [{
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".icone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center;min-width:0}mat-form-field{min-width:0}.pos,.variant{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.pos mat-button-toggle-group,.variant mat-button-toggle-group{flex-wrap:wrap}.lbl{font-size:.85rem;opacity:.8}\n"] }]
+        }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
                 type: Input
             }] } });
 
 class FundoEditorComponent {
+    i18n;
     group;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FundoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    constructor(i18n) {
+        this.i18n = i18n;
+    }
+    tx(key, fallback) {
+        return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FundoEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: FundoEditorComponent, isStandalone: true, selector: "praxis-effects-fundo-editor", inputs: { group: "group" }, ngImport: i0, template: `
-    <div class="fundo-grid" role="group" aria-label="Editor de fundo" [formGroup]="group">
+    <div class="fundo-grid" role="group" [attr.aria-label]="tx('background.group', 'Editor de fundo')" [formGroup]="group">
       <mat-form-field appearance="outline">
-        <mat-label>Cor</mat-label>
+        <mat-label>{{ tx('background.color', 'Cor') }}</mat-label>
         <input matInput type="text" formControlName="color" placeholder="#122033" />
       </mat-form-field>
       <mat-form-field appearance="outline" class="full">
-        <mat-label>Gradient CSS</mat-label>
+        <mat-label>{{ tx('background.gradient', 'Gradient CSS') }}</mat-label>
         <input matInput type="text" formControlName="gradient" placeholder="linear-gradient(180deg, #202637, #1c2230)" />
       </mat-form-field>
 
       <label class="slider">
-        <span>Transparência</span>
+        <span>{{ tx('background.alpha', 'Transparencia') }}</span>
         <mat-slider min="0" max="100" step="5">
           <input matSliderThumb formControlName="alpha" />
         </mat-slider>
       </label>
       <label class="slider">
-        <span>Desfoque (px)</span>
+        <span>{{ tx('background.blur', 'Desfoque (px)') }}</span>
         <mat-slider min="0" max="20" step="1">
           <input matSliderThumb formControlName="blur" />
         </mat-slider>
       </label>
     </div>
-  `, isInline: true, styles: [".fundo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}.slider{display:flex;flex-direction:column;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".fundo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:center;min-width:0}.full{grid-column:1 / -1}mat-form-field,.slider{min-width:0}.slider{display:flex;flex-direction:column;gap:6px}.slider span{white-space:nowrap}mat-slider{width:100%;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FundoEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-effects-fundo-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSliderModule], template: `
-    <div class="fundo-grid" role="group" aria-label="Editor de fundo" [formGroup]="group">
+    <div class="fundo-grid" role="group" [attr.aria-label]="tx('background.group', 'Editor de fundo')" [formGroup]="group">
       <mat-form-field appearance="outline">
-        <mat-label>Cor</mat-label>
+        <mat-label>{{ tx('background.color', 'Cor') }}</mat-label>
         <input matInput type="text" formControlName="color" placeholder="#122033" />
       </mat-form-field>
       <mat-form-field appearance="outline" class="full">
-        <mat-label>Gradient CSS</mat-label>
+        <mat-label>{{ tx('background.gradient', 'Gradient CSS') }}</mat-label>
         <input matInput type="text" formControlName="gradient" placeholder="linear-gradient(180deg, #202637, #1c2230)" />
       </mat-form-field>
 
       <label class="slider">
-        <span>Transparência</span>
+        <span>{{ tx('background.alpha', 'Transparencia') }}</span>
         <mat-slider min="0" max="100" step="5">
           <input matSliderThumb formControlName="alpha" />
         </mat-slider>
       </label>
       <label class="slider">
-        <span>Desfoque (px)</span>
+        <span>{{ tx('background.blur', 'Desfoque (px)') }}</span>
         <mat-slider min="0" max="20" step="1">
           <input matSliderThumb formControlName="blur" />
         </mat-slider>
       </label>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".fundo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}.slider{display:flex;flex-direction:column;gap:6px}\n"] }]
-        }], propDecorators: { group: [{
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".fundo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:center;min-width:0}.full{grid-column:1 / -1}mat-form-field,.slider{min-width:0}.slider{display:flex;flex-direction:column;gap:6px}.slider span{white-space:nowrap}mat-slider{width:100%;min-width:0}\n"] }]
+        }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
                 type: Input
             }] } });
 
 class AnimacaoEditorComponent {
+    i18n;
     group;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnimacaoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    constructor(i18n) {
+        this.i18n = i18n;
+    }
+    tx(key, fallback) {
+        return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnimacaoEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: AnimacaoEditorComponent, isStandalone: true, selector: "praxis-effects-animacao-editor", inputs: { group: "group" }, ngImport: i0, template: `
-    <div class="anim-grid" role="group" aria-label="Editor de animação" [formGroup]="group">
+    <div class="anim-grid" role="group" [attr.aria-label]="tx('animation.group', 'Editor de animacao')" [formGroup]="group">
       <label class="anim-toggle">
         <input type="checkbox" formControlName="enabled" />
-        <span>Ativar animação</span>
+        <span>{{ tx('animation.enabled', 'Ativar animacao') }}</span>
       </label>
       <mat-form-field appearance="outline">
-        <mat-label>Preset</mat-label>
-        <select matNativeControl formControlName="preset" aria-label="Preset de animação">
-          <option value="">Sem preset</option>
+        <mat-label>{{ tx('animation.preset', 'Preset') }}</mat-label>
+        <select matNativeControl formControlName="preset" [attr.aria-label]="tx('animation.preset.aria', 'Preset de animacao')">
+          <option value="">{{ tx('animation.preset.none', 'Sem preset') }}</option>
           <option value="info-soft">Info Soft</option>
           <option value="success-confirm">Success Confirm</option>
           <option value="warning-attention">Warning Attention</option>
@@ -652,9 +959,9 @@ class AnimacaoEditorComponent {
         </select>
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Tipo</mat-label>
-        <select matNativeControl formControlName="type" aria-label="Tipo de animação">
-          <option value="">Padrão do preset</option>
+        <mat-label>{{ tx('animation.type', 'Tipo') }}</mat-label>
+        <select matNativeControl formControlName="type" [attr.aria-label]="tx('animation.type.aria', 'Tipo de animacao')">
+          <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
           <option value="pulse">Pulse</option>
           <option value="blink">Blink</option>
           <option value="grow">Grow</option>
@@ -664,58 +971,58 @@ class AnimacaoEditorComponent {
         </select>
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Duração (ms)</mat-label>
-        <input matInput type="number" formControlName="durationMs" placeholder="Preset/default" />
+        <mat-label>{{ tx('animation.duration', 'Duracao (ms)') }}</mat-label>
+        <input matInput type="number" formControlName="durationMs" [placeholder]="tx('animation.duration.placeholder', 'Preset/default')" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Delay (ms)</mat-label>
-        <input matInput type="number" formControlName="delayMs" placeholder="Opcional" />
+        <mat-label>{{ tx('animation.delay', 'Delay (ms)') }}</mat-label>
+        <input matInput type="number" formControlName="delayMs" [placeholder]="tx('animation.delay.placeholder', 'Opcional')" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Disparo</mat-label>
-        <select matNativeControl formControlName="trigger" aria-label="Disparo da animação">
-          <option value="">Padrão do preset</option>
-          <option value="onChange">Ao mudar</option>
-          <option value="onAppear">Ao aparecer</option>
-          <option value="onHover">Ao passar o mouse</option>
-          <option value="onConditionEnter">Ao entrar na condição</option>
-          <option value="onConditionExit">Ao sair da condição</option>
-          <option value="onDataRefresh">Ao atualizar dados</option>
+        <mat-label>{{ tx('animation.trigger', 'Disparo') }}</mat-label>
+        <select matNativeControl formControlName="trigger" [attr.aria-label]="tx('animation.trigger.aria', 'Disparo da animacao')">
+          <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
+          <option value="onChange">{{ tx('animation.trigger.onChange', 'Ao mudar') }}</option>
+          <option value="onAppear">{{ tx('animation.trigger.onAppear', 'Ao aparecer') }}</option>
+          <option value="onHover">{{ tx('animation.trigger.onHover', 'Ao passar o mouse') }}</option>
+          <option value="onConditionEnter">{{ tx('animation.trigger.onConditionEnter', 'Ao entrar na condicao') }}</option>
+          <option value="onConditionExit">{{ tx('animation.trigger.onConditionExit', 'Ao sair da condicao') }}</option>
+          <option value="onDataRefresh">{{ tx('animation.trigger.onDataRefresh', 'Ao atualizar dados') }}</option>
         </select>
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Repetição</mat-label>
-        <select matNativeControl formControlName="repeat" aria-label="Repetição da animação">
-          <option value="">Padrão do preset</option>
-          <option value="once">Uma vez</option>
-          <option value="loop">Loop</option>
-          <option value="infinite">Infinito</option>
+        <mat-label>{{ tx('animation.repeat', 'Repeticao') }}</mat-label>
+        <select matNativeControl formControlName="repeat" [attr.aria-label]="tx('animation.repeat.aria', 'Repeticao da animacao')">
+          <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
+          <option value="once">{{ tx('animation.repeat.once', 'Uma vez') }}</option>
+          <option value="loop">{{ tx('animation.repeat.loop', 'Loop') }}</option>
+          <option value="infinite">{{ tx('animation.repeat.infinite', 'Infinito') }}</option>
         </select>
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Intensidade</mat-label>
-        <select matNativeControl formControlName="intensity" aria-label="Intensidade da animação">
-          <option value="">Padrão do preset</option>
-          <option value="subtle">Sutil</option>
-          <option value="normal">Normal</option>
-          <option value="strong">Forte</option>
+        <mat-label>{{ tx('animation.intensity', 'Intensidade') }}</mat-label>
+        <select matNativeControl formControlName="intensity" [attr.aria-label]="tx('animation.intensity.aria', 'Intensidade da animacao')">
+          <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
+          <option value="subtle">{{ tx('animation.intensity.subtle', 'Sutil') }}</option>
+          <option value="normal">{{ tx('animation.intensity.normal', 'Normal') }}</option>
+          <option value="strong">{{ tx('animation.intensity.strong', 'Forte') }}</option>
         </select>
       </mat-form-field>
     </div>
-  `, isInline: true, styles: [".anim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.anim-toggle{grid-column:1 / -1;display:inline-flex;align-items:center;gap:8px;color:inherit;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".anim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.anim-toggle{grid-column:1 / -1;display:inline-flex;align-items:center;gap:8px;color:inherit;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnimacaoEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-effects-animacao-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
-    <div class="anim-grid" role="group" aria-label="Editor de animação" [formGroup]="group">
+    <div class="anim-grid" role="group" [attr.aria-label]="tx('animation.group', 'Editor de animacao')" [formGroup]="group">
       <label class="anim-toggle">
         <input type="checkbox" formControlName="enabled" />
-        <span>Ativar animação</span>
+        <span>{{ tx('animation.enabled', 'Ativar animacao') }}</span>
       </label>
       <mat-form-field appearance="outline">
-        <mat-label>Preset</mat-label>
-        <select matNativeControl formControlName="preset" aria-label="Preset de animação">
-          <option value="">Sem preset</option>
+        <mat-label>{{ tx('animation.preset', 'Preset') }}</mat-label>
+        <select matNativeControl formControlName="preset" [attr.aria-label]="tx('animation.preset.aria', 'Preset de animacao')">
+          <option value="">{{ tx('animation.preset.none', 'Sem preset') }}</option>
           <option value="info-soft">Info Soft</option>
           <option value="success-confirm">Success Confirm</option>
           <option value="warning-attention">Warning Attention</option>
@@ -731,9 +1038,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </select>
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Tipo</mat-label>
-        <select matNativeControl formControlName="type" aria-label="Tipo de animação">
-          <option value="">Padrão do preset</option>
+        <mat-label>{{ tx('animation.type', 'Tipo') }}</mat-label>
+        <select matNativeControl formControlName="type" [attr.aria-label]="tx('animation.type.aria', 'Tipo de animacao')">
+          <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
           <option value="pulse">Pulse</option>
           <option value="blink">Blink</option>
           <option value="grow">Grow</option>
@@ -743,106 +1050,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </select>
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Duração (ms)</mat-label>
-        <input matInput type="number" formControlName="durationMs" placeholder="Preset/default" />
+        <mat-label>{{ tx('animation.duration', 'Duracao (ms)') }}</mat-label>
+        <input matInput type="number" formControlName="durationMs" [placeholder]="tx('animation.duration.placeholder', 'Preset/default')" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Delay (ms)</mat-label>
-        <input matInput type="number" formControlName="delayMs" placeholder="Opcional" />
+        <mat-label>{{ tx('animation.delay', 'Delay (ms)') }}</mat-label>
+        <input matInput type="number" formControlName="delayMs" [placeholder]="tx('animation.delay.placeholder', 'Opcional')" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Disparo</mat-label>
-        <select matNativeControl formControlName="trigger" aria-label="Disparo da animação">
-          <option value="">Padrão do preset</option>
-          <option value="onChange">Ao mudar</option>
-          <option value="onAppear">Ao aparecer</option>
-          <option value="onHover">Ao passar o mouse</option>
-          <option value="onConditionEnter">Ao entrar na condição</option>
-          <option value="onConditionExit">Ao sair da condição</option>
-          <option value="onDataRefresh">Ao atualizar dados</option>
+        <mat-label>{{ tx('animation.trigger', 'Disparo') }}</mat-label>
+        <select matNativeControl formControlName="trigger" [attr.aria-label]="tx('animation.trigger.aria', 'Disparo da animacao')">
+          <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
+          <option value="onChange">{{ tx('animation.trigger.onChange', 'Ao mudar') }}</option>
+          <option value="onAppear">{{ tx('animation.trigger.onAppear', 'Ao aparecer') }}</option>
+          <option value="onHover">{{ tx('animation.trigger.onHover', 'Ao passar o mouse') }}</option>
+          <option value="onConditionEnter">{{ tx('animation.trigger.onConditionEnter', 'Ao entrar na condicao') }}</option>
+          <option value="onConditionExit">{{ tx('animation.trigger.onConditionExit', 'Ao sair da condicao') }}</option>
+          <option value="onDataRefresh">{{ tx('animation.trigger.onDataRefresh', 'Ao atualizar dados') }}</option>
         </select>
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Repetição</mat-label>
-        <select matNativeControl formControlName="repeat" aria-label="Repetição da animação">
-          <option value="">Padrão do preset</option>
-          <option value="once">Uma vez</option>
-          <option value="loop">Loop</option>
-          <option value="infinite">Infinito</option>
+        <mat-label>{{ tx('animation.repeat', 'Repeticao') }}</mat-label>
+        <select matNativeControl formControlName="repeat" [attr.aria-label]="tx('animation.repeat.aria', 'Repeticao da animacao')">
+          <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
+          <option value="once">{{ tx('animation.repeat.once', 'Uma vez') }}</option>
+          <option value="loop">{{ tx('animation.repeat.loop', 'Loop') }}</option>
+          <option value="infinite">{{ tx('animation.repeat.infinite', 'Infinito') }}</option>
         </select>
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Intensidade</mat-label>
-        <select matNativeControl formControlName="intensity" aria-label="Intensidade da animação">
-          <option value="">Padrão do preset</option>
-          <option value="subtle">Sutil</option>
-          <option value="normal">Normal</option>
-          <option value="strong">Forte</option>
+        <mat-label>{{ tx('animation.intensity', 'Intensidade') }}</mat-label>
+        <select matNativeControl formControlName="intensity" [attr.aria-label]="tx('animation.intensity.aria', 'Intensidade da animacao')">
+          <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
+          <option value="subtle">{{ tx('animation.intensity.subtle', 'Sutil') }}</option>
+          <option value="normal">{{ tx('animation.intensity.normal', 'Normal') }}</option>
+          <option value="strong">{{ tx('animation.intensity.strong', 'Forte') }}</option>
         </select>
       </mat-form-field>
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".anim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.anim-toggle{grid-column:1 / -1;display:inline-flex;align-items:center;gap:8px;color:inherit;font-size:.9rem}\n"] }]
-        }], propDecorators: { group: [{
+        }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
                 type: Input
             }] } });
 
 class TooltipEditorComponent {
+    i18n;
     group;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    constructor(i18n) {
+        this.i18n = i18n;
+    }
+    tx(key, fallback) {
+        return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: TooltipEditorComponent, isStandalone: true, selector: "praxis-effects-tooltip-editor", inputs: { group: "group" }, ngImport: i0, template: `
-    <div class="tooltip-grid" role="group" aria-label="Editor de tooltip" [formGroup]="group">
+    <div class="tooltip-grid" role="group" [attr.aria-label]="tx('tooltip.group', 'Editor de tooltip')" [formGroup]="group">
       <mat-form-field appearance="outline" class="full">
-        <mat-label>Texto</mat-label>
-        <input matInput type="text" formControlName="text" placeholder="Detalhes da célula" />
+        <mat-label>{{ tx('tooltip.text', 'Texto') }}</mat-label>
+        <input matInput type="text" formControlName="text" [placeholder]="tx('tooltip.text.placeholder', 'Detalhes da celula')" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Posição</mat-label>
-        <select matNativeControl formControlName="position" aria-label="Posição do tooltip">
-          <option value="top">Topo</option>
-          <option value="right">Direita</option>
-          <option value="bottom">Baixo</option>
-          <option value="left">Esquerda</option>
+        <mat-label>{{ tx('tooltip.position', 'Posicao') }}</mat-label>
+        <select matNativeControl formControlName="position" [attr.aria-label]="tx('tooltip.position.aria', 'Posicao do tooltip')">
+          <option value="top">{{ tx('tooltip.position.top', 'Topo') }}</option>
+          <option value="right">{{ tx('tooltip.position.right', 'Direita') }}</option>
+          <option value="bottom">{{ tx('tooltip.position.bottom', 'Baixo') }}</option>
+          <option value="left">{{ tx('tooltip.position.left', 'Esquerda') }}</option>
         </select>
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Cor do fundo</mat-label>
+        <mat-label>{{ tx('tooltip.backgroundColor', 'Cor do fundo') }}</mat-label>
         <input matInput type="text" formControlName="bgColor" placeholder="#2E3142" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Delay (ms)</mat-label>
+        <mat-label>{{ tx('tooltip.delay', 'Delay (ms)') }}</mat-label>
         <input matInput type="number" formControlName="delayMs" placeholder="300" />
       </mat-form-field>
     </div>
-  `, isInline: true, styles: [".tooltip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".tooltip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-effects-tooltip-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
-    <div class="tooltip-grid" role="group" aria-label="Editor de tooltip" [formGroup]="group">
+    <div class="tooltip-grid" role="group" [attr.aria-label]="tx('tooltip.group', 'Editor de tooltip')" [formGroup]="group">
       <mat-form-field appearance="outline" class="full">
-        <mat-label>Texto</mat-label>
-        <input matInput type="text" formControlName="text" placeholder="Detalhes da célula" />
+        <mat-label>{{ tx('tooltip.text', 'Texto') }}</mat-label>
+        <input matInput type="text" formControlName="text" [placeholder]="tx('tooltip.text.placeholder', 'Detalhes da celula')" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Posição</mat-label>
-        <select matNativeControl formControlName="position" aria-label="Posição do tooltip">
-          <option value="top">Topo</option>
-          <option value="right">Direita</option>
-          <option value="bottom">Baixo</option>
-          <option value="left">Esquerda</option>
+        <mat-label>{{ tx('tooltip.position', 'Posicao') }}</mat-label>
+        <select matNativeControl formControlName="position" [attr.aria-label]="tx('tooltip.position.aria', 'Posicao do tooltip')">
+          <option value="top">{{ tx('tooltip.position.top', 'Topo') }}</option>
+          <option value="right">{{ tx('tooltip.position.right', 'Direita') }}</option>
+          <option value="bottom">{{ tx('tooltip.position.bottom', 'Baixo') }}</option>
+          <option value="left">{{ tx('tooltip.position.left', 'Esquerda') }}</option>
         </select>
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Cor do fundo</mat-label>
+        <mat-label>{{ tx('tooltip.backgroundColor', 'Cor do fundo') }}</mat-label>
         <input matInput type="text" formControlName="bgColor" placeholder="#2E3142" />
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Delay (ms)</mat-label>
+        <mat-label>{{ tx('tooltip.delay', 'Delay (ms)') }}</mat-label>
         <input matInput type="number" formControlName="delayMs" placeholder="300" />
       </mat-form-field>
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".tooltip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}\n"] }]
-        }], propDecorators: { group: [{
+        }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
                 type: Input
             }] } });
 
@@ -868,6 +1182,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class RuleEffectsPanelComponent {
     fb;
     registry;
+    i18n;
+    static DEFAULT_ESTILO_FORM_VALUE = {
+        color: '#ffffff',
+        bgColor: '',
+        bold: false,
+        italic: false,
+        underline: false,
+        transform: null,
+        opacity: 1,
+        fontScale: 0,
+    };
+    static DEFAULT_LAYOUT_FORM_VALUE = {
+        border: 'none',
+        borderColor: '#487BFF',
+        borderWidth: 2,
+        padding: 6,
+        align: 'start',
+        elevation: 6,
+    };
+    static DEFAULT_ICON_BADGE_FORM_VALUE = {
+        icon: 'check_circle',
+        iconColor: '#35D07F',
+        iconPos: 'before',
+        badgeText: '',
+        badgeStyle: 'soft',
+        badgeColor: '#2a8455',
+    };
+    static DEFAULT_BACKGROUND_FORM_VALUE = {
+        color: '#122033',
+        gradient: '',
+        alpha: 0,
+        blur: 0,
+    };
     static DEFAULT_ANIMATION_FORM_VALUE = {
         enabled: true,
         preset: '',
@@ -878,25 +1225,27 @@ class RuleEffectsPanelComponent {
         delayMs: null,
         intensity: '',
     };
-    // i18n-friendly labels map
-    labels = {
-        'panel.title': 'C. Efeitos',
-        'panel.subtitle': 'Configure estilos e elementos visuais quando a regra for verdadeira',
-        'tabs.estilo': 'Estilo',
-        'tabs.layout': 'Layout',
-        'tabs.icone': 'Ícone / Badge',
-        'tabs.fundo': 'Fundo',
-        'tabs.animacao': 'Animação',
-        'tabs.tooltip': 'Tooltip',
-        'preview.title': 'Pré-visualização',
-        'preview.hint': 'As mudanças acima refletem o estilo aplicado quando a condição é verdadeira.',
-        'advanced.title': 'Avançado',
-        'advanced.description': 'Descrição',
-        'actions.apply': 'Aplicar',
-        'actions.reset': 'Redefinir',
-        'presets.label': 'Presets',
+    static DEFAULT_TOOLTIP_FORM_VALUE = {
+        text: '',
+        position: 'bottom',
+        bgColor: '#2E3142',
+        delayMs: 300,
     };
-    t(key) { return this.labels[key] ?? key; }
+    _labelOverrides = {};
+    // Host-specific overrides take precedence over the component i18n catalog.
+    set labels(value) {
+        this._labelOverrides = { ...(value ?? {}) };
+    }
+    get labels() {
+        return PRAXIS_TABLE_RULE_BUILDER_LABEL_KEYS.reduce((acc, key) => {
+            acc[key] = this.t(key);
+            return acc;
+        }, {});
+    }
+    t(key) {
+        return this._labelOverrides[key]
+            ?? this.i18n.t(key, undefined, key, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
+    }
     scope = 'row';
     _value;
     set value(v) {
@@ -913,9 +1262,23 @@ class RuleEffectsPanelComponent {
     destroy$ = new Subject();
     isHovering = false;
     tabOrder = ['estilo', 'layout', 'icone', 'fundo', 'animacao', 'tooltip'];
-    constructor(fb, registry) {
+    get conditionalSurfacePreviewUnresolved() {
+        if (!this.effectsForm)
+            return false;
+        const raw = this.effectsForm.getRawValue();
+        const background = raw?.background ?? {};
+        const color = this.nonEmptyString(background.color);
+        return !!(this.nonEmptyString(background.gradient)
+            || (this.toFiniteNumber(background.alpha) ?? 0) > 0
+            || (this.toFiniteNumber(background.blur) ?? 0) > 0
+            || (color && /(?:var|color-mix)\s*\(/i.test(color))
+            || this.nonEmptyString(raw?.cssClass)
+            || this.nonEmptyString(raw?.inlineStyle));
+    }
+    constructor(fb, registry, i18n) {
         this.fb = fb;
         this.registry = registry;
+        this.i18n = i18n;
     }
     ngOnInit() {
         // Register built-in editors for the registry (extensible)
@@ -928,36 +1291,36 @@ class RuleEffectsPanelComponent {
         this.effectsForm = this.fb.group({
             description: [''],
             estilo: this.fb.group({
-                color: ['#ffffff'],
-                bgColor: [''],
-                bold: [false],
-                italic: [false],
-                underline: [false],
-                transform: [null],
-                opacity: [1],
-                fontScale: [0],
+                color: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.color],
+                bgColor: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.bgColor],
+                bold: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.bold],
+                italic: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.italic],
+                underline: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.underline],
+                transform: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.transform],
+                opacity: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.opacity],
+                fontScale: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.fontScale],
             }),
             layout: this.fb.group({
-                border: ['none'],
-                borderColor: ['#487BFF'],
-                borderWidth: [2],
-                padding: [6],
-                align: ['start'],
-                elevation: [6],
+                border: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.border],
+                borderColor: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.borderColor],
+                borderWidth: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.borderWidth],
+                padding: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.padding],
+                align: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.align],
+                elevation: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.elevation],
             }),
             iconBadge: this.fb.group({
-                icon: ['check_circle'],
-                iconColor: ['#35D07F'],
-                iconPos: ['before'],
-                badgeText: [''],
-                badgeStyle: ['soft'],
-                badgeColor: ['#2a8455'],
+                icon: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.icon],
+                iconColor: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.iconColor],
+                iconPos: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.iconPos],
+                badgeText: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.badgeText],
+                badgeStyle: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.badgeStyle],
+                badgeColor: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.badgeColor],
             }),
             background: this.fb.group({
-                color: ['#122033'],
-                gradient: [''],
-                alpha: [0],
-                blur: [0],
+                color: [RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.color],
+                gradient: [RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.gradient],
+                alpha: [RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.alpha],
+                blur: [RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.blur],
             }),
             animation: this.fb.group({
                 enabled: [RuleEffectsPanelComponent.DEFAULT_ANIMATION_FORM_VALUE.enabled],
@@ -970,10 +1333,10 @@ class RuleEffectsPanelComponent {
                 intensity: [RuleEffectsPanelComponent.DEFAULT_ANIMATION_FORM_VALUE.intensity],
             }),
             tooltip: this.fb.group({
-                text: [''],
-                position: ['bottom'],
-                bgColor: ['#2E3142'],
-                delayMs: [300],
+                text: [RuleEffectsPanelComponent.DEFAULT_TOOLTIP_FORM_VALUE.text],
+                position: [RuleEffectsPanelComponent.DEFAULT_TOOLTIP_FORM_VALUE.position],
+                bgColor: [RuleEffectsPanelComponent.DEFAULT_TOOLTIP_FORM_VALUE.bgColor],
+                delayMs: [RuleEffectsPanelComponent.DEFAULT_TOOLTIP_FORM_VALUE.delayMs],
             }),
             cssClass: [''],
             inlineStyle: [''],
@@ -987,10 +1350,7 @@ class RuleEffectsPanelComponent {
             this.patchForm(this._value);
     }
     patchForm(v) {
-        const animationGroup = this.effectsForm.get('animation');
-        if (animationGroup) {
-            animationGroup.reset(RuleEffectsPanelComponent.DEFAULT_ANIMATION_FORM_VALUE, { emitEvent: false });
-        }
+        this.effectsForm.reset(this.createDefaultFormValue(), { emitEvent: false });
         this.effectsForm.patchValue(v, { emitEvent: false });
     }
     setTab(tab) {
@@ -1008,7 +1368,7 @@ class RuleEffectsPanelComponent {
         this.apply.emit();
     }
     onReset() {
-        this.effectsForm.reset();
+        this.effectsForm.reset(this.createDefaultFormValue());
         this.reset.emit();
     }
     ngOnDestroy() {
@@ -1063,9 +1423,17 @@ class RuleEffectsPanelComponent {
     computeCellStyle(v) {
         const b = v?.background || {};
         const ly = v?.layout || {};
-        const bg = b.gradient ? b.gradient : (b.color || 'transparent');
+        const estilo = v?.estilo || {};
+        const backgroundColor = this.nonEmptyString(b.color);
+        const gradient = this.nonEmptyString(b.gradient);
+        const textBackgroundColor = this.nonEmptyString(estilo.bgColor);
+        const hasDeliberateBackgroundColor = backgroundColor
+            && backgroundColor !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.color;
+        const bg = gradient || (hasDeliberateBackgroundColor ? backgroundColor : textBackgroundColor) || 'transparent';
         const alpha = (b.alpha ?? 0) / 100;
-        const bgWithAlpha = b.color ? `color-mix(in srgb, ${b.color} ${100 - alpha * 100}%, transparent)` : bg;
+        const bgWithAlpha = hasDeliberateBackgroundColor
+            ? `color-mix(in srgb, ${backgroundColor} ${100 - alpha * 100}%, transparent)`
+            : bg;
         const borderColor = ly.borderColor || 'transparent';
         const borderWidth = (ly.borderWidth ?? 0) + 'px';
         const borderStyle = ly.border === 'none' ? 'none' : `${borderWidth} solid ${borderColor}`;
@@ -1157,16 +1525,156 @@ class RuleEffectsPanelComponent {
         return s?.badgeStyle === 'outline' ? s.badgeColor || '#777' : '#0000';
     }
     toEffectDefinitionForEmit(formValue) {
-        const value = { scope: this.scope, ...(formValue || {}) };
+        const value = { scope: this.scope };
+        const raw = formValue || {};
+        const description = this.nonEmptyString(raw.description);
+        if (description)
+            value.description = description;
+        const estilo = raw.estilo || {};
+        const normalizedEstilo = {};
+        const color = this.nonEmptyString(estilo.color);
+        const bgColor = this.nonEmptyString(estilo.bgColor);
+        const transform = this.nonEmptyString(estilo.transform);
+        if (color && color !== RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.color)
+            normalizedEstilo.color = color;
+        if (bgColor)
+            normalizedEstilo.bgColor = bgColor;
+        if (estilo.bold === true)
+            normalizedEstilo.bold = true;
+        if (estilo.italic === true)
+            normalizedEstilo.italic = true;
+        if (estilo.underline === true)
+            normalizedEstilo.underline = true;
+        if (transform)
+            normalizedEstilo.transform = transform;
+        const opacity = this.toFiniteNumber(estilo.opacity);
+        if (opacity !== undefined && opacity !== 1)
+            normalizedEstilo.opacity = opacity;
+        const fontScale = this.toFiniteNumber(estilo.fontScale);
+        if (fontScale !== undefined && fontScale !== 0)
+            normalizedEstilo.fontScale = fontScale;
+        if (Object.keys(normalizedEstilo).length)
+            value.estilo = normalizedEstilo;
+        const layout = raw.layout || {};
+        const normalizedLayout = {};
+        const border = this.nonEmptyString(layout.border);
+        const borderColor = this.nonEmptyString(layout.borderColor);
+        const align = this.nonEmptyString(layout.align);
+        if (border && border !== RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.border) {
+            normalizedLayout.border = border;
+            if (borderColor)
+                normalizedLayout.borderColor = borderColor;
+            const borderWidth = this.toFiniteNumber(layout.borderWidth);
+            if (borderWidth !== undefined)
+                normalizedLayout.borderWidth = borderWidth;
+        }
+        const padding = this.toFiniteNumber(layout.padding);
+        if (padding !== undefined && padding !== RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.padding)
+            normalizedLayout.padding = padding;
+        if (align && align !== RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.align)
+            normalizedLayout.align = align;
+        const elevation = this.toFiniteNumber(layout.elevation);
+        if (elevation !== undefined && elevation !== RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.elevation)
+            normalizedLayout.elevation = elevation;
+        if (Object.keys(normalizedLayout).length)
+            value.layout = normalizedLayout;
+        const iconBadge = raw.iconBadge || {};
+        const normalizedIconBadge = {};
+        const icon = this.nonEmptyString(iconBadge.icon);
+        const badgeText = this.nonEmptyString(iconBadge.badgeText);
+        const iconChanged = icon && icon !== RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.icon;
+        const iconColor = this.nonEmptyString(iconBadge.iconColor);
+        const iconColorChanged = iconColor && iconColor !== RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.iconColor;
+        const iconPos = this.nonEmptyString(iconBadge.iconPos);
+        const iconPosChanged = iconPos && iconPos !== RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.iconPos;
+        if (iconChanged || iconColorChanged || iconPosChanged) {
+            normalizedIconBadge.icon = icon || RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.icon;
+            if (iconColor)
+                normalizedIconBadge.iconColor = iconColor;
+            if (iconPos)
+                normalizedIconBadge.iconPos = iconPos;
+        }
+        if (badgeText) {
+            normalizedIconBadge.badgeText = badgeText;
+            const badgeStyle = this.nonEmptyString(iconBadge.badgeStyle);
+            const badgeColor = this.nonEmptyString(iconBadge.badgeColor);
+            if (badgeStyle && badgeStyle !== RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.badgeStyle)
+                normalizedIconBadge.badgeStyle = badgeStyle;
+            if (badgeColor && badgeColor !== RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.badgeColor)
+                normalizedIconBadge.badgeColor = badgeColor;
+        }
+        if (Object.keys(normalizedIconBadge).length)
+            value.iconBadge = normalizedIconBadge;
+        const background = raw.background || {};
+        const normalizedBackground = {};
+        const backgroundColor = this.nonEmptyString(background.color);
+        const gradient = this.nonEmptyString(background.gradient);
+        if (gradient)
+            normalizedBackground.gradient = gradient;
+        const alpha = this.toFiniteNumber(background.alpha);
+        const blur = this.toFiniteNumber(background.blur);
+        const hasBackgroundAdjustment = (alpha !== undefined && alpha !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.alpha)
+            || (blur !== undefined && blur !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.blur);
+        if (backgroundColor && (backgroundColor !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.color || hasBackgroundAdjustment)) {
+            normalizedBackground.color = backgroundColor;
+        }
+        if (alpha !== undefined && alpha !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.alpha && (normalizedBackground.color || normalizedBackground.gradient))
+            normalizedBackground.alpha = alpha;
+        if (blur !== undefined && blur !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.blur && (normalizedBackground.color || normalizedBackground.gradient))
+            normalizedBackground.blur = blur;
+        if (Object.keys(normalizedBackground).length)
+            value.background = normalizedBackground;
+        const tooltip = raw.tooltip || {};
+        const tooltipText = this.nonEmptyString(tooltip.text);
+        if (tooltipText) {
+            const normalizedTooltip = { text: tooltipText };
+            const position = this.nonEmptyString(tooltip.position);
+            const bgColor = this.nonEmptyString(tooltip.bgColor);
+            const delayMs = this.toNonNegativeMs(tooltip.delayMs);
+            if (position)
+                normalizedTooltip.position = position;
+            if (bgColor)
+                normalizedTooltip.bgColor = bgColor;
+            if (delayMs !== undefined)
+                normalizedTooltip.delayMs = delayMs;
+            value.tooltip = normalizedTooltip;
+        }
+        const cssClass = this.nonEmptyString(raw.cssClass);
+        const inlineStyle = this.nonEmptyString(raw.inlineStyle);
+        if (cssClass)
+            value.cssClass = cssClass;
+        if (inlineStyle)
+            value.inlineStyle = inlineStyle;
         const normalizedAnimation = this.normalizeAnimationForEmit((formValue || {}).animation);
         if (normalizedAnimation) {
             value.animation = normalizedAnimation;
         }
-        else {
-            delete value.animation;
-        }
         return value;
     }
+    nonEmptyString(value) {
+        return typeof value === 'string' ? value.trim() : '';
+    }
+    toFiniteNumber(value) {
+        if (value === null || value === undefined)
+            return undefined;
+        if (typeof value === 'string' && !value.trim())
+            return undefined;
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : undefined;
+    }
+    createDefaultFormValue() {
+        return {
+            description: '',
+            estilo: { ...RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE },
+            layout: { ...RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE },
+            iconBadge: { ...RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE },
+            background: { ...RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE },
+            animation: { ...RuleEffectsPanelComponent.DEFAULT_ANIMATION_FORM_VALUE },
+            tooltip: { ...RuleEffectsPanelComponent.DEFAULT_TOOLTIP_FORM_VALUE },
+            cssClass: '',
+            inlineStyle: '',
+        };
+    }
     normalizeAnimationForEmit(animation) {
         if (!animation)
             return undefined;
@@ -1208,8 +1716,8 @@ class RuleEffectsPanelComponent {
         const parsed = Number(value);
         return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed) : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RuleEffectsPanelComponent, deps: [{ token: i1.FormBuilder }, { token: EffectRegistryService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RuleEffectsPanelComponent, isStandalone: true, selector: "praxis-rule-effects-panel", inputs: { scope: "scope", value: "value" }, outputs: { valueChange: "valueChange", apply: "apply", reset: "reset" }, ngImport: i0, template: "<div class=\"rulefx\">\n  <header class=\"rulefx__header\">\n    <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n    <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n    <div class=\"rulefx__actions\">\n      <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon>bookmarks</mat-icon>\n        {{ t('presets.label') }}\n      </button>\n      <mat-menu #presetsMenu=\"matMenu\">\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> Aprovado</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> Alerta</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> Erro</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> Info</button>\n      </mat-menu>\n      <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n        <mat-icon>done</mat-icon>\n        {{ t('actions.apply') }}\n      </button>\n      <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n        <mat-icon>restart_alt</mat-icon>\n        {{ t('actions.reset') }}\n      </button>\n    </div>\n  </header>\n\n  <!-- Ribbon com seis categorias -->\n  <nav\n    class=\"rulefx__ribbon\"\n    aria-label=\"Categorias de efeitos\"\n    role=\"tablist\"\n    (keydown)=\"onTabsKeydown($event)\"\n    >\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'estilo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'estilo'\"\n      [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('estilo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.estilo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">text_format</span>\n      <span>{{ t('tabs.estilo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'layout'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'layout'\"\n      [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('layout')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.layout')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">view_quilt</span>\n      <span>{{ t('tabs.layout') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'icone'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'icone'\"\n      [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('icone')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.icone')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">verified</span>\n      <span>{{ t('tabs.icone') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'fundo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'fundo'\"\n      [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('fundo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.fundo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">gradient</span>\n      <span>{{ t('tabs.fundo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'animacao'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'animacao'\"\n      [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('animacao')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.animacao')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">animation</span>\n      <span>{{ t('tabs.animacao') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'tooltip'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'tooltip'\"\n      [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.tooltip')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">info</span>\n      <span>{{ t('tabs.tooltip') }}</span>\n    </button>\n  </nav>\n\n  <!-- Quickbar contextual -->\n  @if (effectsForm) {\n    <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n      @switch (activeTab) {\n        @case ('estilo') {\n          <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n        }\n        @case ('layout') {\n          <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n        }\n        @case ('icone') {\n          <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n        }\n        @case ('fundo') {\n          <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n        }\n        @case ('animacao') {\n          <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n        }\n        @case ('tooltip') {\n          <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n        }\n      }\n    </section>\n  }\n\n  <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n  <section class=\"rulefx__body\">\n    <div class=\"rulefx__preview\">\n      <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n      <div\n        class=\"preview__cell\"\n        [ngStyle]=\"computeCellStyle(formValue)\"\n        [ngClass]=\"computeCellClass(formValue)\"\n        (mouseenter)=\"onHoverPreview(true)\"\n        (mouseleave)=\"onHoverPreview(false)\"\n        >\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n\n        <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n          Joana Silva \u2014 Ativo desde 2019\n        </span>\n\n        @if (formValue.iconBadge?.badgeText) {\n          <span\n            class=\"preview__badge\"\n            [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n            >\n            {{ formValue.iconBadge?.badgeText }}\n          </span>\n        }\n\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n      </div>\n\n      <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n    </div>\n\n    <div class=\"rulefx__advanced\">\n      <details class=\"advanced__section\">\n        <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n        <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n          <label class=\"textctl\">\n            <span>{{ t('advanced.description') }}</span>\n            <input type=\"text\" formControlName=\"description\" placeholder=\"ex.: Destacar pre\u00E7os altos\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Classe CSS</span>\n            <input type=\"text\" formControlName=\"cssClass\" placeholder=\"ex.: praxis-cell--alert\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Estilo inline</span>\n            <input type=\"text\" formControlName=\"inlineStyle\" placeholder=\"ex.: text-shadow: 0 0 8px rgba(0,255,163,.5)\" />\n          </label>\n        </div>\n      </details>\n    </div>\n  </section>\n</div>\n", styles: [".rulefx{background:linear-gradient(180deg,#171b24,#1e2431);border-radius:14px;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 24px #00000047;padding:12px}.rulefx__header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px}.rulefx__title{margin:0;font-size:1.05rem}.rulefx__subtitle{margin:0;opacity:.75;font-size:.9rem}.rulefx__actions{display:inline-flex;gap:8px;align-items:center}.rulefx__ribbon{display:flex;gap:6px;padding:8px;border-radius:10px;background:linear-gradient(180deg,#202636,#1c2230);margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:transparent;color:#e7ecf6;cursor:pointer;border:none}.ribbon__tab.is-active{background:linear-gradient(180deg,#2a3550,#243149);box-shadow:inset 0 0 0 1px #ffffff0a}.rulefx__quickbar{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;background:linear-gradient(180deg,#202637,#1c2230);margin-bottom:10px}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;background:linear-gradient(180deg,#202637,#1c2230)}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#35d07f14;border:1px solid rgba(53,208,127,.25)}.preview__icon{font-size:18px;line-height:1}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:#151a24;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "component", type: EstiloEditorComponent, selector: "praxis-effects-estilo-editor", inputs: ["group"] }, { kind: "component", type: LayoutEditorComponent, selector: "praxis-effects-layout-editor", inputs: ["group"] }, { kind: "component", type: IconeBadgeEditorComponent, selector: "praxis-effects-icone-badge-editor", inputs: ["group"] }, { kind: "component", type: FundoEditorComponent, selector: "praxis-effects-fundo-editor", inputs: ["group"] }, { kind: "component", type: AnimacaoEditorComponent, selector: "praxis-effects-animacao-editor", inputs: ["group"] }, { kind: "component", type: TooltipEditorComponent, selector: "praxis-effects-tooltip-editor", inputs: ["group"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RuleEffectsPanelComponent, deps: [{ token: i2.FormBuilder }, { token: EffectRegistryService }, { token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RuleEffectsPanelComponent, isStandalone: true, selector: "praxis-rule-effects-panel", inputs: { labels: "labels", scope: "scope", value: "value" }, outputs: { valueChange: "valueChange", apply: "apply", reset: "reset" }, providers: [providePraxisI18nConfig(PRAXIS_TABLE_RULE_BUILDER_I18N_CONFIG)], ngImport: i0, template: "<div class=\"rulefx\">\n  <header class=\"rulefx__header\">\n    <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n    <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n    <div class=\"rulefx__actions\">\n      <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon>bookmarks</mat-icon>\n        {{ t('presets.label') }}\n      </button>\n      <mat-menu #presetsMenu=\"matMenu\">\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> {{ t('presets.aprovado') }}</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> {{ t('presets.alerta') }}</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> {{ t('presets.erro') }}</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> {{ t('presets.info') }}</button>\n      </mat-menu>\n      <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n        <mat-icon>done</mat-icon>\n        {{ t('actions.apply') }}\n      </button>\n      <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n        <mat-icon>restart_alt</mat-icon>\n        {{ t('actions.reset') }}\n      </button>\n    </div>\n  </header>\n\n  <!-- Ribbon com seis categorias -->\n  <nav\n    class=\"rulefx__ribbon\"\n    [attr.aria-label]=\"t('tabs.ariaLabel')\"\n    role=\"tablist\"\n    (keydown)=\"onTabsKeydown($event)\"\n    >\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'estilo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'estilo'\"\n      [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('estilo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.estilo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">text_format</span>\n      <span>{{ t('tabs.estilo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'layout'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'layout'\"\n      [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('layout')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.layout')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">view_quilt</span>\n      <span>{{ t('tabs.layout') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'icone'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'icone'\"\n      [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('icone')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.icone')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">verified</span>\n      <span>{{ t('tabs.icone') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'fundo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'fundo'\"\n      [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('fundo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.fundo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">gradient</span>\n      <span>{{ t('tabs.fundo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'animacao'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'animacao'\"\n      [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('animacao')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.animacao')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">animation</span>\n      <span>{{ t('tabs.animacao') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'tooltip'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'tooltip'\"\n      [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.tooltip')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">info</span>\n      <span>{{ t('tabs.tooltip') }}</span>\n    </button>\n  </nav>\n\n  <!-- Quickbar contextual -->\n  @if (effectsForm) {\n    <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n      @switch (activeTab) {\n        @case ('estilo') {\n          <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n        }\n        @case ('layout') {\n          <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n        }\n        @case ('icone') {\n          <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n        }\n        @case ('fundo') {\n          <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n        }\n        @case ('animacao') {\n          <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n        }\n        @case ('tooltip') {\n          <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n        }\n      }\n    </section>\n  }\n\n  <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n  <section class=\"rulefx__body\">\n    <div class=\"rulefx__preview\">\n      <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n      <div\n        class=\"preview__cell\"\n        [ngStyle]=\"computeCellStyle(formValue)\"\n        [ngClass]=\"computeCellClass(formValue)\"\n        (mouseenter)=\"onHoverPreview(true)\"\n        (mouseleave)=\"onHoverPreview(false)\"\n        >\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n\n        <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n          {{ t('preview.sampleText') }}\n        </span>\n\n        @if (formValue.iconBadge?.badgeText) {\n          <span\n            class=\"preview__badge\"\n            [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n            >\n            {{ formValue.iconBadge?.badgeText }}\n          </span>\n        }\n\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n      </div>\n\n      <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n      @if (conditionalSurfacePreviewUnresolved) {\n        <p class=\"preview__diagnostic\" role=\"status\">\n          <mat-icon aria-hidden=\"true\">warning_amber</mat-icon>\n          <span>{{ t('preview.contrastUnresolved') }}</span>\n        </p>\n      }\n    </div>\n\n    <div class=\"rulefx__advanced\">\n      <details class=\"advanced__section\">\n        <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n        <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n          <label class=\"textctl\">\n            <span>{{ t('advanced.description') }}</span>\n            <input type=\"text\" formControlName=\"description\" [placeholder]=\"t('advanced.descriptionPlaceholder')\" />\n          </label>\n          <label class=\"textctl\">\n            <span>{{ t('advanced.cssClass') }}</span>\n            <input type=\"text\" formControlName=\"cssClass\" [placeholder]=\"t('advanced.cssClassPlaceholder')\" />\n          </label>\n          <label class=\"textctl\">\n            <span>{{ t('advanced.inlineStyle') }}</span>\n            <input type=\"text\" formControlName=\"inlineStyle\" [placeholder]=\"t('advanced.inlineStylePlaceholder')\" />\n          </label>\n        </div>\n      </details>\n    </div>\n  </section>\n</div>\n", styles: [".rulefx{background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border-radius:8px;color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));box-shadow:var(--md-sys-elevation-level1, 0 1px 3px rgba(0, 0, 0, .12));padding:12px;min-width:0;scroll-margin-block:140px 120px}.rulefx__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;margin-bottom:8px}.rulefx__title{grid-column:1;margin:0;min-width:0;font-size:1.05rem}.rulefx__subtitle{grid-column:1;margin:0;min-width:0;opacity:.75;font-size:.9rem;overflow-wrap:anywhere}.rulefx__actions{grid-column:2;grid-row:1/span 2;display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;min-width:0}.rulefx__ribbon{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:8px;background:var(--md-sys-color-surface-container, var(--mat-sys-surface-container, #eef1f5));margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 128px;min-width:0;padding:8px 10px;border-radius:8px;background:transparent;color:var(--md-sys-color-on-surface-variant, var(--mat-sys-on-surface-variant, #49454f));cursor:pointer;border:none}.ribbon__tab .material-icons{flex:0 0 auto;overflow:visible;font-size:18px;line-height:1}.ribbon__tab span:not(.material-icons){min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap;line-height:1.2}.ribbon__tab.is-active{background:var(--md-sys-color-secondary-container, var(--mat-sys-secondary-container, #e8def8));color:var(--md-sys-color-on-secondary-container, var(--mat-sys-on-secondary-container, #1d192b));box-shadow:inset 0 0 0 1px var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.rulefx__quickbar{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:10px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));margin-bottom:10px;min-width:0}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:12px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));min-width:0}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:100%;padding:10px 12px;border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.preview__icon{font-size:18px;line-height:1}.preview__text{min-width:0;overflow-wrap:anywhere}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.preview__diagnostic{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;padding:8px 10px;border-radius:6px;background:var(--md-sys-color-error-container, var(--mat-sys-error-container, #ffdad6));color:var(--md-sys-color-on-error-container, var(--mat-sys-on-error-container, #410002));font-size:.82rem;line-height:1.35}.preview__diagnostic mat-icon{flex:0 0 auto;width:18px;height:18px;font-size:18px}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px;min-width:0}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:8px 10px;min-width:0}@media(max-width:760px){.rulefx__header{grid-template-columns:1fr}.rulefx__actions{grid-column:1;grid-row:auto;justify-content:flex-start}.rulefx__body{grid-template-columns:1fr}}@media(max-width:420px){.rulefx{padding:10px}.ribbon__tab{flex-basis:calc(50% - 4px)}.ribbon__tab span:not(.material-icons){white-space:normal}}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "component", type: EstiloEditorComponent, selector: "praxis-effects-estilo-editor", inputs: ["group"] }, { kind: "component", type: LayoutEditorComponent, selector: "praxis-effects-layout-editor", inputs: ["group"] }, { kind: "component", type: IconeBadgeEditorComponent, selector: "praxis-effects-icone-badge-editor", inputs: ["group"] }, { kind: "component", type: FundoEditorComponent, selector: "praxis-effects-fundo-editor", inputs: ["group"] }, { kind: "component", type: AnimacaoEditorComponent, selector: "praxis-effects-animacao-editor", inputs: ["group"] }, { kind: "component", type: TooltipEditorComponent, selector: "praxis-effects-tooltip-editor", inputs: ["group"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RuleEffectsPanelComponent, decorators: [{
             type: Component,
@@ -1229,8 +1737,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         FundoEditorComponent,
                         AnimacaoEditorComponent,
                         TooltipEditorComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rulefx\">\n  <header class=\"rulefx__header\">\n    <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n    <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n    <div class=\"rulefx__actions\">\n      <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon>bookmarks</mat-icon>\n        {{ t('presets.label') }}\n      </button>\n      <mat-menu #presetsMenu=\"matMenu\">\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> Aprovado</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> Alerta</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> Erro</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> Info</button>\n      </mat-menu>\n      <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n        <mat-icon>done</mat-icon>\n        {{ t('actions.apply') }}\n      </button>\n      <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n        <mat-icon>restart_alt</mat-icon>\n        {{ t('actions.reset') }}\n      </button>\n    </div>\n  </header>\n\n  <!-- Ribbon com seis categorias -->\n  <nav\n    class=\"rulefx__ribbon\"\n    aria-label=\"Categorias de efeitos\"\n    role=\"tablist\"\n    (keydown)=\"onTabsKeydown($event)\"\n    >\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'estilo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'estilo'\"\n      [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('estilo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.estilo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">text_format</span>\n      <span>{{ t('tabs.estilo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'layout'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'layout'\"\n      [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('layout')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.layout')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">view_quilt</span>\n      <span>{{ t('tabs.layout') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'icone'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'icone'\"\n      [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('icone')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.icone')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">verified</span>\n      <span>{{ t('tabs.icone') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'fundo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'fundo'\"\n      [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('fundo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.fundo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">gradient</span>\n      <span>{{ t('tabs.fundo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'animacao'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'animacao'\"\n      [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('animacao')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.animacao')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">animation</span>\n      <span>{{ t('tabs.animacao') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'tooltip'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'tooltip'\"\n      [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.tooltip')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">info</span>\n      <span>{{ t('tabs.tooltip') }}</span>\n    </button>\n  </nav>\n\n  <!-- Quickbar contextual -->\n  @if (effectsForm) {\n    <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n      @switch (activeTab) {\n        @case ('estilo') {\n          <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n        }\n        @case ('layout') {\n          <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n        }\n        @case ('icone') {\n          <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n        }\n        @case ('fundo') {\n          <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n        }\n        @case ('animacao') {\n          <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n        }\n        @case ('tooltip') {\n          <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n        }\n      }\n    </section>\n  }\n\n  <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n  <section class=\"rulefx__body\">\n    <div class=\"rulefx__preview\">\n      <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n      <div\n        class=\"preview__cell\"\n        [ngStyle]=\"computeCellStyle(formValue)\"\n        [ngClass]=\"computeCellClass(formValue)\"\n        (mouseenter)=\"onHoverPreview(true)\"\n        (mouseleave)=\"onHoverPreview(false)\"\n        >\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n\n        <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n          Joana Silva \u2014 Ativo desde 2019\n        </span>\n\n        @if (formValue.iconBadge?.badgeText) {\n          <span\n            class=\"preview__badge\"\n            [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n            >\n            {{ formValue.iconBadge?.badgeText }}\n          </span>\n        }\n\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n      </div>\n\n      <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n    </div>\n\n    <div class=\"rulefx__advanced\">\n      <details class=\"advanced__section\">\n        <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n        <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n          <label class=\"textctl\">\n            <span>{{ t('advanced.description') }}</span>\n            <input type=\"text\" formControlName=\"description\" placeholder=\"ex.: Destacar pre\u00E7os altos\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Classe CSS</span>\n            <input type=\"text\" formControlName=\"cssClass\" placeholder=\"ex.: praxis-cell--alert\" />\n          </label>\n          <label class=\"textctl\">\n            <span>Estilo inline</span>\n            <input type=\"text\" formControlName=\"inlineStyle\" placeholder=\"ex.: text-shadow: 0 0 8px rgba(0,255,163,.5)\" />\n          </label>\n        </div>\n      </details>\n    </div>\n  </section>\n</div>\n", styles: [".rulefx{background:linear-gradient(180deg,#171b24,#1e2431);border-radius:14px;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 24px #00000047;padding:12px}.rulefx__header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px}.rulefx__title{margin:0;font-size:1.05rem}.rulefx__subtitle{margin:0;opacity:.75;font-size:.9rem}.rulefx__actions{display:inline-flex;gap:8px;align-items:center}.rulefx__ribbon{display:flex;gap:6px;padding:8px;border-radius:10px;background:linear-gradient(180deg,#202636,#1c2230);margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:transparent;color:#e7ecf6;cursor:pointer;border:none}.ribbon__tab.is-active{background:linear-gradient(180deg,#2a3550,#243149);box-shadow:inset 0 0 0 1px #ffffff0a}.rulefx__quickbar{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;background:linear-gradient(180deg,#202637,#1c2230);margin-bottom:10px}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;background:linear-gradient(180deg,#202637,#1c2230)}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#35d07f14;border:1px solid rgba(53,208,127,.25)}.preview__icon{font-size:18px;line-height:1}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:#151a24;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: EffectRegistryService }], propDecorators: { scope: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [providePraxisI18nConfig(PRAXIS_TABLE_RULE_BUILDER_I18N_CONFIG)], template: "<div class=\"rulefx\">\n  <header class=\"rulefx__header\">\n    <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n    <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n    <div class=\"rulefx__actions\">\n      <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon>bookmarks</mat-icon>\n        {{ t('presets.label') }}\n      </button>\n      <mat-menu #presetsMenu=\"matMenu\">\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> {{ t('presets.aprovado') }}</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> {{ t('presets.alerta') }}</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> {{ t('presets.erro') }}</button>\n        <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> {{ t('presets.info') }}</button>\n      </mat-menu>\n      <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n        <mat-icon>done</mat-icon>\n        {{ t('actions.apply') }}\n      </button>\n      <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n        <mat-icon>restart_alt</mat-icon>\n        {{ t('actions.reset') }}\n      </button>\n    </div>\n  </header>\n\n  <!-- Ribbon com seis categorias -->\n  <nav\n    class=\"rulefx__ribbon\"\n    [attr.aria-label]=\"t('tabs.ariaLabel')\"\n    role=\"tablist\"\n    (keydown)=\"onTabsKeydown($event)\"\n    >\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'estilo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'estilo'\"\n      [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('estilo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.estilo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">text_format</span>\n      <span>{{ t('tabs.estilo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'layout'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'layout'\"\n      [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('layout')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.layout')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">view_quilt</span>\n      <span>{{ t('tabs.layout') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'icone'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'icone'\"\n      [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('icone')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.icone')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">verified</span>\n      <span>{{ t('tabs.icone') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'fundo'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'fundo'\"\n      [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('fundo')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.fundo')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">gradient</span>\n      <span>{{ t('tabs.fundo') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'animacao'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'animacao'\"\n      [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('animacao')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.animacao')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">animation</span>\n      <span>{{ t('tabs.animacao') }}</span>\n    </button>\n    <button\n      class=\"ribbon__tab\"\n      [class.is-active]=\"activeTab === 'tooltip'\"\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"activeTab === 'tooltip'\"\n      [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n      (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n      (mousedown)=\"$event.stopPropagation()\"\n      [matTooltip]=\"t('tabs.tooltip')\"\n      matTooltipPosition=\"below\"\n      >\n      <span class=\"material-icons\">info</span>\n      <span>{{ t('tabs.tooltip') }}</span>\n    </button>\n  </nav>\n\n  <!-- Quickbar contextual -->\n  @if (effectsForm) {\n    <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n      @switch (activeTab) {\n        @case ('estilo') {\n          <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n        }\n        @case ('layout') {\n          <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n        }\n        @case ('icone') {\n          <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n        }\n        @case ('fundo') {\n          <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n        }\n        @case ('animacao') {\n          <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n        }\n        @case ('tooltip') {\n          <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n        }\n      }\n    </section>\n  }\n\n  <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n  <section class=\"rulefx__body\">\n    <div class=\"rulefx__preview\">\n      <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n      <div\n        class=\"preview__cell\"\n        [ngStyle]=\"computeCellStyle(formValue)\"\n        [ngClass]=\"computeCellClass(formValue)\"\n        (mouseenter)=\"onHoverPreview(true)\"\n        (mouseleave)=\"onHoverPreview(false)\"\n        >\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n\n        <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n          {{ t('preview.sampleText') }}\n        </span>\n\n        @if (formValue.iconBadge?.badgeText) {\n          <span\n            class=\"preview__badge\"\n            [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n            >\n            {{ formValue.iconBadge?.badgeText }}\n          </span>\n        }\n\n        @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n          <span\n            class=\"material-icons preview__icon\"\n            [style.color]=\"formValue.iconBadge?.iconColor\"\n            >\n            {{ formValue.iconBadge?.icon }}\n          </span>\n        }\n      </div>\n\n      <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n      @if (conditionalSurfacePreviewUnresolved) {\n        <p class=\"preview__diagnostic\" role=\"status\">\n          <mat-icon aria-hidden=\"true\">warning_amber</mat-icon>\n          <span>{{ t('preview.contrastUnresolved') }}</span>\n        </p>\n      }\n    </div>\n\n    <div class=\"rulefx__advanced\">\n      <details class=\"advanced__section\">\n        <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n        <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n          <label class=\"textctl\">\n            <span>{{ t('advanced.description') }}</span>\n            <input type=\"text\" formControlName=\"description\" [placeholder]=\"t('advanced.descriptionPlaceholder')\" />\n          </label>\n          <label class=\"textctl\">\n            <span>{{ t('advanced.cssClass') }}</span>\n            <input type=\"text\" formControlName=\"cssClass\" [placeholder]=\"t('advanced.cssClassPlaceholder')\" />\n          </label>\n          <label class=\"textctl\">\n            <span>{{ t('advanced.inlineStyle') }}</span>\n            <input type=\"text\" formControlName=\"inlineStyle\" [placeholder]=\"t('advanced.inlineStylePlaceholder')\" />\n          </label>\n        </div>\n      </details>\n    </div>\n  </section>\n</div>\n", styles: [".rulefx{background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border-radius:8px;color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));box-shadow:var(--md-sys-elevation-level1, 0 1px 3px rgba(0, 0, 0, .12));padding:12px;min-width:0;scroll-margin-block:140px 120px}.rulefx__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;margin-bottom:8px}.rulefx__title{grid-column:1;margin:0;min-width:0;font-size:1.05rem}.rulefx__subtitle{grid-column:1;margin:0;min-width:0;opacity:.75;font-size:.9rem;overflow-wrap:anywhere}.rulefx__actions{grid-column:2;grid-row:1/span 2;display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;min-width:0}.rulefx__ribbon{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:8px;background:var(--md-sys-color-surface-container, var(--mat-sys-surface-container, #eef1f5));margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 128px;min-width:0;padding:8px 10px;border-radius:8px;background:transparent;color:var(--md-sys-color-on-surface-variant, var(--mat-sys-on-surface-variant, #49454f));cursor:pointer;border:none}.ribbon__tab .material-icons{flex:0 0 auto;overflow:visible;font-size:18px;line-height:1}.ribbon__tab span:not(.material-icons){min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap;line-height:1.2}.ribbon__tab.is-active{background:var(--md-sys-color-secondary-container, var(--mat-sys-secondary-container, #e8def8));color:var(--md-sys-color-on-secondary-container, var(--mat-sys-on-secondary-container, #1d192b));box-shadow:inset 0 0 0 1px var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.rulefx__quickbar{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:10px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));margin-bottom:10px;min-width:0}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:12px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));min-width:0}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:100%;padding:10px 12px;border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.preview__icon{font-size:18px;line-height:1}.preview__text{min-width:0;overflow-wrap:anywhere}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.preview__diagnostic{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;padding:8px 10px;border-radius:6px;background:var(--md-sys-color-error-container, var(--mat-sys-error-container, #ffdad6));color:var(--md-sys-color-on-error-container, var(--mat-sys-on-error-container, #410002));font-size:.82rem;line-height:1.35}.preview__diagnostic mat-icon{flex:0 0 auto;width:18px;height:18px;font-size:18px}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px;min-width:0}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:8px 10px;min-width:0}@media(max-width:760px){.rulefx__header{grid-template-columns:1fr}.rulefx__actions{grid-column:1;grid-row:auto;justify-content:flex-start}.rulefx__body{grid-template-columns:1fr}}@media(max-width:420px){.rulefx{padding:10px}.ribbon__tab{flex-basis:calc(50% - 4px)}.ribbon__tab span:not(.material-icons){white-space:normal}}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"] }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: EffectRegistryService }, { type: i1.PraxisI18nService }], propDecorators: { labels: [{
+                type: Input
+            }], scope: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -1331,6 +1841,10 @@ function toCellClassAndStyle(effect, options) {
     return { classList, style };
 }
 
+const ruleAnimationPresetEnum = [
+    ...Object.keys(RULE_ANIMATION_PRESETS),
+    ...Object.keys(RULE_ANIMATION_PRESET_ALIASES),
+];
 const ruleAddSchema = {
     type: 'object',
     required: ['ruleId', 'scope'],
@@ -1415,20 +1929,7 @@ const animationSetSchema = {
             properties: {
                 enabled: { type: 'boolean' },
                 preset: {
-                    enum: [
-                        'info-soft',
-                        'success-confirm',
-                        'warning-attention',
-                        'critical-alert',
-                        'audit-review',
-                        'sync-pending',
-                        'sla-warning',
-                        'sla-breach',
-                        'risk-elevated',
-                        'risk-critical',
-                        'audit-warning',
-                        'sync-warning',
-                    ],
+                    enum: ruleAnimationPresetEnum,
                 },
                 type: { enum: ['pulse', 'blink', 'grow', 'fade', 'slide-in', 'border-pulse'] },
                 trigger: {
@@ -1468,9 +1969,10 @@ const PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST = {
     runtimeInputs: [
         { name: 'scope', type: 'RuleScope', description: 'Effect scope: cell, row, column or table.' },
         { name: 'value', type: 'RuleEffectDefinition | undefined', description: 'Initial effect definition hydrated into the panel form.' },
+        { name: 'labels', type: 'Record<string, string>', description: 'Host-owned partial panel copy overrides merged with default labels for i18n/theming context; not part of the rule effect payload.' },
         { name: 'valueChange', type: 'RuleEffectDefinition', description: 'Debounced normalized effect payload emitted by the editor.' },
         { name: 'apply', type: 'void', description: 'Emitted when the user applies the current effect payload.' },
-        { name: 'reset', type: 'void', description: 'Emitted when the user resets the panel form.' },
+        { name: 'reset', type: 'void', description: 'Emitted when the user resets the panel form back to canonical defaults.' },
     ],
     editableTargets: [
         { kind: 'rule', resolver: 'table-rule-by-stable-id', description: 'Table conditional rule entry keyed by stable rule id before it is passed to praxis-table.' },
@@ -1731,8 +2233,70 @@ const PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST = {
     ],
 };
 
+/** Metadata for Praxis Table Rule Builder component */
+const PRAXIS_TABLE_RULE_BUILDER_COMPONENT_METADATA = {
+    id: 'praxis-table-rule-builder',
+    selector: 'praxis-rule-effects-panel',
+    component: RuleEffectsPanelComponent,
+    friendlyName: 'Praxis Table Rule Builder',
+    description: 'Editor for table rule effects and conditional styling.',
+    inputs: [
+        {
+            name: 'scope',
+            type: 'RuleScope',
+            label: 'Escopo',
+            description: 'Escopo do efeito (cell, row, column, table).',
+        },
+        {
+            name: 'value',
+            type: 'RuleEffectDefinition | undefined',
+            label: 'Valor',
+            description: 'Valor inicial para hidratar o formulário.',
+        },
+        {
+            name: 'labels',
+            type: 'Record<string, string>',
+            label: 'Rótulos',
+            description: 'Overrides parciais de texto do painel, aplicados acima do catálogo i18n da lib sem alterar o payload de regras.',
+        },
+    ],
+    outputs: [
+        {
+            name: 'valueChange',
+            type: 'RuleEffectDefinition',
+            label: 'Mudança de valor',
+            description: 'Disparado quando o valor consolidado é atualizado.',
+        },
+        {
+            name: 'apply',
+            type: 'void',
+            label: 'Aplicar',
+            description: 'Disparado quando o usuário aplica as mudanças.',
+        },
+        {
+            name: 'reset',
+            type: 'void',
+            label: 'Resetar',
+            description: 'Disparado quando o usuário redefine o formulário para os defaults canônicos.',
+        },
+    ],
+    tags: ['widget', 'rules', 'table', 'configurable'],
+    lib: '@praxisui/table-rule-builder',
+};
+/** Provider para auto-registrar metadados do componente Table Rule Builder. */
+function providePraxisTableRuleBuilderMetadata() {
+    return {
+        provide: ENVIRONMENT_INITIALIZER,
+        multi: true,
+        useFactory: (registry) => () => {
+            registry.register(PRAXIS_TABLE_RULE_BUILDER_COMPONENT_METADATA);
+        },
+        deps: [ComponentMetadataRegistry],
+    };
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AnimacaoEditorComponent, DEFAULT_EFFECT_PRESETS, EffectRegistryService, EstiloEditorComponent, FundoEditorComponent, IconeBadgeEditorComponent, LayoutEditorComponent, PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST, RuleEffectsPanelComponent, TooltipEditorComponent, toCellClassAndStyle };
+export { AnimacaoEditorComponent, DEFAULT_EFFECT_PRESETS, EffectRegistryService, EstiloEditorComponent, FundoEditorComponent, IconeBadgeEditorComponent, LayoutEditorComponent, PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST, PRAXIS_TABLE_RULE_BUILDER_COMPONENT_METADATA, PRAXIS_TABLE_RULE_BUILDER_I18N_CONFIG, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE, PRAXIS_TABLE_RULE_BUILDER_LABEL_KEYS, RuleEffectsPanelComponent, TooltipEditorComponent, providePraxisTableRuleBuilderMetadata, toCellClassAndStyle };