@praxisui/table-rule-builder 8.0.0-beta.20 → 8.0.0-beta.21

package/README.md

@@ -31,6 +31,14 @@ Peers (Angular v20): `@angular/core`, `@angular/common`, `@angular/forms`, `@ang
 - Contrato runtime atual: animação é suportada em `rowConditionalRenderers` e `columns[].conditionalRenderers` (com precedência `rule.animation > rule.renderer.animation` e first-match por efeito real).
 - Tipos: `RuleEffectDefinition`, `RuleScope`
 
+## Conditional effects alignment
+
+`RuleEffectsPanelComponent` edits one aggregate `RuleEffectDefinition` because a visual rule can combine style, layout, icon, background, animation and tooltip in a single authoring surface.
+
+When the panel is embedded by `@praxisui/table`, the table rule entry stores the visual payload as `effects: RuleEffectDefinition[]`. That keeps the persisted rule aligned with the platform shape `PraxisRuntimeConditionalEffectRule<RuleEffectDefinition>` while preserving `@praxisui/table` as the owner of table placement into `rowConditionalRenderers`, `columns[].conditionalRenderers` and conditional style surfaces.
+
+Existing singular `effects: RuleEffectDefinition` payloads are accepted on load and normalized back to the canonical array on apply.
+
 ## Testes
 
 - Target oficial no workspace: `ng test praxis-table-rule-builder --watch=false --browsers=ChromeHeadless`

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

@@ -22,6 +22,7 @@ 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';
+import { PdxColorPickerComponent } from '@praxisui/dynamic-fields';
 
 const RULE_ANIMATION_TYPE_SET = new Set([
     'pulse',
@@ -240,15 +241,27 @@ class EstiloEditorComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EstiloEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", 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>
+      <pdx-color-picker
+        label="Cor do texto"
+        formControlName="color"
+        [format]="'hex'"
+        [preview]="true"
+        [views]="['gradient', 'palette']"
+        [paletteSettings]="{ preset: 'material', columns: 8 }"
+        [gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
+        [popupSettings]="{ width: 340 }"
+      ></pdx-color-picker>
 
-      <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>
+      <pdx-color-picker
+        label="Cor de fundo do texto"
+        formControlName="bgColor"
+        [format]="'hex'"
+        [preview]="true"
+        [views]="['gradient', 'palette']"
+        [paletteSettings]="{ preset: 'material', columns: 8 }"
+        [gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
+        [popupSettings]="{ width: 340 }"
+      ></pdx-color-picker>
 
       <div class="toggles">
         <mat-button-toggle-group multiple>
@@ -289,7 +302,7 @@ class EstiloEditorComponent {
         </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 });
+  `, 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"] }, { 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: "20.3.17", ngImport: i0, type: EstiloEditorComponent, decorators: [{
             type: Component,
@@ -301,17 +314,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         MatButtonToggleModule,
                         MatIconModule,
                         MatSliderModule,
+                        PdxColorPickerComponent,
                     ], 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>
+      <pdx-color-picker
+        label="Cor do texto"
+        formControlName="color"
+        [format]="'hex'"
+        [preview]="true"
+        [views]="['gradient', 'palette']"
+        [paletteSettings]="{ preset: 'material', columns: 8 }"
+        [gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
+        [popupSettings]="{ width: 340 }"
+      ></pdx-color-picker>
 
-      <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>
+      <pdx-color-picker
+        label="Cor de fundo do texto"
+        formControlName="bgColor"
+        [format]="'hex'"
+        [preview]="true"
+        [views]="['gradient', 'palette']"
+        [paletteSettings]="{ preset: 'material', columns: 8 }"
+        [gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
+        [popupSettings]="{ width: 340 }"
+      ></pdx-color-picker>
 
       <div class="toggles">
         <mat-button-toggle-group multiple>

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@praxisui/table-rule-builder",
-  "version": "8.0.0-beta.20",
+  "version": "8.0.0-beta.21",
   "description": "Praxis Table Rule Builder: UI components and engine utils for table rules",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",
     "@angular/forms": "^20.0.0",
     "@angular/material": "^20.0.0",
-    "@praxisui/ai": "^8.0.0-beta.20",
-    "@praxisui/core": "^8.0.0-beta.20",
+    "@praxisui/ai": "^8.0.0-beta.21",
+    "@praxisui/core": "^8.0.0-beta.21",
+    "@praxisui/dynamic-fields": "^8.0.0-beta.21",
     "rxjs": "~7.8.0"
   },
   "dependencies": {