@praxisui/table-rule-builder 1.0.0-beta.10

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

@@ -0,0 +1,956 @@
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component, Injectable, EventEmitter, Output } from '@angular/core';
+import * as i3$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { auditTime, takeUntil } from 'rxjs/operators';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i4$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i7 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i4 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i6 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+
+const DEFAULT_EFFECT_PRESETS = {
+    aprovado: {
+        scope: 'row',
+        estilo: { color: '#eafff5', bold: true },
+        iconBadge: {
+            icon: 'check_circle',
+            iconColor: '#35D07F',
+            iconPos: 'before',
+            badgeText: 'Aprovado',
+            badgeStyle: 'soft',
+            badgeColor: '#2a8455',
+        },
+        background: { color: 'rgba(53,208,127,0.08)' },
+        layout: { border: 'left', borderColor: '#35D07F', borderWidth: 3 },
+    },
+    alerta: {
+        scope: 'row',
+        estilo: { color: '#fff8e1', bold: true },
+        iconBadge: {
+            icon: 'warning',
+            iconColor: '#FFC107',
+            iconPos: 'before',
+            badgeText: 'Atenção',
+            badgeStyle: 'outline',
+            badgeColor: '#FFC107',
+        },
+        background: { color: 'rgba(255,193,7,0.12)' },
+    },
+    erro: {
+        scope: 'row',
+        estilo: { color: '#ffeaea', bold: true },
+        iconBadge: {
+            icon: 'error',
+            iconColor: '#EF5350',
+            iconPos: 'before',
+            badgeText: 'Erro',
+            badgeStyle: 'solid',
+            badgeColor: '#EF5350',
+        },
+        background: { color: 'rgba(239,83,80,0.10)' },
+    },
+    info: {
+        scope: 'row',
+        iconBadge: { icon: 'info', iconColor: '#64B5F6', iconPos: 'before' },
+        background: { color: 'rgba(100,181,246,0.10)' },
+    },
+};
+
+class EstiloEditorComponent {
+    group;
+    // Public for template (strictTemplates): used by mat-slider
+    formatOpacity(v) { return (v ?? 0).toFixed(2); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EstiloEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", 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">
+      <mat-form-field appearance="outline">
+        <mat-label>Cor do texto</mat-label>
+        <input matInput type="text" formControlName="color" placeholder="#E7ECF6" />
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Cor de fundo do texto</mat-label>
+        <input matInput type="text" formControlName="bgColor" placeholder="#122033" />
+      </mat-form-field>
+
+      <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-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-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-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>
+        </select>
+      </mat-form-field>
+
+      <div class="sliders">
+        <label class="slider">
+          <span>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>
+          <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: CommonModule }, { 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],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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EstiloEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-effects-estilo-editor', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatButtonToggleModule,
+                        MatIconModule,
+                        MatSliderModule,
+                    ], template: `
+    <div class="estilo-grid" role="group" aria-label="Editor de estilo" [formGroup]="group">
+      <mat-form-field appearance="outline">
+        <mat-label>Cor do texto</mat-label>
+        <input matInput type="text" formControlName="color" placeholder="#E7ECF6" />
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Cor de fundo do texto</mat-label>
+        <input matInput type="text" formControlName="bgColor" placeholder="#122033" />
+      </mat-form-field>
+
+      <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-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-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-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>
+        </select>
+      </mat-form-field>
+
+      <div class="sliders">
+        <label class="slider">
+          <span>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>
+          <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: [{
+                type: Input
+            }] } });
+
+class LayoutEditorComponent {
+    group;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", 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="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">
+          <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>
+          <mat-button-toggle value="top"><mat-icon>border_top</mat-icon></mat-button-toggle>
+          <mat-button-toggle value="bottom"><mat-icon>border_bottom</mat-icon></mat-button-toggle>
+          <mat-button-toggle value="all"><mat-icon>border_all</mat-icon></mat-button-toggle>
+        </mat-button-toggle-group>
+      </div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>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>
+        <input matInput type="number" formControlName="borderWidth" placeholder="2" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>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">
+          <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>
+        </mat-button-toggle-group>
+      </div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Elevação (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: CommonModule }, { 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],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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LayoutEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-effects-layout-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatIconModule], template: `
+    <div class="layout-grid" role="group" aria-label="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">
+          <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>
+          <mat-button-toggle value="top"><mat-icon>border_top</mat-icon></mat-button-toggle>
+          <mat-button-toggle value="bottom"><mat-icon>border_bottom</mat-icon></mat-button-toggle>
+          <mat-button-toggle value="all"><mat-icon>border_all</mat-icon></mat-button-toggle>
+        </mat-button-toggle-group>
+      </div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>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>
+        <input matInput type="number" formControlName="borderWidth" placeholder="2" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>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">
+          <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>
+        </mat-button-toggle-group>
+      </div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Elevação (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: [{
+                type: Input
+            }] } });
+
+class IconeBadgeEditorComponent {
+    group;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: IconeBadgeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", 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">
+      <mat-form-field appearance="outline">
+        <mat-label>Ícone (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>
+        <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>
+        </mat-button-toggle-group>
+      </div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>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>
+        <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>
+        </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: CommonModule }, { 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],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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: IconeBadgeEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-effects-icone-badge-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatIconModule], template: `
+    <div class="icone-grid" role="group" aria-label="Editor de ícone e badge" [formGroup]="group">
+      <mat-form-field appearance="outline">
+        <mat-label>Ícone (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>
+        <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>
+        </mat-button-toggle-group>
+      </div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>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>
+        <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>
+        </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: [{
+                type: Input
+            }] } });
+
+class FundoEditorComponent {
+    group;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FundoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", 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">
+      <mat-form-field appearance="outline">
+        <mat-label>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>
+        <input matInput type="text" formControlName="gradient" placeholder="linear-gradient(180deg, #202637, #1c2230)" />
+      </mat-form-field>
+
+      <label class="slider">
+        <span>Transparência</span>
+        <mat-slider min="0" max="100" step="5">
+          <input matSliderThumb formControlName="alpha" />
+        </mat-slider>
+      </label>
+      <label class="slider">
+        <span>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: CommonModule }, { 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],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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FundoEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-effects-fundo-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSliderModule], template: `
+    <div class="fundo-grid" role="group" aria-label="Editor de fundo" [formGroup]="group">
+      <mat-form-field appearance="outline">
+        <mat-label>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>
+        <input matInput type="text" formControlName="gradient" placeholder="linear-gradient(180deg, #202637, #1c2230)" />
+      </mat-form-field>
+
+      <label class="slider">
+        <span>Transparência</span>
+        <mat-slider min="0" max="100" step="5">
+          <input matSliderThumb formControlName="alpha" />
+        </mat-slider>
+      </label>
+      <label class="slider">
+        <span>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: [{
+                type: Input
+            }] } });
+
+class AnimacaoEditorComponent {
+    group;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AnimacaoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", 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">
+      <mat-form-field appearance="outline">
+        <mat-label>Tipo</mat-label>
+        <select matNativeControl formControlName="type" aria-label="Tipo de animação">
+          <option value="pulse">Pulse</option>
+          <option value="blink">Blink</option>
+          <option value="grow">Grow</option>
+          <option value="fade">Fade</option>
+          <option value="slide-in">Slide In</option>
+        </select>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Duração (ms)</mat-label>
+        <input matInput type="number" formControlName="durationMs" placeholder="800" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Delay (ms)</mat-label>
+        <input matInput type="number" formControlName="delayMs" placeholder="0" />
+      </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="onChange">Ao mudar</option>
+          <option value="onAppear">Ao aparecer</option>
+          <option value="onHover">Ao passar o mouse</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="once">Uma vez</option>
+          <option value="loop">Loop</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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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],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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AnimacaoEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-effects-animacao-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
+    <div class="anim-grid" role="group" aria-label="Editor de animação" [formGroup]="group">
+      <mat-form-field appearance="outline">
+        <mat-label>Tipo</mat-label>
+        <select matNativeControl formControlName="type" aria-label="Tipo de animação">
+          <option value="pulse">Pulse</option>
+          <option value="blink">Blink</option>
+          <option value="grow">Grow</option>
+          <option value="fade">Fade</option>
+          <option value="slide-in">Slide In</option>
+        </select>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Duração (ms)</mat-label>
+        <input matInput type="number" formControlName="durationMs" placeholder="800" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Delay (ms)</mat-label>
+        <input matInput type="number" formControlName="delayMs" placeholder="0" />
+      </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="onChange">Ao mudar</option>
+          <option value="onAppear">Ao aparecer</option>
+          <option value="onHover">Ao passar o mouse</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="once">Uma vez</option>
+          <option value="loop">Loop</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}\n"] }]
+        }], propDecorators: { group: [{
+                type: Input
+            }] } });
+
+class TooltipEditorComponent {
+    group;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TooltipEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", 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">
+      <mat-form-field appearance="outline" class="full">
+        <mat-label>Texto</mat-label>
+        <input matInput type="text" formControlName="text" placeholder="Detalhes da célula" />
+      </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>
+        </select>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>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>
+        <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: CommonModule }, { 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],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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TooltipEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-effects-tooltip-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
+    <div class="tooltip-grid" role="group" aria-label="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-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>
+        </select>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>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>
+        <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: [{
+                type: Input
+            }] } });
+
+class EffectRegistryService {
+    plugins = [];
+    register(plugin) {
+        if (this.plugins.find((p) => p.id === plugin.id))
+            return; // avoid duplicates
+        this.plugins.push(plugin);
+        this.plugins.sort((a, b) => a.order - b.order);
+    }
+    list() {
+        return this.plugins.slice();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EffectRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EffectRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EffectRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class RuleEffectsPanelComponent {
+    fb;
+    registry;
+    // 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',
+    };
+    t(key) { return this.labels[key] ?? key; }
+    scope = 'row';
+    _value;
+    set value(v) {
+        this._value = v;
+        if (v && this.effectsForm)
+            this.patchForm(v);
+    }
+    get value() { return this._value; }
+    valueChange = new EventEmitter();
+    apply = new EventEmitter();
+    reset = new EventEmitter();
+    activeTab = 'estilo';
+    effectsForm;
+    destroy$ = new Subject();
+    isHovering = false;
+    tabOrder = ['estilo', 'layout', 'icone', 'fundo', 'animacao', 'tooltip'];
+    constructor(fb, registry) {
+        this.fb = fb;
+        this.registry = registry;
+    }
+    ngOnInit() {
+        // Register built-in editors for the registry (extensible)
+        this.registry.register({ id: 'estilo', icon: 'text_format', label: this.t('tabs.estilo'), order: 1 });
+        this.registry.register({ id: 'layout', icon: 'view_quilt', label: this.t('tabs.layout'), order: 2 });
+        this.registry.register({ id: 'icone', icon: 'verified', label: this.t('tabs.icone'), order: 3 });
+        this.registry.register({ id: 'fundo', icon: 'gradient', label: this.t('tabs.fundo'), order: 4 });
+        this.registry.register({ id: 'animacao', icon: 'animation', label: this.t('tabs.animacao'), order: 5 });
+        this.registry.register({ id: 'tooltip', icon: 'info', label: this.t('tabs.tooltip'), order: 6 });
+        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],
+            }),
+            layout: this.fb.group({
+                border: ['none'],
+                borderColor: ['#487BFF'],
+                borderWidth: [2],
+                padding: [6],
+                align: ['start'],
+                elevation: [6],
+            }),
+            iconBadge: this.fb.group({
+                icon: ['check_circle'],
+                iconColor: ['#35D07F'],
+                iconPos: ['before'],
+                badgeText: [''],
+                badgeStyle: ['soft'],
+                badgeColor: ['#2a8455'],
+            }),
+            background: this.fb.group({
+                color: ['#122033'],
+                gradient: [''],
+                alpha: [0],
+                blur: [0],
+            }),
+            animation: this.fb.group({
+                type: ['pulse'],
+                durationMs: [800],
+                trigger: ['onChange'],
+                repeat: ['once'],
+                delayMs: [0],
+            }),
+            tooltip: this.fb.group({
+                text: [''],
+                position: ['bottom'],
+                bgColor: ['#2E3142'],
+                delayMs: [300],
+            }),
+            cssClass: [''],
+            inlineStyle: [''],
+        });
+        this.effectsForm.valueChanges.pipe(auditTime(200), takeUntil(this.destroy$)).subscribe((formValue) => {
+            const value = { scope: this.scope, ...formValue };
+            this.valueChange.emit(value);
+        });
+        if (this._value)
+            this.patchForm(this._value);
+    }
+    patchForm(v) {
+        this.effectsForm.patchValue(v, { emitEvent: false });
+    }
+    setTab(tab) {
+        this.activeTab = tab;
+    }
+    applyPreset(key) {
+        const preset = DEFAULT_EFFECT_PRESETS[key];
+        if (!preset)
+            return;
+        const merged = { ...preset, scope: this.scope };
+        this.patchForm(merged);
+        this.valueChange.emit(merged);
+    }
+    onApply() {
+        this.apply.emit();
+    }
+    onReset() {
+        this.effectsForm.reset();
+        this.reset.emit();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // Typed subgroup getters for strict template type checking
+    get estiloGroup() { return this.effectsForm.get('estilo'); }
+    get layoutGroup() { return this.effectsForm.get('layout'); }
+    get iconBadgeGroup() { return this.effectsForm.get('iconBadge'); }
+    get backgroundGroup() { return this.effectsForm.get('background'); }
+    get animationGroup() { return this.effectsForm.get('animation'); }
+    get tooltipGroup() { return this.effectsForm.get('tooltip'); }
+    // Safe access for template — avoids TS casts in templates
+    get formValue() {
+        const v = (this.effectsForm?.value || {});
+        return { scope: this.scope, ...v };
+    }
+    // A11y: keyboard navigation for tabs
+    onTabsKeydown(event) {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
+            return;
+        event.preventDefault();
+        const idx = this.tabOrder.indexOf(this.activeTab);
+        const next = event.key === 'ArrowRight' ? (idx + 1) % this.tabOrder.length : (idx - 1 + this.tabOrder.length) % this.tabOrder.length;
+        this.activeTab = this.tabOrder[next];
+    }
+    onHoverPreview(over) {
+        this.isHovering = over;
+    }
+    // Preview helpers
+    computeTextStyle(v) {
+        const s = v?.estilo || {};
+        const size = s.fontScale ? `calc(1rem + ${s.fontScale * 0.1}rem)` : '1rem';
+        const transform = s.transform ?? 'none';
+        return {
+            color: s.color || null,
+            fontWeight: s.bold ? 600 : 400,
+            fontStyle: s.italic ? 'italic' : 'normal',
+            textDecoration: s.underline ? 'underline' : 'none',
+            opacity: s.opacity ?? 1,
+            fontSize: size,
+            textTransform: transform === 'uppercase'
+                ? 'uppercase'
+                : transform === 'lowercase'
+                    ? 'lowercase'
+                    : transform === 'capitalize'
+                        ? 'capitalize'
+                        : 'none',
+        };
+    }
+    computeCellStyle(v) {
+        const b = v?.background || {};
+        const ly = v?.layout || {};
+        const bg = b.gradient ? b.gradient : (b.color || 'transparent');
+        const alpha = (b.alpha ?? 0) / 100;
+        const bgWithAlpha = b.color ? `color-mix(in srgb, ${b.color} ${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}`;
+        const base = {
+            background: bgWithAlpha,
+            filter: b.blur ? `blur(${b.blur}px)` : 'none',
+            padding: (ly.padding ?? 6) + 'px',
+            boxShadow: ly.elevation ? `0 ${Math.min(ly.elevation, 24)}px ${Math.min(ly.elevation, 24)}px rgba(0,0,0,.25)` : 'none',
+            justifyContent: ly.align === 'center' ? 'center' : ly.align === 'end' ? 'flex-end' : 'flex-start',
+        };
+        if (ly.border === 'all')
+            base.border = borderStyle;
+        if (ly.border === 'left')
+            base.borderLeft = borderStyle;
+        if (ly.border === 'right')
+            base.borderRight = borderStyle;
+        if (ly.border === 'top')
+            base.borderTop = borderStyle;
+        if (ly.border === 'bottom')
+            base.borderBottom = borderStyle;
+        return base;
+    }
+    computeCellClass(v) {
+        const anim = v?.animation;
+        const triggerHover = anim?.trigger === 'onHover';
+        const triggerAppear = anim?.trigger === 'onAppear';
+        const triggerChange = anim?.trigger === 'onChange';
+        const repeatClass = anim?.repeat === 'loop' ? 'anim--loop' : 'anim--once';
+        const active = (triggerHover && this.isHovering) ||
+            triggerAppear ||
+            triggerChange; // we don’t track changes here, preview is always ‘changed’
+        return {
+            [`anim--${anim?.type}`]: !!anim?.type && active,
+            [repeatClass]: !!anim?.type && active,
+            'icon--overlay': v?.iconBadge?.icon && v?.iconBadge?.iconPos === 'overlay',
+        };
+    }
+    badgeBackground(v) {
+        const s = v?.iconBadge;
+        if (!s?.badgeText)
+            return null;
+        if (s.badgeStyle === 'solid')
+            return s.badgeColor || '#444';
+        if (s.badgeStyle === 'soft')
+            return `linear-gradient(180deg, ${s.badgeColor || '#444'}, #00000055)`;
+        if (s.badgeStyle === 'outline')
+            return 'transparent';
+        return null;
+    }
+    badgeBorder(v) {
+        const s = v?.iconBadge;
+        return s?.badgeStyle === 'outline' ? s.badgeColor || '#777' : '#0000';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RuleEffectsPanelComponent, deps: [{ token: i1.FormBuilder }, { token: EffectRegistryService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", 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 [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\">\n        <mat-icon>bookmarks</mat-icon>\n        {{ t('presets.label') }}\n      </button>\n      <mat-menu #presetsMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> Aprovado</button>\n        <button mat-menu-item (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> Alerta</button>\n        <button mat-menu-item (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> Erro</button>\n        <button mat-menu-item (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> Info</button>\n      </mat-menu>\n      <button mat-flat-button color=\"primary\" (click)=\"onApply()\" [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 (click)=\"onReset()\" [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)=\"setTab('estilo')\"\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)=\"setTab('layout')\"\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)=\"setTab('icone')\"\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)=\"setTab('fundo')\"\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)=\"setTab('animacao')\"\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)=\"setTab('tooltip')\"\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  <section class=\"rulefx__quickbar\" aria-live=\"polite\" *ngIf=\"effectsForm\">\n    <ng-container [ngSwitch]=\"activeTab\">\n      <ng-container *ngSwitchCase=\"'estilo'\">\n        <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'layout'\">\n        <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'icone'\">\n        <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'fundo'\">\n        <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'animacao'\">\n        <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'tooltip'\">\n        <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n      </ng-container>\n    </ng-container>\n  </section>\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        <span\n          *ngIf=\"formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before'\"\n          class=\"material-icons preview__icon\"\n          [style.color]=\"formValue.iconBadge?.iconColor\"\n        >\n          {{ formValue.iconBadge?.icon }}\n        </span>\n\n        <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n          Joana Silva \u2014 Ativo desde 2019\n        </span>\n\n        <span\n          *ngIf=\"formValue.iconBadge?.badgeText\"\n          class=\"preview__badge\"\n          [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n        >\n          {{ formValue.iconBadge?.badgeText }}\n        </span>\n\n        <span\n          *ngIf=\"formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after'\"\n          class=\"material-icons preview__icon\"\n          [style.color]=\"formValue.iconBadge?.iconColor\"\n        >\n          {{ formValue.iconBadge?.icon }}\n        </span>\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>{{ 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--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}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{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(6px);opacity:0}to{transform:translateY(0);opacity:1}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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],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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RuleEffectsPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-rule-effects-panel', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        MatMenuModule,
+                        MatButtonToggleModule,
+                        EstiloEditorComponent,
+                        LayoutEditorComponent,
+                        IconeBadgeEditorComponent,
+                        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 [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\">\n        <mat-icon>bookmarks</mat-icon>\n        {{ t('presets.label') }}\n      </button>\n      <mat-menu #presetsMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> Aprovado</button>\n        <button mat-menu-item (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> Alerta</button>\n        <button mat-menu-item (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> Erro</button>\n        <button mat-menu-item (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> Info</button>\n      </mat-menu>\n      <button mat-flat-button color=\"primary\" (click)=\"onApply()\" [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 (click)=\"onReset()\" [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)=\"setTab('estilo')\"\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)=\"setTab('layout')\"\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)=\"setTab('icone')\"\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)=\"setTab('fundo')\"\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)=\"setTab('animacao')\"\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)=\"setTab('tooltip')\"\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  <section class=\"rulefx__quickbar\" aria-live=\"polite\" *ngIf=\"effectsForm\">\n    <ng-container [ngSwitch]=\"activeTab\">\n      <ng-container *ngSwitchCase=\"'estilo'\">\n        <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'layout'\">\n        <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'icone'\">\n        <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'fundo'\">\n        <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'animacao'\">\n        <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'tooltip'\">\n        <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n      </ng-container>\n    </ng-container>\n  </section>\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        <span\n          *ngIf=\"formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before'\"\n          class=\"material-icons preview__icon\"\n          [style.color]=\"formValue.iconBadge?.iconColor\"\n        >\n          {{ formValue.iconBadge?.icon }}\n        </span>\n\n        <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n          Joana Silva \u2014 Ativo desde 2019\n        </span>\n\n        <span\n          *ngIf=\"formValue.iconBadge?.badgeText\"\n          class=\"preview__badge\"\n          [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n        >\n          {{ formValue.iconBadge?.badgeText }}\n        </span>\n\n        <span\n          *ngIf=\"formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after'\"\n          class=\"material-icons preview__icon\"\n          [style.color]=\"formValue.iconBadge?.iconColor\"\n        >\n          {{ formValue.iconBadge?.icon }}\n        </span>\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>{{ 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--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}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{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(6px);opacity:0}to{transform:translateY(0);opacity:1}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: EffectRegistryService }], propDecorators: { scope: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], apply: [{
+                type: Output
+            }], reset: [{
+                type: Output
+            }] } });
+
+function toCellClassAndStyle(effect) {
+    const classList = [];
+    const style = {};
+    // Advanced class and inline style
+    if (effect.cssClass)
+        classList.push(effect.cssClass);
+    if (effect.inlineStyle)
+        style['cssText'] = effect.inlineStyle;
+    // Background
+    const b = effect.background || {};
+    const ly = effect.layout || {};
+    const bg = b.gradient ? b.gradient : (b.color || 'transparent');
+    const alpha = (b.alpha ?? 0) / 100;
+    const bgWithAlpha = b.color ? `color-mix(in srgb, ${b.color} ${100 - alpha * 100}%, transparent)` : bg;
+    style['background'] = bgWithAlpha;
+    if (b.blur)
+        style['filter'] = `blur(${b.blur}px)`;
+    // Layout
+    if (ly.padding != null)
+        style['padding'] = `${ly.padding}px`;
+    if (ly.elevation)
+        style['box-shadow'] = `0 ${Math.min(ly.elevation, 24)}px ${Math.min(ly.elevation, 24)}px rgba(0,0,0,.25)`;
+    if (ly.align)
+        style['justify-content'] = ly.align === 'center' ? 'center' : ly.align === 'end' ? 'flex-end' : 'flex-start';
+    const borderColor = ly.borderColor || 'transparent';
+    const borderWidth = (ly.borderWidth ?? 0) + 'px';
+    const borderStyle = ly.border === 'none' ? 'none' : `${borderWidth} solid ${borderColor}`;
+    switch (ly.border) {
+        case 'all':
+            style['border'] = borderStyle;
+            break;
+        case 'left':
+            style['border-left'] = borderStyle;
+            break;
+        case 'right':
+            style['border-right'] = borderStyle;
+            break;
+        case 'top':
+            style['border-top'] = borderStyle;
+            break;
+        case 'bottom':
+            style['border-bottom'] = borderStyle;
+            break;
+    }
+    // Text (estilo)
+    const s = effect.estilo || {};
+    if (s.color)
+        style['color'] = s.color;
+    if (s.bgColor)
+        style['background-color'] = s.bgColor;
+    if (s.bold)
+        style['font-weight'] = '600';
+    if (s.italic)
+        style['font-style'] = 'italic';
+    if (s.underline)
+        style['text-decoration'] = 'underline';
+    if (s.opacity != null)
+        style['opacity'] = String(s.opacity);
+    if (s.transform)
+        style['text-transform'] = s.transform;
+    if (s.fontScale && s.fontScale !== 0)
+        style['font-size'] = `calc(1rem + ${s.fontScale * 0.1}rem)`;
+    // Icon overlay class
+    if (effect.iconBadge?.iconPos === 'overlay')
+        classList.push('icon--overlay');
+    // Animation
+    const anim = effect.animation;
+    if (anim?.type) {
+        classList.push(`anim--${anim.type}`);
+        classList.push(anim.repeat === 'loop' ? 'anim--loop' : 'anim--once');
+        if (anim.durationMs)
+            style['animation-duration'] = `${anim.durationMs}ms`;
+        if (anim.delayMs)
+            style['animation-delay'] = `${anim.delayMs}ms`;
+    }
+    return { classList, style };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AnimacaoEditorComponent, DEFAULT_EFFECT_PRESETS, EffectRegistryService, EstiloEditorComponent, FundoEditorComponent, IconeBadgeEditorComponent, LayoutEditorComponent, RuleEffectsPanelComponent, TooltipEditorComponent, toCellClassAndStyle };
+//# sourceMappingURL=praxisui-table-rule-builder.mjs.map