@praxisui/table-rule-builder 9.0.0-beta.27 → 9.0.0-beta.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +12 -0
  2. package/ai/component-registry.json +17 -7
  3. package/fesm2022/praxisui-table-rule-builder.mjs +769 -278
  4. package/package.json +4 -4
  5. package/types/praxisui-table-rule-builder.d.ts +40 -6
package/fesm2022/praxisui-table-rule-builder.mjs CHANGED
@@ -1,29 +1,30 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Input, ChangeDetectionStrategy, Component, Injectable, EventEmitter, Output, ENVIRONMENT_INITIALIZER } from '@angular/core';
3
- import * as i3$1 from '@angular/common';
3
+ import * as i4$1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
- import * as i1 from '@angular/forms';
5
+ import * as i2 from '@angular/forms';
6
6
  import { ReactiveFormsModule } from '@angular/forms';
7
+ import * as i1 from '@praxisui/core';
8
+ import { providePraxisI18nConfig, ComponentMetadataRegistry } from '@praxisui/core';
7
9
  import { Subject } from 'rxjs';
8
10
  import { auditTime, takeUntil } from 'rxjs/operators';
9
- import * as i2 from '@angular/material/form-field';
11
+ import * as i3 from '@angular/material/form-field';
10
12
  import { MatFormFieldModule } from '@angular/material/form-field';
11
- import * as i3 from '@angular/material/input';
13
+ import * as i4 from '@angular/material/input';
12
14
  import { MatInputModule } from '@angular/material/input';
13
- import * as i4$1 from '@angular/material/button';
15
+ import * as i5$1 from '@angular/material/button';
14
16
  import { MatButtonModule } from '@angular/material/button';
15
- import * as i5 from '@angular/material/icon';
17
+ import * as i6 from '@angular/material/icon';
16
18
  import { MatIconModule } from '@angular/material/icon';
17
- import * as i6$1 from '@angular/material/tooltip';
19
+ import * as i7$1 from '@angular/material/tooltip';
18
20
  import { MatTooltipModule } from '@angular/material/tooltip';
19
- import * as i7 from '@angular/material/menu';
21
+ import * as i8 from '@angular/material/menu';
20
22
  import { MatMenuModule } from '@angular/material/menu';
21
- import * as i4 from '@angular/material/button-toggle';
23
+ import * as i5 from '@angular/material/button-toggle';
22
24
  import { MatButtonToggleModule } from '@angular/material/button-toggle';
23
- import * as i6 from '@angular/material/slider';
25
+ import * as i7 from '@angular/material/slider';
24
26
  import { MatSliderModule } from '@angular/material/slider';
25
27
  import { PdxColorPickerComponent } from '@praxisui/dynamic-fields';
26
- import { ComponentMetadataRegistry } from '@praxisui/core';
27
28
 
28
29
  const RULE_ANIMATION_TYPE_SET = new Set([
29
30
  'pulse',
@@ -235,15 +236,280 @@ const DEFAULT_EFFECT_PRESETS = {
235
236
  },
236
237
  };
237
238
 
239
+ const PRAXIS_TABLE_RULE_BUILDER_EN_US = {
240
+ 'panel.title': 'C. Effects',
241
+ 'panel.subtitle': 'Configure visual styles and elements when the rule is true',
242
+ 'tabs.estilo': 'Style',
243
+ 'tabs.layout': 'Layout',
244
+ 'tabs.icone': 'Icon / Badge',
245
+ 'tabs.fundo': 'Background',
246
+ 'tabs.animacao': 'Animation',
247
+ 'tabs.tooltip': 'Tooltip',
248
+ 'preview.title': 'Preview',
249
+ 'preview.hint': 'The changes above reflect the style applied when the condition is true.',
250
+ 'advanced.title': 'Advanced',
251
+ 'advanced.description': 'Description',
252
+ 'actions.apply': 'Apply',
253
+ 'actions.reset': 'Reset',
254
+ 'presets.label': 'Presets',
255
+ 'presets.aprovado': 'Approved',
256
+ 'presets.alerta': 'Warning',
257
+ 'presets.erro': 'Error',
258
+ 'presets.info': 'Info',
259
+ 'tabs.ariaLabel': 'Effect categories',
260
+ 'preview.sampleText': 'Sample cell value',
261
+ 'advanced.cssClass': 'CSS class',
262
+ 'advanced.inlineStyle': 'Inline style',
263
+ 'advanced.descriptionPlaceholder': 'e.g. highlight critical result',
264
+ 'advanced.cssClassPlaceholder': 'e.g. praxis-cell--alert',
265
+ 'advanced.inlineStylePlaceholder': 'e.g. font-weight: 600;',
266
+ 'style.group': 'Style editor',
267
+ 'style.textColor': 'Text color',
268
+ 'style.textBackgroundColor': 'Text background color',
269
+ 'style.bold': 'Bold',
270
+ 'style.italic': 'Italic',
271
+ 'style.underline': 'Underline',
272
+ 'style.transform': 'Transform',
273
+ 'style.transformAria': 'Text transform',
274
+ 'style.transform.none': 'None',
275
+ 'style.transform.uppercase': 'UPPERCASE',
276
+ 'style.transform.lowercase': 'lowercase',
277
+ 'style.transform.capitalize': 'Capitalize',
278
+ 'style.opacity': 'Opacity',
279
+ 'style.size': 'Size',
280
+ 'layout.group': 'Layout editor',
281
+ 'layout.border': 'Border',
282
+ 'layout.borderColor': 'Border color',
283
+ 'layout.borderWidth': 'Width',
284
+ 'layout.padding': 'Padding',
285
+ 'layout.align': 'Alignment',
286
+ 'layout.elevation': 'Elevation (shadow)',
287
+ 'icon.group': 'Icon and badge editor',
288
+ 'icon.label': 'Icon (mat-icon)',
289
+ 'icon.color': 'Icon color',
290
+ 'icon.position': 'Icon position',
291
+ 'icon.position.before': 'Before',
292
+ 'icon.position.after': 'After',
293
+ 'icon.position.overlay': 'Overlay',
294
+ 'badge.text': 'Badge text',
295
+ 'badge.color': 'Badge color',
296
+ 'badge.style': 'Style',
297
+ 'badge.style.aria': 'Badge style',
298
+ 'badge.style.solid': 'Solid',
299
+ 'badge.style.soft': 'Soft',
300
+ 'badge.style.outline': 'Outline',
301
+ 'background.group': 'Background editor',
302
+ 'background.color': 'Color',
303
+ 'background.gradient': 'CSS gradient',
304
+ 'background.alpha': 'Transparency',
305
+ 'background.blur': 'Blur (px)',
306
+ 'animation.group': 'Animation editor',
307
+ 'animation.enabled': 'Enable animation',
308
+ 'animation.preset': 'Preset',
309
+ 'animation.preset.aria': 'Animation preset',
310
+ 'animation.preset.none': 'No preset',
311
+ 'animation.type': 'Type',
312
+ 'animation.type.aria': 'Animation type',
313
+ 'animation.defaultFromPreset': 'Preset default',
314
+ 'animation.duration': 'Duration (ms)',
315
+ 'animation.duration.placeholder': 'Preset/default',
316
+ 'animation.delay': 'Delay (ms)',
317
+ 'animation.delay.placeholder': 'Optional',
318
+ 'animation.trigger': 'Trigger',
319
+ 'animation.trigger.aria': 'Animation trigger',
320
+ 'animation.trigger.onChange': 'On change',
321
+ 'animation.trigger.onAppear': 'On appear',
322
+ 'animation.trigger.onHover': 'On hover',
323
+ 'animation.trigger.onConditionEnter': 'On condition enter',
324
+ 'animation.trigger.onConditionExit': 'On condition exit',
325
+ 'animation.trigger.onDataRefresh': 'On data refresh',
326
+ 'animation.repeat': 'Repeat',
327
+ 'animation.repeat.aria': 'Animation repeat',
328
+ 'animation.repeat.once': 'Once',
329
+ 'animation.repeat.loop': 'Loop',
330
+ 'animation.repeat.infinite': 'Infinite',
331
+ 'animation.intensity': 'Intensity',
332
+ 'animation.intensity.aria': 'Animation intensity',
333
+ 'animation.intensity.subtle': 'Subtle',
334
+ 'animation.intensity.normal': 'Normal',
335
+ 'animation.intensity.strong': 'Strong',
336
+ 'tooltip.group': 'Tooltip editor',
337
+ 'tooltip.text': 'Text',
338
+ 'tooltip.text.placeholder': 'Cell details',
339
+ 'tooltip.position': 'Position',
340
+ 'tooltip.position.aria': 'Tooltip position',
341
+ 'tooltip.position.top': 'Top',
342
+ 'tooltip.position.right': 'Right',
343
+ 'tooltip.position.bottom': 'Bottom',
344
+ 'tooltip.position.left': 'Left',
345
+ 'tooltip.backgroundColor': 'Background color',
346
+ 'tooltip.delay': 'Delay (ms)',
347
+ };
348
+
349
+ const PRAXIS_TABLE_RULE_BUILDER_PT_BR = {
350
+ 'panel.title': 'C. Efeitos',
351
+ 'panel.subtitle': 'Configure estilos e elementos visuais quando a regra for verdadeira',
352
+ 'tabs.estilo': 'Estilo',
353
+ 'tabs.layout': 'Layout',
354
+ 'tabs.icone': 'Ícone / Badge',
355
+ 'tabs.fundo': 'Fundo',
356
+ 'tabs.animacao': 'Animação',
357
+ 'tabs.tooltip': 'Tooltip',
358
+ 'preview.title': 'Pré-visualização',
359
+ 'preview.hint': 'As mudanças acima refletem o estilo aplicado quando a condição é verdadeira.',
360
+ 'advanced.title': 'Avançado',
361
+ 'advanced.description': 'Descrição',
362
+ 'actions.apply': 'Aplicar',
363
+ 'actions.reset': 'Redefinir',
364
+ 'presets.label': 'Presets',
365
+ 'presets.aprovado': 'Aprovado',
366
+ 'presets.alerta': 'Alerta',
367
+ 'presets.erro': 'Erro',
368
+ 'presets.info': 'Info',
369
+ 'tabs.ariaLabel': 'Categorias de efeitos',
370
+ 'preview.sampleText': 'Valor da célula',
371
+ 'advanced.cssClass': 'Classe CSS',
372
+ 'advanced.inlineStyle': 'Estilo inline',
373
+ 'advanced.descriptionPlaceholder': 'ex.: destacar resultado crítico',
374
+ 'advanced.cssClassPlaceholder': 'ex.: praxis-cell--alert',
375
+ 'advanced.inlineStylePlaceholder': 'ex.: font-weight: 600;',
376
+ 'style.group': 'Editor de estilo',
377
+ 'style.textColor': 'Cor do texto',
378
+ 'style.textBackgroundColor': 'Cor de fundo do texto',
379
+ 'style.bold': 'Negrito',
380
+ 'style.italic': 'Itálico',
381
+ 'style.underline': 'Sublinhado',
382
+ 'style.transform': 'Transformação',
383
+ 'style.transformAria': 'Transformação do texto',
384
+ 'style.transform.none': 'Nenhuma',
385
+ 'style.transform.uppercase': 'MAIÚSCULAS',
386
+ 'style.transform.lowercase': 'minúsculas',
387
+ 'style.transform.capitalize': 'Capitalizar',
388
+ 'style.opacity': 'Opacidade',
389
+ 'style.size': 'Tamanho',
390
+ 'layout.group': 'Editor de layout',
391
+ 'layout.border': 'Borda',
392
+ 'layout.borderColor': 'Cor da borda',
393
+ 'layout.borderWidth': 'Espessura',
394
+ 'layout.padding': 'Padding',
395
+ 'layout.align': 'Alinhamento',
396
+ 'layout.elevation': 'Elevação (sombra)',
397
+ 'icon.group': 'Editor de ícone e badge',
398
+ 'icon.label': 'Ícone (mat-icon)',
399
+ 'icon.color': 'Cor do ícone',
400
+ 'icon.position': 'Posição do ícone',
401
+ 'icon.position.before': 'Antes',
402
+ 'icon.position.after': 'Depois',
403
+ 'icon.position.overlay': 'Sobreposto',
404
+ 'badge.text': 'Texto do badge',
405
+ 'badge.color': 'Cor do badge',
406
+ 'badge.style': 'Estilo',
407
+ 'badge.style.aria': 'Estilo do badge',
408
+ 'badge.style.solid': 'Sólido',
409
+ 'badge.style.soft': 'Suave',
410
+ 'badge.style.outline': 'Contorno',
411
+ 'background.group': 'Editor de fundo',
412
+ 'background.color': 'Cor',
413
+ 'background.gradient': 'Gradient CSS',
414
+ 'background.alpha': 'Transparência',
415
+ 'background.blur': 'Desfoque (px)',
416
+ 'animation.group': 'Editor de animação',
417
+ 'animation.enabled': 'Ativar animação',
418
+ 'animation.preset': 'Preset',
419
+ 'animation.preset.aria': 'Preset de animação',
420
+ 'animation.preset.none': 'Sem preset',
421
+ 'animation.type': 'Tipo',
422
+ 'animation.type.aria': 'Tipo de animação',
423
+ 'animation.defaultFromPreset': 'Padrão do preset',
424
+ 'animation.duration': 'Duração (ms)',
425
+ 'animation.duration.placeholder': 'Preset/default',
426
+ 'animation.delay': 'Delay (ms)',
427
+ 'animation.delay.placeholder': 'Opcional',
428
+ 'animation.trigger': 'Disparo',
429
+ 'animation.trigger.aria': 'Disparo da animação',
430
+ 'animation.trigger.onChange': 'Ao mudar',
431
+ 'animation.trigger.onAppear': 'Ao aparecer',
432
+ 'animation.trigger.onHover': 'Ao passar o mouse',
433
+ 'animation.trigger.onConditionEnter': 'Ao entrar na condição',
434
+ 'animation.trigger.onConditionExit': 'Ao sair da condição',
435
+ 'animation.trigger.onDataRefresh': 'Ao atualizar dados',
436
+ 'animation.repeat': 'Repetição',
437
+ 'animation.repeat.aria': 'Repetição da animação',
438
+ 'animation.repeat.once': 'Uma vez',
439
+ 'animation.repeat.loop': 'Loop',
440
+ 'animation.repeat.infinite': 'Infinito',
441
+ 'animation.intensity': 'Intensidade',
442
+ 'animation.intensity.aria': 'Intensidade da animação',
443
+ 'animation.intensity.subtle': 'Sutil',
444
+ 'animation.intensity.normal': 'Normal',
445
+ 'animation.intensity.strong': 'Forte',
446
+ 'tooltip.group': 'Editor de tooltip',
447
+ 'tooltip.text': 'Texto',
448
+ 'tooltip.text.placeholder': 'Detalhes da célula',
449
+ 'tooltip.position': 'Posição',
450
+ 'tooltip.position.aria': 'Posição do tooltip',
451
+ 'tooltip.position.top': 'Topo',
452
+ 'tooltip.position.right': 'Direita',
453
+ 'tooltip.position.bottom': 'Baixo',
454
+ 'tooltip.position.left': 'Esquerda',
455
+ 'tooltip.backgroundColor': 'Cor do fundo',
456
+ 'tooltip.delay': 'Delay (ms)',
457
+ };
458
+
459
+ const PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE = 'praxisTableRuleBuilder';
460
+ const PRAXIS_TABLE_RULE_BUILDER_LABEL_KEYS = [
461
+ 'panel.title',
462
+ 'panel.subtitle',
463
+ 'tabs.estilo',
464
+ 'tabs.layout',
465
+ 'tabs.icone',
466
+ 'tabs.fundo',
467
+ 'tabs.animacao',
468
+ 'tabs.tooltip',
469
+ 'preview.title',
470
+ 'preview.hint',
471
+ 'advanced.title',
472
+ 'advanced.description',
473
+ 'actions.apply',
474
+ 'actions.reset',
475
+ 'presets.label',
476
+ 'presets.aprovado',
477
+ 'presets.alerta',
478
+ 'presets.erro',
479
+ 'presets.info',
480
+ 'tabs.ariaLabel',
481
+ 'preview.sampleText',
482
+ 'advanced.cssClass',
483
+ 'advanced.inlineStyle',
484
+ 'advanced.descriptionPlaceholder',
485
+ 'advanced.cssClassPlaceholder',
486
+ 'advanced.inlineStylePlaceholder',
487
+ ];
488
+ const PRAXIS_TABLE_RULE_BUILDER_I18N_CONFIG = {
489
+ namespaces: {
490
+ [PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE]: {
491
+ 'pt-BR': PRAXIS_TABLE_RULE_BUILDER_PT_BR,
492
+ 'en-US': PRAXIS_TABLE_RULE_BUILDER_EN_US,
493
+ },
494
+ },
495
+ };
496
+
238
497
  class EstiloEditorComponent {
498
+ i18n;
239
499
  group;
240
- // Public for template (strictTemplates): used by mat-slider
500
+ constructor(i18n) {
501
+ this.i18n = i18n;
502
+ }
503
+ tx(key, fallback) {
504
+ return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
505
+ }
506
+ // Public for template (strictTemplates): used by mat-slider.
241
507
  formatOpacity(v) { return (v ?? 0).toFixed(2); }
242
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EstiloEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
508
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EstiloEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
243
509
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: EstiloEditorComponent, isStandalone: true, selector: "praxis-effects-estilo-editor", inputs: { group: "group" }, ngImport: i0, template: `
244
- <div class="estilo-grid" role="group" aria-label="Editor de estilo" [formGroup]="group">
510
+ <div class="estilo-grid" role="group" [attr.aria-label]="tx('style.group', 'Editor de estilo')" [formGroup]="group">
245
511
  <pdx-color-picker
246
- label="Cor do texto"
512
+ [label]="tx('style.textColor', 'Cor do texto')"
247
513
  formControlName="color"
248
514
  [format]="'hex'"
249
515
  [preview]="true"
@@ -254,7 +520,7 @@ class EstiloEditorComponent {
254
520
  ></pdx-color-picker>
255
521
 
256
522
  <pdx-color-picker
257
- label="Cor de fundo do texto"
523
+ [label]="tx('style.textBackgroundColor', 'Cor de fundo do texto')"
258
524
  formControlName="bgColor"
259
525
  [format]="'hex'"
260
526
  [preview]="true"
@@ -266,44 +532,44 @@ class EstiloEditorComponent {
266
532
 
267
533
  <div class="toggles">
268
534
  <mat-button-toggle-group multiple>
269
- <mat-button-toggle [checked]="group.get('bold')?.value" (change)="group.get('bold')?.setValue($event.source.checked)" aria-label="Negrito">
535
+ <mat-button-toggle [checked]="group.get('bold')?.value" (change)="group.get('bold')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.bold', 'Negrito')">
270
536
  <mat-icon>format_bold</mat-icon>
271
537
  </mat-button-toggle>
272
- <mat-button-toggle [checked]="group.get('italic')?.value" (change)="group.get('italic')?.setValue($event.source.checked)" aria-label="Itálico">
538
+ <mat-button-toggle [checked]="group.get('italic')?.value" (change)="group.get('italic')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.italic', 'Italico')">
273
539
  <mat-icon>format_italic</mat-icon>
274
540
  </mat-button-toggle>
275
- <mat-button-toggle [checked]="group.get('underline')?.value" (change)="group.get('underline')?.setValue($event.source.checked)" aria-label="Sublinhado">
541
+ <mat-button-toggle [checked]="group.get('underline')?.value" (change)="group.get('underline')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.underline', 'Sublinhado')">
276
542
  <mat-icon>format_underlined</mat-icon>
277
543
  </mat-button-toggle>
278
544
  </mat-button-toggle-group>
279
545
  </div>
280
546
 
281
547
  <mat-form-field appearance="outline">
282
- <mat-label>Transformação</mat-label>
283
- <select matNativeControl formControlName="transform" aria-label="Transformação do texto">
284
- <option [ngValue]="null">Nenhuma</option>
285
- <option value="uppercase">MAIÚSCULAS</option>
286
- <option value="lowercase">minúsculas</option>
287
- <option value="capitalize">Capitalizar</option>
548
+ <mat-label>{{ tx('style.transform', 'Transformacao') }}</mat-label>
549
+ <select matNativeControl formControlName="transform" [attr.aria-label]="tx('style.transformAria', 'Transformacao do texto')">
550
+ <option [ngValue]="null">{{ tx('style.transform.none', 'Nenhuma') }}</option>
551
+ <option value="uppercase">{{ tx('style.transform.uppercase', 'MAIUSCULAS') }}</option>
552
+ <option value="lowercase">{{ tx('style.transform.lowercase', 'minusculas') }}</option>
553
+ <option value="capitalize">{{ tx('style.transform.capitalize', 'Capitalizar') }}</option>
288
554
  </select>
289
555
  </mat-form-field>
290
556
 
291
557
  <div class="sliders">
292
558
  <label class="slider">
293
- <span>Opacidade</span>
559
+ <span>{{ tx('style.opacity', 'Opacidade') }}</span>
294
560
  <mat-slider min="0" max="1" step="0.05" [displayWith]="formatOpacity">
295
561
  <input matSliderThumb formControlName="opacity" />
296
562
  </mat-slider>
297
563
  </label>
298
564
  <label class="slider">
299
- <span>Tamanho</span>
565
+ <span>{{ tx('style.size', 'Tamanho') }}</span>
300
566
  <mat-slider min="-2" max="2" step="1">
301
567
  <input matSliderThumb formControlName="fontScale" />
302
568
  </mat-slider>
303
569
  </label>
304
570
  </div>
305
571
  </div>
306
- `, isInline: true, styles: [".estilo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.toggles{display:flex;align-items:center;gap:8px}.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.slider{display:flex;flex-direction:column;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: PdxColorPickerComponent, selector: "pdx-color-picker", inputs: ["actionsLayout", "activeView", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "disabledMode", "readonlyMode", "visible", "presentationMode", "fillMode", "format", "gradientSettings", "icon", "iconClass", "svgIcon", "paletteSettings", "popupSettings", "preview", "rounded", "size", "tabindex", "views", "maxRecent", "showRecent"], outputs: ["valueChange", "open", "close", "cancel", "activeViewChange", "activeColorClick", "focusEvent", "blurEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
572
+ `, isInline: true, styles: [".estilo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start;min-width:0}pdx-color-picker,mat-form-field{min-width:0}.toggles{display:flex;align-items:center;gap:8px;min-width:0}.toggles mat-button-toggle-group{flex-wrap:wrap}.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;min-width:0}.slider{display:flex;flex-direction:column;gap:6px;min-width:0}.slider span{white-space:nowrap}mat-slider{width:100%;min-width:0}@media(max-width:520px){.estilo-grid,.sliders{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: PdxColorPickerComponent, selector: "pdx-color-picker", inputs: ["actionsLayout", "activeView", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "disabledMode", "readonlyMode", "visible", "presentationMode", "fillMode", "format", "gradientSettings", "icon", "iconClass", "svgIcon", "paletteSettings", "popupSettings", "preview", "rounded", "size", "tabindex", "views", "maxRecent", "showRecent"], outputs: ["valueChange", "open", "close", "cancel", "activeViewChange", "activeColorClick", "focusEvent", "blurEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
307
573
  }
308
574
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EstiloEditorComponent, decorators: [{
309
575
  type: Component,
@@ -314,11 +580,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
314
580
  MatButtonToggleModule,
315
581
  MatIconModule,
316
582
  MatSliderModule,
317
- PdxColorPickerComponent
583
+ PdxColorPickerComponent,
318
584
  ], template: `
319
- <div class="estilo-grid" role="group" aria-label="Editor de estilo" [formGroup]="group">
585
+ <div class="estilo-grid" role="group" [attr.aria-label]="tx('style.group', 'Editor de estilo')" [formGroup]="group">
320
586
  <pdx-color-picker
321
- label="Cor do texto"
587
+ [label]="tx('style.textColor', 'Cor do texto')"
322
588
  formControlName="color"
323
589
  [format]="'hex'"
324
590
  [preview]="true"
@@ -329,7 +595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
329
595
  ></pdx-color-picker>
330
596
 
331
597
  <pdx-color-picker
332
- label="Cor de fundo do texto"
598
+ [label]="tx('style.textBackgroundColor', 'Cor de fundo do texto')"
333
599
  formControlName="bgColor"
334
600
  [format]="'hex'"
335
601
  [preview]="true"
@@ -341,56 +607,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
341
607
 
342
608
  <div class="toggles">
343
609
  <mat-button-toggle-group multiple>
344
- <mat-button-toggle [checked]="group.get('bold')?.value" (change)="group.get('bold')?.setValue($event.source.checked)" aria-label="Negrito">
610
+ <mat-button-toggle [checked]="group.get('bold')?.value" (change)="group.get('bold')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.bold', 'Negrito')">
345
611
  <mat-icon>format_bold</mat-icon>
346
612
  </mat-button-toggle>
347
- <mat-button-toggle [checked]="group.get('italic')?.value" (change)="group.get('italic')?.setValue($event.source.checked)" aria-label="Itálico">
613
+ <mat-button-toggle [checked]="group.get('italic')?.value" (change)="group.get('italic')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.italic', 'Italico')">
348
614
  <mat-icon>format_italic</mat-icon>
349
615
  </mat-button-toggle>
350
- <mat-button-toggle [checked]="group.get('underline')?.value" (change)="group.get('underline')?.setValue($event.source.checked)" aria-label="Sublinhado">
616
+ <mat-button-toggle [checked]="group.get('underline')?.value" (change)="group.get('underline')?.setValue($event.source.checked)" [attr.aria-label]="tx('style.underline', 'Sublinhado')">
351
617
  <mat-icon>format_underlined</mat-icon>
352
618
  </mat-button-toggle>
353
619
  </mat-button-toggle-group>
354
620
  </div>
355
621
 
356
622
  <mat-form-field appearance="outline">
357
- <mat-label>Transformação</mat-label>
358
- <select matNativeControl formControlName="transform" aria-label="Transformação do texto">
359
- <option [ngValue]="null">Nenhuma</option>
360
- <option value="uppercase">MAIÚSCULAS</option>
361
- <option value="lowercase">minúsculas</option>
362
- <option value="capitalize">Capitalizar</option>
623
+ <mat-label>{{ tx('style.transform', 'Transformacao') }}</mat-label>
624
+ <select matNativeControl formControlName="transform" [attr.aria-label]="tx('style.transformAria', 'Transformacao do texto')">
625
+ <option [ngValue]="null">{{ tx('style.transform.none', 'Nenhuma') }}</option>
626
+ <option value="uppercase">{{ tx('style.transform.uppercase', 'MAIUSCULAS') }}</option>
627
+ <option value="lowercase">{{ tx('style.transform.lowercase', 'minusculas') }}</option>
628
+ <option value="capitalize">{{ tx('style.transform.capitalize', 'Capitalizar') }}</option>
363
629
  </select>
364
630
  </mat-form-field>
365
631
 
366
632
  <div class="sliders">
367
633
  <label class="slider">
368
- <span>Opacidade</span>
634
+ <span>{{ tx('style.opacity', 'Opacidade') }}</span>
369
635
  <mat-slider min="0" max="1" step="0.05" [displayWith]="formatOpacity">
370
636
  <input matSliderThumb formControlName="opacity" />
371
637
  </mat-slider>
372
638
  </label>
373
639
  <label class="slider">
374
- <span>Tamanho</span>
640
+ <span>{{ tx('style.size', 'Tamanho') }}</span>
375
641
  <mat-slider min="-2" max="2" step="1">
376
642
  <input matSliderThumb formControlName="fontScale" />
377
643
  </mat-slider>
378
644
  </label>
379
645
  </div>
380
646
  </div>
381
- `, 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"] }]
382
- }], propDecorators: { group: [{
647
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".estilo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start;min-width:0}pdx-color-picker,mat-form-field{min-width:0}.toggles{display:flex;align-items:center;gap:8px;min-width:0}.toggles mat-button-toggle-group{flex-wrap:wrap}.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;min-width:0}.slider{display:flex;flex-direction:column;gap:6px;min-width:0}.slider span{white-space:nowrap}mat-slider{width:100%;min-width:0}@media(max-width:520px){.estilo-grid,.sliders{grid-template-columns:1fr}}\n"] }]
648
+ }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
383
649
  type: Input
384
650
  }] } });
385
651
 
386
652
  class LayoutEditorComponent {
653
+ i18n;
387
654
  group;
388
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
655
+ constructor(i18n) {
656
+ this.i18n = i18n;
657
+ }
658
+ tx(key, fallback) {
659
+ return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
660
+ }
661
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
389
662
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: LayoutEditorComponent, isStandalone: true, selector: "praxis-effects-layout-editor", inputs: { group: "group" }, ngImport: i0, template: `
390
- <div class="layout-grid" role="group" aria-label="Editor de layout" [formGroup]="group">
663
+ <div class="layout-grid" role="group" [attr.aria-label]="tx('layout.group', 'Editor de layout')" [formGroup]="group">
391
664
  <div class="borders">
392
- <span class="lbl">Borda</span>
393
- <mat-button-toggle-group [value]="group.get('border')?.value" (change)="group.get('border')?.setValue($event.value)" aria-label="Borda">
665
+ <span class="lbl">{{ tx('layout.border', 'Borda') }}</span>
666
+ <mat-button-toggle-group [value]="group.get('border')?.value" (change)="group.get('border')?.setValue($event.value)" [attr.aria-label]="tx('layout.border', 'Borda')">
394
667
  <mat-button-toggle value="none"><mat-icon>crop_free</mat-icon></mat-button-toggle>
395
668
  <mat-button-toggle value="left"><mat-icon>border_left</mat-icon></mat-button-toggle>
396
669
  <mat-button-toggle value="right"><mat-icon>border_right</mat-icon></mat-button-toggle>
@@ -401,21 +674,21 @@ class LayoutEditorComponent {
401
674
  </div>
402
675
 
403
676
  <mat-form-field appearance="outline">
404
- <mat-label>Cor da borda</mat-label>
677
+ <mat-label>{{ tx('layout.borderColor', 'Cor da borda') }}</mat-label>
405
678
  <input matInput type="text" formControlName="borderColor" placeholder="#487BFF" />
406
679
  </mat-form-field>
407
680
  <mat-form-field appearance="outline">
408
- <mat-label>Espessura</mat-label>
681
+ <mat-label>{{ tx('layout.borderWidth', 'Espessura') }}</mat-label>
409
682
  <input matInput type="number" formControlName="borderWidth" placeholder="2" />
410
683
  </mat-form-field>
411
684
  <mat-form-field appearance="outline">
412
- <mat-label>Padding</mat-label>
685
+ <mat-label>{{ tx('layout.padding', 'Padding') }}</mat-label>
413
686
  <input matInput type="number" formControlName="padding" placeholder="6" />
414
687
  </mat-form-field>
415
688
 
416
689
  <div class="align">
417
- <span class="lbl">Alinhamento</span>
418
- <mat-button-toggle-group [value]="group.get('align')?.value" (change)="group.get('align')?.setValue($event.value)" aria-label="Alinhamento">
690
+ <span class="lbl">{{ tx('layout.align', 'Alinhamento') }}</span>
691
+ <mat-button-toggle-group [value]="group.get('align')?.value" (change)="group.get('align')?.setValue($event.value)" [attr.aria-label]="tx('layout.align', 'Alinhamento')">
419
692
  <mat-button-toggle value="start"><mat-icon>format_align_left</mat-icon></mat-button-toggle>
420
693
  <mat-button-toggle value="center"><mat-icon>format_align_center</mat-icon></mat-button-toggle>
421
694
  <mat-button-toggle value="end"><mat-icon>format_align_right</mat-icon></mat-button-toggle>
@@ -423,19 +696,19 @@ class LayoutEditorComponent {
423
696
  </div>
424
697
 
425
698
  <mat-form-field appearance="outline">
426
- <mat-label>Elevação (sombra)</mat-label>
699
+ <mat-label>{{ tx('layout.elevation', 'Elevacao (sombra)') }}</mat-label>
427
700
  <input matInput type="number" formControlName="elevation" placeholder="6" />
428
701
  </mat-form-field>
429
702
  </div>
430
- `, isInline: true, styles: [".layout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.borders,.align{display:flex;align-items:center;gap:8px}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
703
+ `, isInline: true, styles: [".layout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center;min-width:0}mat-form-field{min-width:0}.borders,.align{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.borders mat-button-toggle-group,.align mat-button-toggle-group{flex-wrap:wrap}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
431
704
  }
432
705
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutEditorComponent, decorators: [{
433
706
  type: Component,
434
707
  args: [{ selector: 'praxis-effects-layout-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatIconModule], template: `
435
- <div class="layout-grid" role="group" aria-label="Editor de layout" [formGroup]="group">
708
+ <div class="layout-grid" role="group" [attr.aria-label]="tx('layout.group', 'Editor de layout')" [formGroup]="group">
436
709
  <div class="borders">
437
- <span class="lbl">Borda</span>
438
- <mat-button-toggle-group [value]="group.get('border')?.value" (change)="group.get('border')?.setValue($event.value)" aria-label="Borda">
710
+ <span class="lbl">{{ tx('layout.border', 'Borda') }}</span>
711
+ <mat-button-toggle-group [value]="group.get('border')?.value" (change)="group.get('border')?.setValue($event.value)" [attr.aria-label]="tx('layout.border', 'Borda')">
439
712
  <mat-button-toggle value="none"><mat-icon>crop_free</mat-icon></mat-button-toggle>
440
713
  <mat-button-toggle value="left"><mat-icon>border_left</mat-icon></mat-button-toggle>
441
714
  <mat-button-toggle value="right"><mat-icon>border_right</mat-icon></mat-button-toggle>
@@ -446,21 +719,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
446
719
  </div>
447
720
 
448
721
  <mat-form-field appearance="outline">
449
- <mat-label>Cor da borda</mat-label>
722
+ <mat-label>{{ tx('layout.borderColor', 'Cor da borda') }}</mat-label>
450
723
  <input matInput type="text" formControlName="borderColor" placeholder="#487BFF" />
451
724
  </mat-form-field>
452
725
  <mat-form-field appearance="outline">
453
- <mat-label>Espessura</mat-label>
726
+ <mat-label>{{ tx('layout.borderWidth', 'Espessura') }}</mat-label>
454
727
  <input matInput type="number" formControlName="borderWidth" placeholder="2" />
455
728
  </mat-form-field>
456
729
  <mat-form-field appearance="outline">
457
- <mat-label>Padding</mat-label>
730
+ <mat-label>{{ tx('layout.padding', 'Padding') }}</mat-label>
458
731
  <input matInput type="number" formControlName="padding" placeholder="6" />
459
732
  </mat-form-field>
460
733
 
461
734
  <div class="align">
462
- <span class="lbl">Alinhamento</span>
463
- <mat-button-toggle-group [value]="group.get('align')?.value" (change)="group.get('align')?.setValue($event.value)" aria-label="Alinhamento">
735
+ <span class="lbl">{{ tx('layout.align', 'Alinhamento') }}</span>
736
+ <mat-button-toggle-group [value]="group.get('align')?.value" (change)="group.get('align')?.setValue($event.value)" [attr.aria-label]="tx('layout.align', 'Alinhamento')">
464
737
  <mat-button-toggle value="start"><mat-icon>format_align_left</mat-icon></mat-button-toggle>
465
738
  <mat-button-toggle value="center"><mat-icon>format_align_center</mat-icon></mat-button-toggle>
466
739
  <mat-button-toggle value="end"><mat-icon>format_align_right</mat-icon></mat-button-toggle>
@@ -468,176 +741,197 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
468
741
  </div>
469
742
 
470
743
  <mat-form-field appearance="outline">
471
- <mat-label>Elevação (sombra)</mat-label>
744
+ <mat-label>{{ tx('layout.elevation', 'Elevacao (sombra)') }}</mat-label>
472
745
  <input matInput type="number" formControlName="elevation" placeholder="6" />
473
746
  </mat-form-field>
474
747
  </div>
475
- `, 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"] }]
476
- }], propDecorators: { group: [{
748
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".layout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center;min-width:0}mat-form-field{min-width:0}.borders,.align{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.borders mat-button-toggle-group,.align mat-button-toggle-group{flex-wrap:wrap}.lbl{font-size:.85rem;opacity:.8}\n"] }]
749
+ }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
477
750
  type: Input
478
751
  }] } });
479
752
 
480
753
  class IconeBadgeEditorComponent {
754
+ i18n;
481
755
  group;
482
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconeBadgeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
756
+ constructor(i18n) {
757
+ this.i18n = i18n;
758
+ }
759
+ tx(key, fallback) {
760
+ return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
761
+ }
762
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconeBadgeEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
483
763
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: IconeBadgeEditorComponent, isStandalone: true, selector: "praxis-effects-icone-badge-editor", inputs: { group: "group" }, ngImport: i0, template: `
484
- <div class="icone-grid" role="group" aria-label="Editor de ícone e badge" [formGroup]="group">
764
+ <div class="icone-grid" role="group" [attr.aria-label]="tx('icon.group', 'Editor de icone e badge')" [formGroup]="group">
485
765
  <mat-form-field appearance="outline">
486
- <mat-label>Ícone (mat-icon)</mat-label>
766
+ <mat-label>{{ tx('icon.label', 'Icone (mat-icon)') }}</mat-label>
487
767
  <input matInput type="text" formControlName="icon" placeholder="check_circle" />
488
768
  </mat-form-field>
489
769
  <mat-form-field appearance="outline">
490
- <mat-label>Cor do ícone</mat-label>
770
+ <mat-label>{{ tx('icon.color', 'Cor do icone') }}</mat-label>
491
771
  <input matInput type="text" formControlName="iconColor" placeholder="#35D07F" />
492
772
  </mat-form-field>
493
773
 
494
774
  <div class="pos">
495
- <span class="lbl">Posição do ícone</span>
496
- <mat-button-toggle-group [value]="group.get('iconPos')?.value" (change)="group.get('iconPos')?.setValue($event.value)" aria-label="Posição do ícone">
497
- <mat-button-toggle value="before">Antes</mat-button-toggle>
498
- <mat-button-toggle value="after">Depois</mat-button-toggle>
499
- <mat-button-toggle value="overlay">Sobreposto</mat-button-toggle>
775
+ <span class="lbl">{{ tx('icon.position', 'Posicao do icone') }}</span>
776
+ <mat-button-toggle-group [value]="group.get('iconPos')?.value" (change)="group.get('iconPos')?.setValue($event.value)" [attr.aria-label]="tx('icon.position', 'Posicao do icone')">
777
+ <mat-button-toggle value="before">{{ tx('icon.position.before', 'Antes') }}</mat-button-toggle>
778
+ <mat-button-toggle value="after">{{ tx('icon.position.after', 'Depois') }}</mat-button-toggle>
779
+ <mat-button-toggle value="overlay">{{ tx('icon.position.overlay', 'Sobreposto') }}</mat-button-toggle>
500
780
  </mat-button-toggle-group>
501
781
  </div>
502
782
 
503
783
  <mat-form-field appearance="outline">
504
- <mat-label>Texto do badge</mat-label>
784
+ <mat-label>{{ tx('badge.text', 'Texto do badge') }}</mat-label>
505
785
  <input matInput type="text" formControlName="badgeText" placeholder="Aprovado" />
506
786
  </mat-form-field>
507
787
  <mat-form-field appearance="outline">
508
- <mat-label>Cor do badge</mat-label>
788
+ <mat-label>{{ tx('badge.color', 'Cor do badge') }}</mat-label>
509
789
  <input matInput type="text" formControlName="badgeColor" placeholder="#2a8455" />
510
790
  </mat-form-field>
511
791
 
512
792
  <div class="variant">
513
- <span class="lbl">Estilo</span>
514
- <mat-button-toggle-group [value]="group.get('badgeStyle')?.value" (change)="group.get('badgeStyle')?.setValue($event.value)" aria-label="Estilo do badge">
515
- <mat-button-toggle value="solid">Sólido</mat-button-toggle>
516
- <mat-button-toggle value="soft">Suave</mat-button-toggle>
517
- <mat-button-toggle value="outline">Contorno</mat-button-toggle>
793
+ <span class="lbl">{{ tx('badge.style', 'Estilo') }}</span>
794
+ <mat-button-toggle-group [value]="group.get('badgeStyle')?.value" (change)="group.get('badgeStyle')?.setValue($event.value)" [attr.aria-label]="tx('badge.style.aria', 'Estilo do badge')">
795
+ <mat-button-toggle value="solid">{{ tx('badge.style.solid', 'Solido') }}</mat-button-toggle>
796
+ <mat-button-toggle value="soft">{{ tx('badge.style.soft', 'Suave') }}</mat-button-toggle>
797
+ <mat-button-toggle value="outline">{{ tx('badge.style.outline', 'Contorno') }}</mat-button-toggle>
518
798
  </mat-button-toggle-group>
519
799
  </div>
520
800
  </div>
521
- `, isInline: true, styles: [".icone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.pos,.variant{display:flex;align-items:center;gap:8px}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
801
+ `, isInline: true, styles: [".icone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center;min-width:0}mat-form-field{min-width:0}.pos,.variant{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.pos mat-button-toggle-group,.variant mat-button-toggle-group{flex-wrap:wrap}.lbl{font-size:.85rem;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
522
802
  }
523
803
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconeBadgeEditorComponent, decorators: [{
524
804
  type: Component,
525
805
  args: [{ selector: 'praxis-effects-icone-badge-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatIconModule], template: `
526
- <div class="icone-grid" role="group" aria-label="Editor de ícone e badge" [formGroup]="group">
806
+ <div class="icone-grid" role="group" [attr.aria-label]="tx('icon.group', 'Editor de icone e badge')" [formGroup]="group">
527
807
  <mat-form-field appearance="outline">
528
- <mat-label>Ícone (mat-icon)</mat-label>
808
+ <mat-label>{{ tx('icon.label', 'Icone (mat-icon)') }}</mat-label>
529
809
  <input matInput type="text" formControlName="icon" placeholder="check_circle" />
530
810
  </mat-form-field>
531
811
  <mat-form-field appearance="outline">
532
- <mat-label>Cor do ícone</mat-label>
812
+ <mat-label>{{ tx('icon.color', 'Cor do icone') }}</mat-label>
533
813
  <input matInput type="text" formControlName="iconColor" placeholder="#35D07F" />
534
814
  </mat-form-field>
535
815
 
536
816
  <div class="pos">
537
- <span class="lbl">Posição do ícone</span>
538
- <mat-button-toggle-group [value]="group.get('iconPos')?.value" (change)="group.get('iconPos')?.setValue($event.value)" aria-label="Posição do ícone">
539
- <mat-button-toggle value="before">Antes</mat-button-toggle>
540
- <mat-button-toggle value="after">Depois</mat-button-toggle>
541
- <mat-button-toggle value="overlay">Sobreposto</mat-button-toggle>
817
+ <span class="lbl">{{ tx('icon.position', 'Posicao do icone') }}</span>
818
+ <mat-button-toggle-group [value]="group.get('iconPos')?.value" (change)="group.get('iconPos')?.setValue($event.value)" [attr.aria-label]="tx('icon.position', 'Posicao do icone')">
819
+ <mat-button-toggle value="before">{{ tx('icon.position.before', 'Antes') }}</mat-button-toggle>
820
+ <mat-button-toggle value="after">{{ tx('icon.position.after', 'Depois') }}</mat-button-toggle>
821
+ <mat-button-toggle value="overlay">{{ tx('icon.position.overlay', 'Sobreposto') }}</mat-button-toggle>
542
822
  </mat-button-toggle-group>
543
823
  </div>
544
824
 
545
825
  <mat-form-field appearance="outline">
546
- <mat-label>Texto do badge</mat-label>
826
+ <mat-label>{{ tx('badge.text', 'Texto do badge') }}</mat-label>
547
827
  <input matInput type="text" formControlName="badgeText" placeholder="Aprovado" />
548
828
  </mat-form-field>
549
829
  <mat-form-field appearance="outline">
550
- <mat-label>Cor do badge</mat-label>
830
+ <mat-label>{{ tx('badge.color', 'Cor do badge') }}</mat-label>
551
831
  <input matInput type="text" formControlName="badgeColor" placeholder="#2a8455" />
552
832
  </mat-form-field>
553
833
 
554
834
  <div class="variant">
555
- <span class="lbl">Estilo</span>
556
- <mat-button-toggle-group [value]="group.get('badgeStyle')?.value" (change)="group.get('badgeStyle')?.setValue($event.value)" aria-label="Estilo do badge">
557
- <mat-button-toggle value="solid">Sólido</mat-button-toggle>
558
- <mat-button-toggle value="soft">Suave</mat-button-toggle>
559
- <mat-button-toggle value="outline">Contorno</mat-button-toggle>
835
+ <span class="lbl">{{ tx('badge.style', 'Estilo') }}</span>
836
+ <mat-button-toggle-group [value]="group.get('badgeStyle')?.value" (change)="group.get('badgeStyle')?.setValue($event.value)" [attr.aria-label]="tx('badge.style.aria', 'Estilo do badge')">
837
+ <mat-button-toggle value="solid">{{ tx('badge.style.solid', 'Solido') }}</mat-button-toggle>
838
+ <mat-button-toggle value="soft">{{ tx('badge.style.soft', 'Suave') }}</mat-button-toggle>
839
+ <mat-button-toggle value="outline">{{ tx('badge.style.outline', 'Contorno') }}</mat-button-toggle>
560
840
  </mat-button-toggle-group>
561
841
  </div>
562
842
  </div>
563
- `, 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"] }]
564
- }], propDecorators: { group: [{
843
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".icone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center;min-width:0}mat-form-field{min-width:0}.pos,.variant{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.pos mat-button-toggle-group,.variant mat-button-toggle-group{flex-wrap:wrap}.lbl{font-size:.85rem;opacity:.8}\n"] }]
844
+ }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
565
845
  type: Input
566
846
  }] } });
567
847
 
568
848
  class FundoEditorComponent {
849
+ i18n;
569
850
  group;
570
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FundoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
851
+ constructor(i18n) {
852
+ this.i18n = i18n;
853
+ }
854
+ tx(key, fallback) {
855
+ return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
856
+ }
857
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FundoEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
571
858
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: FundoEditorComponent, isStandalone: true, selector: "praxis-effects-fundo-editor", inputs: { group: "group" }, ngImport: i0, template: `
572
- <div class="fundo-grid" role="group" aria-label="Editor de fundo" [formGroup]="group">
859
+ <div class="fundo-grid" role="group" [attr.aria-label]="tx('background.group', 'Editor de fundo')" [formGroup]="group">
573
860
  <mat-form-field appearance="outline">
574
- <mat-label>Cor</mat-label>
861
+ <mat-label>{{ tx('background.color', 'Cor') }}</mat-label>
575
862
  <input matInput type="text" formControlName="color" placeholder="#122033" />
576
863
  </mat-form-field>
577
864
  <mat-form-field appearance="outline" class="full">
578
- <mat-label>Gradient CSS</mat-label>
865
+ <mat-label>{{ tx('background.gradient', 'Gradient CSS') }}</mat-label>
579
866
  <input matInput type="text" formControlName="gradient" placeholder="linear-gradient(180deg, #202637, #1c2230)" />
580
867
  </mat-form-field>
581
868
 
582
869
  <label class="slider">
583
- <span>Transparência</span>
870
+ <span>{{ tx('background.alpha', 'Transparencia') }}</span>
584
871
  <mat-slider min="0" max="100" step="5">
585
872
  <input matSliderThumb formControlName="alpha" />
586
873
  </mat-slider>
587
874
  </label>
588
875
  <label class="slider">
589
- <span>Desfoque (px)</span>
876
+ <span>{{ tx('background.blur', 'Desfoque (px)') }}</span>
590
877
  <mat-slider min="0" max="20" step="1">
591
878
  <input matSliderThumb formControlName="blur" />
592
879
  </mat-slider>
593
880
  </label>
594
881
  </div>
595
- `, isInline: true, styles: [".fundo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}.slider{display:flex;flex-direction:column;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
882
+ `, isInline: true, styles: [".fundo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:center;min-width:0}.full{grid-column:1 / -1}mat-form-field,.slider{min-width:0}.slider{display:flex;flex-direction:column;gap:6px}.slider span{white-space:nowrap}mat-slider{width:100%;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
596
883
  }
597
884
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FundoEditorComponent, decorators: [{
598
885
  type: Component,
599
886
  args: [{ selector: 'praxis-effects-fundo-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSliderModule], template: `
600
- <div class="fundo-grid" role="group" aria-label="Editor de fundo" [formGroup]="group">
887
+ <div class="fundo-grid" role="group" [attr.aria-label]="tx('background.group', 'Editor de fundo')" [formGroup]="group">
601
888
  <mat-form-field appearance="outline">
602
- <mat-label>Cor</mat-label>
889
+ <mat-label>{{ tx('background.color', 'Cor') }}</mat-label>
603
890
  <input matInput type="text" formControlName="color" placeholder="#122033" />
604
891
  </mat-form-field>
605
892
  <mat-form-field appearance="outline" class="full">
606
- <mat-label>Gradient CSS</mat-label>
893
+ <mat-label>{{ tx('background.gradient', 'Gradient CSS') }}</mat-label>
607
894
  <input matInput type="text" formControlName="gradient" placeholder="linear-gradient(180deg, #202637, #1c2230)" />
608
895
  </mat-form-field>
609
896
 
610
897
  <label class="slider">
611
- <span>Transparência</span>
898
+ <span>{{ tx('background.alpha', 'Transparencia') }}</span>
612
899
  <mat-slider min="0" max="100" step="5">
613
900
  <input matSliderThumb formControlName="alpha" />
614
901
  </mat-slider>
615
902
  </label>
616
903
  <label class="slider">
617
- <span>Desfoque (px)</span>
904
+ <span>{{ tx('background.blur', 'Desfoque (px)') }}</span>
618
905
  <mat-slider min="0" max="20" step="1">
619
906
  <input matSliderThumb formControlName="blur" />
620
907
  </mat-slider>
621
908
  </label>
622
909
  </div>
623
- `, 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"] }]
624
- }], propDecorators: { group: [{
910
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".fundo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:center;min-width:0}.full{grid-column:1 / -1}mat-form-field,.slider{min-width:0}.slider{display:flex;flex-direction:column;gap:6px}.slider span{white-space:nowrap}mat-slider{width:100%;min-width:0}\n"] }]
911
+ }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
625
912
  type: Input
626
913
  }] } });
627
914
 
628
915
  class AnimacaoEditorComponent {
916
+ i18n;
629
917
  group;
630
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnimacaoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
918
+ constructor(i18n) {
919
+ this.i18n = i18n;
920
+ }
921
+ tx(key, fallback) {
922
+ return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
923
+ }
924
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnimacaoEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
631
925
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: AnimacaoEditorComponent, isStandalone: true, selector: "praxis-effects-animacao-editor", inputs: { group: "group" }, ngImport: i0, template: `
632
- <div class="anim-grid" role="group" aria-label="Editor de animação" [formGroup]="group">
926
+ <div class="anim-grid" role="group" [attr.aria-label]="tx('animation.group', 'Editor de animacao')" [formGroup]="group">
633
927
  <label class="anim-toggle">
634
928
  <input type="checkbox" formControlName="enabled" />
635
- <span>Ativar animação</span>
929
+ <span>{{ tx('animation.enabled', 'Ativar animacao') }}</span>
636
930
  </label>
637
931
  <mat-form-field appearance="outline">
638
- <mat-label>Preset</mat-label>
639
- <select matNativeControl formControlName="preset" aria-label="Preset de animação">
640
- <option value="">Sem preset</option>
932
+ <mat-label>{{ tx('animation.preset', 'Preset') }}</mat-label>
933
+ <select matNativeControl formControlName="preset" [attr.aria-label]="tx('animation.preset.aria', 'Preset de animacao')">
934
+ <option value="">{{ tx('animation.preset.none', 'Sem preset') }}</option>
641
935
  <option value="info-soft">Info Soft</option>
642
936
  <option value="success-confirm">Success Confirm</option>
643
937
  <option value="warning-attention">Warning Attention</option>
@@ -653,9 +947,9 @@ class AnimacaoEditorComponent {
653
947
  </select>
654
948
  </mat-form-field>
655
949
  <mat-form-field appearance="outline">
656
- <mat-label>Tipo</mat-label>
657
- <select matNativeControl formControlName="type" aria-label="Tipo de animação">
658
- <option value="">Padrão do preset</option>
950
+ <mat-label>{{ tx('animation.type', 'Tipo') }}</mat-label>
951
+ <select matNativeControl formControlName="type" [attr.aria-label]="tx('animation.type.aria', 'Tipo de animacao')">
952
+ <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
659
953
  <option value="pulse">Pulse</option>
660
954
  <option value="blink">Blink</option>
661
955
  <option value="grow">Grow</option>
@@ -665,58 +959,58 @@ class AnimacaoEditorComponent {
665
959
  </select>
666
960
  </mat-form-field>
667
961
  <mat-form-field appearance="outline">
668
- <mat-label>Duração (ms)</mat-label>
669
- <input matInput type="number" formControlName="durationMs" placeholder="Preset/default" />
962
+ <mat-label>{{ tx('animation.duration', 'Duracao (ms)') }}</mat-label>
963
+ <input matInput type="number" formControlName="durationMs" [placeholder]="tx('animation.duration.placeholder', 'Preset/default')" />
670
964
  </mat-form-field>
671
965
  <mat-form-field appearance="outline">
672
- <mat-label>Delay (ms)</mat-label>
673
- <input matInput type="number" formControlName="delayMs" placeholder="Opcional" />
966
+ <mat-label>{{ tx('animation.delay', 'Delay (ms)') }}</mat-label>
967
+ <input matInput type="number" formControlName="delayMs" [placeholder]="tx('animation.delay.placeholder', 'Opcional')" />
674
968
  </mat-form-field>
675
969
  <mat-form-field appearance="outline">
676
- <mat-label>Disparo</mat-label>
677
- <select matNativeControl formControlName="trigger" aria-label="Disparo da animação">
678
- <option value="">Padrão do preset</option>
679
- <option value="onChange">Ao mudar</option>
680
- <option value="onAppear">Ao aparecer</option>
681
- <option value="onHover">Ao passar o mouse</option>
682
- <option value="onConditionEnter">Ao entrar na condição</option>
683
- <option value="onConditionExit">Ao sair da condição</option>
684
- <option value="onDataRefresh">Ao atualizar dados</option>
970
+ <mat-label>{{ tx('animation.trigger', 'Disparo') }}</mat-label>
971
+ <select matNativeControl formControlName="trigger" [attr.aria-label]="tx('animation.trigger.aria', 'Disparo da animacao')">
972
+ <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
973
+ <option value="onChange">{{ tx('animation.trigger.onChange', 'Ao mudar') }}</option>
974
+ <option value="onAppear">{{ tx('animation.trigger.onAppear', 'Ao aparecer') }}</option>
975
+ <option value="onHover">{{ tx('animation.trigger.onHover', 'Ao passar o mouse') }}</option>
976
+ <option value="onConditionEnter">{{ tx('animation.trigger.onConditionEnter', 'Ao entrar na condicao') }}</option>
977
+ <option value="onConditionExit">{{ tx('animation.trigger.onConditionExit', 'Ao sair da condicao') }}</option>
978
+ <option value="onDataRefresh">{{ tx('animation.trigger.onDataRefresh', 'Ao atualizar dados') }}</option>
685
979
  </select>
686
980
  </mat-form-field>
687
981
  <mat-form-field appearance="outline">
688
- <mat-label>Repetição</mat-label>
689
- <select matNativeControl formControlName="repeat" aria-label="Repetição da animação">
690
- <option value="">Padrão do preset</option>
691
- <option value="once">Uma vez</option>
692
- <option value="loop">Loop</option>
693
- <option value="infinite">Infinito</option>
982
+ <mat-label>{{ tx('animation.repeat', 'Repeticao') }}</mat-label>
983
+ <select matNativeControl formControlName="repeat" [attr.aria-label]="tx('animation.repeat.aria', 'Repeticao da animacao')">
984
+ <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
985
+ <option value="once">{{ tx('animation.repeat.once', 'Uma vez') }}</option>
986
+ <option value="loop">{{ tx('animation.repeat.loop', 'Loop') }}</option>
987
+ <option value="infinite">{{ tx('animation.repeat.infinite', 'Infinito') }}</option>
694
988
  </select>
695
989
  </mat-form-field>
696
990
  <mat-form-field appearance="outline">
697
- <mat-label>Intensidade</mat-label>
698
- <select matNativeControl formControlName="intensity" aria-label="Intensidade da animação">
699
- <option value="">Padrão do preset</option>
700
- <option value="subtle">Sutil</option>
701
- <option value="normal">Normal</option>
702
- <option value="strong">Forte</option>
991
+ <mat-label>{{ tx('animation.intensity', 'Intensidade') }}</mat-label>
992
+ <select matNativeControl formControlName="intensity" [attr.aria-label]="tx('animation.intensity.aria', 'Intensidade da animacao')">
993
+ <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
994
+ <option value="subtle">{{ tx('animation.intensity.subtle', 'Sutil') }}</option>
995
+ <option value="normal">{{ tx('animation.intensity.normal', 'Normal') }}</option>
996
+ <option value="strong">{{ tx('animation.intensity.strong', 'Forte') }}</option>
703
997
  </select>
704
998
  </mat-form-field>
705
999
  </div>
706
- `, isInline: true, styles: [".anim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.anim-toggle{grid-column:1 / -1;display:inline-flex;align-items:center;gap:8px;color:inherit;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1000
+ `, isInline: true, styles: [".anim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.anim-toggle{grid-column:1 / -1;display:inline-flex;align-items:center;gap:8px;color:inherit;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
707
1001
  }
708
1002
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnimacaoEditorComponent, decorators: [{
709
1003
  type: Component,
710
1004
  args: [{ selector: 'praxis-effects-animacao-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
711
- <div class="anim-grid" role="group" aria-label="Editor de animação" [formGroup]="group">
1005
+ <div class="anim-grid" role="group" [attr.aria-label]="tx('animation.group', 'Editor de animacao')" [formGroup]="group">
712
1006
  <label class="anim-toggle">
713
1007
  <input type="checkbox" formControlName="enabled" />
714
- <span>Ativar animação</span>
1008
+ <span>{{ tx('animation.enabled', 'Ativar animacao') }}</span>
715
1009
  </label>
716
1010
  <mat-form-field appearance="outline">
717
- <mat-label>Preset</mat-label>
718
- <select matNativeControl formControlName="preset" aria-label="Preset de animação">
719
- <option value="">Sem preset</option>
1011
+ <mat-label>{{ tx('animation.preset', 'Preset') }}</mat-label>
1012
+ <select matNativeControl formControlName="preset" [attr.aria-label]="tx('animation.preset.aria', 'Preset de animacao')">
1013
+ <option value="">{{ tx('animation.preset.none', 'Sem preset') }}</option>
720
1014
  <option value="info-soft">Info Soft</option>
721
1015
  <option value="success-confirm">Success Confirm</option>
722
1016
  <option value="warning-attention">Warning Attention</option>
@@ -732,9 +1026,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
732
1026
  </select>
733
1027
  </mat-form-field>
734
1028
  <mat-form-field appearance="outline">
735
- <mat-label>Tipo</mat-label>
736
- <select matNativeControl formControlName="type" aria-label="Tipo de animação">
737
- <option value="">Padrão do preset</option>
1029
+ <mat-label>{{ tx('animation.type', 'Tipo') }}</mat-label>
1030
+ <select matNativeControl formControlName="type" [attr.aria-label]="tx('animation.type.aria', 'Tipo de animacao')">
1031
+ <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
738
1032
  <option value="pulse">Pulse</option>
739
1033
  <option value="blink">Blink</option>
740
1034
  <option value="grow">Grow</option>
@@ -744,106 +1038,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
744
1038
  </select>
745
1039
  </mat-form-field>
746
1040
  <mat-form-field appearance="outline">
747
- <mat-label>Duração (ms)</mat-label>
748
- <input matInput type="number" formControlName="durationMs" placeholder="Preset/default" />
1041
+ <mat-label>{{ tx('animation.duration', 'Duracao (ms)') }}</mat-label>
1042
+ <input matInput type="number" formControlName="durationMs" [placeholder]="tx('animation.duration.placeholder', 'Preset/default')" />
749
1043
  </mat-form-field>
750
1044
  <mat-form-field appearance="outline">
751
- <mat-label>Delay (ms)</mat-label>
752
- <input matInput type="number" formControlName="delayMs" placeholder="Opcional" />
1045
+ <mat-label>{{ tx('animation.delay', 'Delay (ms)') }}</mat-label>
1046
+ <input matInput type="number" formControlName="delayMs" [placeholder]="tx('animation.delay.placeholder', 'Opcional')" />
753
1047
  </mat-form-field>
754
1048
  <mat-form-field appearance="outline">
755
- <mat-label>Disparo</mat-label>
756
- <select matNativeControl formControlName="trigger" aria-label="Disparo da animação">
757
- <option value="">Padrão do preset</option>
758
- <option value="onChange">Ao mudar</option>
759
- <option value="onAppear">Ao aparecer</option>
760
- <option value="onHover">Ao passar o mouse</option>
761
- <option value="onConditionEnter">Ao entrar na condição</option>
762
- <option value="onConditionExit">Ao sair da condição</option>
763
- <option value="onDataRefresh">Ao atualizar dados</option>
1049
+ <mat-label>{{ tx('animation.trigger', 'Disparo') }}</mat-label>
1050
+ <select matNativeControl formControlName="trigger" [attr.aria-label]="tx('animation.trigger.aria', 'Disparo da animacao')">
1051
+ <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
1052
+ <option value="onChange">{{ tx('animation.trigger.onChange', 'Ao mudar') }}</option>
1053
+ <option value="onAppear">{{ tx('animation.trigger.onAppear', 'Ao aparecer') }}</option>
1054
+ <option value="onHover">{{ tx('animation.trigger.onHover', 'Ao passar o mouse') }}</option>
1055
+ <option value="onConditionEnter">{{ tx('animation.trigger.onConditionEnter', 'Ao entrar na condicao') }}</option>
1056
+ <option value="onConditionExit">{{ tx('animation.trigger.onConditionExit', 'Ao sair da condicao') }}</option>
1057
+ <option value="onDataRefresh">{{ tx('animation.trigger.onDataRefresh', 'Ao atualizar dados') }}</option>
764
1058
  </select>
765
1059
  </mat-form-field>
766
1060
  <mat-form-field appearance="outline">
767
- <mat-label>Repetição</mat-label>
768
- <select matNativeControl formControlName="repeat" aria-label="Repetição da animação">
769
- <option value="">Padrão do preset</option>
770
- <option value="once">Uma vez</option>
771
- <option value="loop">Loop</option>
772
- <option value="infinite">Infinito</option>
1061
+ <mat-label>{{ tx('animation.repeat', 'Repeticao') }}</mat-label>
1062
+ <select matNativeControl formControlName="repeat" [attr.aria-label]="tx('animation.repeat.aria', 'Repeticao da animacao')">
1063
+ <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
1064
+ <option value="once">{{ tx('animation.repeat.once', 'Uma vez') }}</option>
1065
+ <option value="loop">{{ tx('animation.repeat.loop', 'Loop') }}</option>
1066
+ <option value="infinite">{{ tx('animation.repeat.infinite', 'Infinito') }}</option>
773
1067
  </select>
774
1068
  </mat-form-field>
775
1069
  <mat-form-field appearance="outline">
776
- <mat-label>Intensidade</mat-label>
777
- <select matNativeControl formControlName="intensity" aria-label="Intensidade da animação">
778
- <option value="">Padrão do preset</option>
779
- <option value="subtle">Sutil</option>
780
- <option value="normal">Normal</option>
781
- <option value="strong">Forte</option>
1070
+ <mat-label>{{ tx('animation.intensity', 'Intensidade') }}</mat-label>
1071
+ <select matNativeControl formControlName="intensity" [attr.aria-label]="tx('animation.intensity.aria', 'Intensidade da animacao')">
1072
+ <option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</option>
1073
+ <option value="subtle">{{ tx('animation.intensity.subtle', 'Sutil') }}</option>
1074
+ <option value="normal">{{ tx('animation.intensity.normal', 'Normal') }}</option>
1075
+ <option value="strong">{{ tx('animation.intensity.strong', 'Forte') }}</option>
782
1076
  </select>
783
1077
  </mat-form-field>
784
1078
  </div>
785
1079
  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".anim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.anim-toggle{grid-column:1 / -1;display:inline-flex;align-items:center;gap:8px;color:inherit;font-size:.9rem}\n"] }]
786
- }], propDecorators: { group: [{
1080
+ }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
787
1081
  type: Input
788
1082
  }] } });
789
1083
 
790
1084
  class TooltipEditorComponent {
1085
+ i18n;
791
1086
  group;
792
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1087
+ constructor(i18n) {
1088
+ this.i18n = i18n;
1089
+ }
1090
+ tx(key, fallback) {
1091
+ return this.i18n.t(key, undefined, fallback, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
1092
+ }
1093
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipEditorComponent, deps: [{ token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
793
1094
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: TooltipEditorComponent, isStandalone: true, selector: "praxis-effects-tooltip-editor", inputs: { group: "group" }, ngImport: i0, template: `
794
- <div class="tooltip-grid" role="group" aria-label="Editor de tooltip" [formGroup]="group">
1095
+ <div class="tooltip-grid" role="group" [attr.aria-label]="tx('tooltip.group', 'Editor de tooltip')" [formGroup]="group">
795
1096
  <mat-form-field appearance="outline" class="full">
796
- <mat-label>Texto</mat-label>
797
- <input matInput type="text" formControlName="text" placeholder="Detalhes da célula" />
1097
+ <mat-label>{{ tx('tooltip.text', 'Texto') }}</mat-label>
1098
+ <input matInput type="text" formControlName="text" [placeholder]="tx('tooltip.text.placeholder', 'Detalhes da celula')" />
798
1099
  </mat-form-field>
799
1100
  <mat-form-field appearance="outline">
800
- <mat-label>Posição</mat-label>
801
- <select matNativeControl formControlName="position" aria-label="Posição do tooltip">
802
- <option value="top">Topo</option>
803
- <option value="right">Direita</option>
804
- <option value="bottom">Baixo</option>
805
- <option value="left">Esquerda</option>
1101
+ <mat-label>{{ tx('tooltip.position', 'Posicao') }}</mat-label>
1102
+ <select matNativeControl formControlName="position" [attr.aria-label]="tx('tooltip.position.aria', 'Posicao do tooltip')">
1103
+ <option value="top">{{ tx('tooltip.position.top', 'Topo') }}</option>
1104
+ <option value="right">{{ tx('tooltip.position.right', 'Direita') }}</option>
1105
+ <option value="bottom">{{ tx('tooltip.position.bottom', 'Baixo') }}</option>
1106
+ <option value="left">{{ tx('tooltip.position.left', 'Esquerda') }}</option>
806
1107
  </select>
807
1108
  </mat-form-field>
808
1109
  <mat-form-field appearance="outline">
809
- <mat-label>Cor do fundo</mat-label>
1110
+ <mat-label>{{ tx('tooltip.backgroundColor', 'Cor do fundo') }}</mat-label>
810
1111
  <input matInput type="text" formControlName="bgColor" placeholder="#2E3142" />
811
1112
  </mat-form-field>
812
1113
  <mat-form-field appearance="outline">
813
- <mat-label>Delay (ms)</mat-label>
1114
+ <mat-label>{{ tx('tooltip.delay', 'Delay (ms)') }}</mat-label>
814
1115
  <input matInput type="number" formControlName="delayMs" placeholder="300" />
815
1116
  </mat-form-field>
816
1117
  </div>
817
- `, isInline: true, styles: [".tooltip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1118
+ `, isInline: true, styles: [".tooltip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
818
1119
  }
819
1120
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipEditorComponent, decorators: [{
820
1121
  type: Component,
821
1122
  args: [{ selector: 'praxis-effects-tooltip-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
822
- <div class="tooltip-grid" role="group" aria-label="Editor de tooltip" [formGroup]="group">
1123
+ <div class="tooltip-grid" role="group" [attr.aria-label]="tx('tooltip.group', 'Editor de tooltip')" [formGroup]="group">
823
1124
  <mat-form-field appearance="outline" class="full">
824
- <mat-label>Texto</mat-label>
825
- <input matInput type="text" formControlName="text" placeholder="Detalhes da célula" />
1125
+ <mat-label>{{ tx('tooltip.text', 'Texto') }}</mat-label>
1126
+ <input matInput type="text" formControlName="text" [placeholder]="tx('tooltip.text.placeholder', 'Detalhes da celula')" />
826
1127
  </mat-form-field>
827
1128
  <mat-form-field appearance="outline">
828
- <mat-label>Posição</mat-label>
829
- <select matNativeControl formControlName="position" aria-label="Posição do tooltip">
830
- <option value="top">Topo</option>
831
- <option value="right">Direita</option>
832
- <option value="bottom">Baixo</option>
833
- <option value="left">Esquerda</option>
1129
+ <mat-label>{{ tx('tooltip.position', 'Posicao') }}</mat-label>
1130
+ <select matNativeControl formControlName="position" [attr.aria-label]="tx('tooltip.position.aria', 'Posicao do tooltip')">
1131
+ <option value="top">{{ tx('tooltip.position.top', 'Topo') }}</option>
1132
+ <option value="right">{{ tx('tooltip.position.right', 'Direita') }}</option>
1133
+ <option value="bottom">{{ tx('tooltip.position.bottom', 'Baixo') }}</option>
1134
+ <option value="left">{{ tx('tooltip.position.left', 'Esquerda') }}</option>
834
1135
  </select>
835
1136
  </mat-form-field>
836
1137
  <mat-form-field appearance="outline">
837
- <mat-label>Cor do fundo</mat-label>
1138
+ <mat-label>{{ tx('tooltip.backgroundColor', 'Cor do fundo') }}</mat-label>
838
1139
  <input matInput type="text" formControlName="bgColor" placeholder="#2E3142" />
839
1140
  </mat-form-field>
840
1141
  <mat-form-field appearance="outline">
841
- <mat-label>Delay (ms)</mat-label>
1142
+ <mat-label>{{ tx('tooltip.delay', 'Delay (ms)') }}</mat-label>
842
1143
  <input matInput type="number" formControlName="delayMs" placeholder="300" />
843
1144
  </mat-form-field>
844
1145
  </div>
845
1146
  `, 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"] }]
846
- }], propDecorators: { group: [{
1147
+ }], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
847
1148
  type: Input
848
1149
  }] } });
849
1150
 
@@ -869,6 +1170,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
869
1170
  class RuleEffectsPanelComponent {
870
1171
  fb;
871
1172
  registry;
1173
+ i18n;
1174
+ static DEFAULT_ESTILO_FORM_VALUE = {
1175
+ color: '#ffffff',
1176
+ bgColor: '',
1177
+ bold: false,
1178
+ italic: false,
1179
+ underline: false,
1180
+ transform: null,
1181
+ opacity: 1,
1182
+ fontScale: 0,
1183
+ };
1184
+ static DEFAULT_LAYOUT_FORM_VALUE = {
1185
+ border: 'none',
1186
+ borderColor: '#487BFF',
1187
+ borderWidth: 2,
1188
+ padding: 6,
1189
+ align: 'start',
1190
+ elevation: 6,
1191
+ };
1192
+ static DEFAULT_ICON_BADGE_FORM_VALUE = {
1193
+ icon: 'check_circle',
1194
+ iconColor: '#35D07F',
1195
+ iconPos: 'before',
1196
+ badgeText: '',
1197
+ badgeStyle: 'soft',
1198
+ badgeColor: '#2a8455',
1199
+ };
1200
+ static DEFAULT_BACKGROUND_FORM_VALUE = {
1201
+ color: '#122033',
1202
+ gradient: '',
1203
+ alpha: 0,
1204
+ blur: 0,
1205
+ };
872
1206
  static DEFAULT_ANIMATION_FORM_VALUE = {
873
1207
  enabled: true,
874
1208
  preset: '',
@@ -879,25 +1213,27 @@ class RuleEffectsPanelComponent {
879
1213
  delayMs: null,
880
1214
  intensity: '',
881
1215
  };
882
- // i18n-friendly labels map
883
- labels = {
884
- 'panel.title': 'C. Efeitos',
885
- 'panel.subtitle': 'Configure estilos e elementos visuais quando a regra for verdadeira',
886
- 'tabs.estilo': 'Estilo',
887
- 'tabs.layout': 'Layout',
888
- 'tabs.icone': 'Ícone / Badge',
889
- 'tabs.fundo': 'Fundo',
890
- 'tabs.animacao': 'Animação',
891
- 'tabs.tooltip': 'Tooltip',
892
- 'preview.title': 'Pré-visualização',
893
- 'preview.hint': 'As mudanças acima refletem o estilo aplicado quando a condição é verdadeira.',
894
- 'advanced.title': 'Avançado',
895
- 'advanced.description': 'Descrição',
896
- 'actions.apply': 'Aplicar',
897
- 'actions.reset': 'Redefinir',
898
- 'presets.label': 'Presets',
1216
+ static DEFAULT_TOOLTIP_FORM_VALUE = {
1217
+ text: '',
1218
+ position: 'bottom',
1219
+ bgColor: '#2E3142',
1220
+ delayMs: 300,
899
1221
  };
900
- t(key) { return this.labels[key] ?? key; }
1222
+ _labelOverrides = {};
1223
+ // Host-specific overrides take precedence over the component i18n catalog.
1224
+ set labels(value) {
1225
+ this._labelOverrides = { ...(value ?? {}) };
1226
+ }
1227
+ get labels() {
1228
+ return PRAXIS_TABLE_RULE_BUILDER_LABEL_KEYS.reduce((acc, key) => {
1229
+ acc[key] = this.t(key);
1230
+ return acc;
1231
+ }, {});
1232
+ }
1233
+ t(key) {
1234
+ return this._labelOverrides[key]
1235
+ ?? this.i18n.t(key, undefined, key, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE);
1236
+ }
901
1237
  scope = 'row';
902
1238
  _value;
903
1239
  set value(v) {
@@ -914,9 +1250,10 @@ class RuleEffectsPanelComponent {
914
1250
  destroy$ = new Subject();
915
1251
  isHovering = false;
916
1252
  tabOrder = ['estilo', 'layout', 'icone', 'fundo', 'animacao', 'tooltip'];
917
- constructor(fb, registry) {
1253
+ constructor(fb, registry, i18n) {
918
1254
  this.fb = fb;
919
1255
  this.registry = registry;
1256
+ this.i18n = i18n;
920
1257
  }
921
1258
  ngOnInit() {
922
1259
  // Register built-in editors for the registry (extensible)
@@ -929,36 +1266,36 @@ class RuleEffectsPanelComponent {
929
1266
  this.effectsForm = this.fb.group({
930
1267
  description: [''],
931
1268
  estilo: this.fb.group({
932
- color: ['#ffffff'],
933
- bgColor: [''],
934
- bold: [false],
935
- italic: [false],
936
- underline: [false],
937
- transform: [null],
938
- opacity: [1],
939
- fontScale: [0],
1269
+ color: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.color],
1270
+ bgColor: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.bgColor],
1271
+ bold: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.bold],
1272
+ italic: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.italic],
1273
+ underline: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.underline],
1274
+ transform: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.transform],
1275
+ opacity: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.opacity],
1276
+ fontScale: [RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.fontScale],
940
1277
  }),
941
1278
  layout: this.fb.group({
942
- border: ['none'],
943
- borderColor: ['#487BFF'],
944
- borderWidth: [2],
945
- padding: [6],
946
- align: ['start'],
947
- elevation: [6],
1279
+ border: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.border],
1280
+ borderColor: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.borderColor],
1281
+ borderWidth: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.borderWidth],
1282
+ padding: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.padding],
1283
+ align: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.align],
1284
+ elevation: [RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.elevation],
948
1285
  }),
949
1286
  iconBadge: this.fb.group({
950
- icon: ['check_circle'],
951
- iconColor: ['#35D07F'],
952
- iconPos: ['before'],
953
- badgeText: [''],
954
- badgeStyle: ['soft'],
955
- badgeColor: ['#2a8455'],
1287
+ icon: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.icon],
1288
+ iconColor: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.iconColor],
1289
+ iconPos: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.iconPos],
1290
+ badgeText: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.badgeText],
1291
+ badgeStyle: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.badgeStyle],
1292
+ badgeColor: [RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.badgeColor],
956
1293
  }),
957
1294
  background: this.fb.group({
958
- color: ['#122033'],
959
- gradient: [''],
960
- alpha: [0],
961
- blur: [0],
1295
+ color: [RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.color],
1296
+ gradient: [RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.gradient],
1297
+ alpha: [RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.alpha],
1298
+ blur: [RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.blur],
962
1299
  }),
963
1300
  animation: this.fb.group({
964
1301
  enabled: [RuleEffectsPanelComponent.DEFAULT_ANIMATION_FORM_VALUE.enabled],
@@ -971,10 +1308,10 @@ class RuleEffectsPanelComponent {
971
1308
  intensity: [RuleEffectsPanelComponent.DEFAULT_ANIMATION_FORM_VALUE.intensity],
972
1309
  }),
973
1310
  tooltip: this.fb.group({
974
- text: [''],
975
- position: ['bottom'],
976
- bgColor: ['#2E3142'],
977
- delayMs: [300],
1311
+ text: [RuleEffectsPanelComponent.DEFAULT_TOOLTIP_FORM_VALUE.text],
1312
+ position: [RuleEffectsPanelComponent.DEFAULT_TOOLTIP_FORM_VALUE.position],
1313
+ bgColor: [RuleEffectsPanelComponent.DEFAULT_TOOLTIP_FORM_VALUE.bgColor],
1314
+ delayMs: [RuleEffectsPanelComponent.DEFAULT_TOOLTIP_FORM_VALUE.delayMs],
978
1315
  }),
979
1316
  cssClass: [''],
980
1317
  inlineStyle: [''],
@@ -988,10 +1325,7 @@ class RuleEffectsPanelComponent {
988
1325
  this.patchForm(this._value);
989
1326
  }
990
1327
  patchForm(v) {
991
- const animationGroup = this.effectsForm.get('animation');
992
- if (animationGroup) {
993
- animationGroup.reset(RuleEffectsPanelComponent.DEFAULT_ANIMATION_FORM_VALUE, { emitEvent: false });
994
- }
1328
+ this.effectsForm.reset(this.createDefaultFormValue(), { emitEvent: false });
995
1329
  this.effectsForm.patchValue(v, { emitEvent: false });
996
1330
  }
997
1331
  setTab(tab) {
@@ -1009,7 +1343,7 @@ class RuleEffectsPanelComponent {
1009
1343
  this.apply.emit();
1010
1344
  }
1011
1345
  onReset() {
1012
- this.effectsForm.reset();
1346
+ this.effectsForm.reset(this.createDefaultFormValue());
1013
1347
  this.reset.emit();
1014
1348
  }
1015
1349
  ngOnDestroy() {
@@ -1064,9 +1398,17 @@ class RuleEffectsPanelComponent {
1064
1398
  computeCellStyle(v) {
1065
1399
  const b = v?.background || {};
1066
1400
  const ly = v?.layout || {};
1067
- const bg = b.gradient ? b.gradient : (b.color || 'transparent');
1401
+ const estilo = v?.estilo || {};
1402
+ const backgroundColor = this.nonEmptyString(b.color);
1403
+ const gradient = this.nonEmptyString(b.gradient);
1404
+ const textBackgroundColor = this.nonEmptyString(estilo.bgColor);
1405
+ const hasDeliberateBackgroundColor = backgroundColor
1406
+ && backgroundColor !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.color;
1407
+ const bg = gradient || (hasDeliberateBackgroundColor ? backgroundColor : textBackgroundColor) || 'transparent';
1068
1408
  const alpha = (b.alpha ?? 0) / 100;
1069
- const bgWithAlpha = b.color ? `color-mix(in srgb, ${b.color} ${100 - alpha * 100}%, transparent)` : bg;
1409
+ const bgWithAlpha = hasDeliberateBackgroundColor
1410
+ ? `color-mix(in srgb, ${backgroundColor} ${100 - alpha * 100}%, transparent)`
1411
+ : bg;
1070
1412
  const borderColor = ly.borderColor || 'transparent';
1071
1413
  const borderWidth = (ly.borderWidth ?? 0) + 'px';
1072
1414
  const borderStyle = ly.border === 'none' ? 'none' : `${borderWidth} solid ${borderColor}`;
@@ -1158,16 +1500,156 @@ class RuleEffectsPanelComponent {
1158
1500
  return s?.badgeStyle === 'outline' ? s.badgeColor || '#777' : '#0000';
1159
1501
  }
1160
1502
  toEffectDefinitionForEmit(formValue) {
1161
- const value = { scope: this.scope, ...(formValue || {}) };
1503
+ const value = { scope: this.scope };
1504
+ const raw = formValue || {};
1505
+ const description = this.nonEmptyString(raw.description);
1506
+ if (description)
1507
+ value.description = description;
1508
+ const estilo = raw.estilo || {};
1509
+ const normalizedEstilo = {};
1510
+ const color = this.nonEmptyString(estilo.color);
1511
+ const bgColor = this.nonEmptyString(estilo.bgColor);
1512
+ const transform = this.nonEmptyString(estilo.transform);
1513
+ if (color && color !== RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE.color)
1514
+ normalizedEstilo.color = color;
1515
+ if (bgColor)
1516
+ normalizedEstilo.bgColor = bgColor;
1517
+ if (estilo.bold === true)
1518
+ normalizedEstilo.bold = true;
1519
+ if (estilo.italic === true)
1520
+ normalizedEstilo.italic = true;
1521
+ if (estilo.underline === true)
1522
+ normalizedEstilo.underline = true;
1523
+ if (transform)
1524
+ normalizedEstilo.transform = transform;
1525
+ const opacity = this.toFiniteNumber(estilo.opacity);
1526
+ if (opacity !== undefined && opacity !== 1)
1527
+ normalizedEstilo.opacity = opacity;
1528
+ const fontScale = this.toFiniteNumber(estilo.fontScale);
1529
+ if (fontScale !== undefined && fontScale !== 0)
1530
+ normalizedEstilo.fontScale = fontScale;
1531
+ if (Object.keys(normalizedEstilo).length)
1532
+ value.estilo = normalizedEstilo;
1533
+ const layout = raw.layout || {};
1534
+ const normalizedLayout = {};
1535
+ const border = this.nonEmptyString(layout.border);
1536
+ const borderColor = this.nonEmptyString(layout.borderColor);
1537
+ const align = this.nonEmptyString(layout.align);
1538
+ if (border && border !== RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.border) {
1539
+ normalizedLayout.border = border;
1540
+ if (borderColor)
1541
+ normalizedLayout.borderColor = borderColor;
1542
+ const borderWidth = this.toFiniteNumber(layout.borderWidth);
1543
+ if (borderWidth !== undefined)
1544
+ normalizedLayout.borderWidth = borderWidth;
1545
+ }
1546
+ const padding = this.toFiniteNumber(layout.padding);
1547
+ if (padding !== undefined && padding !== RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.padding)
1548
+ normalizedLayout.padding = padding;
1549
+ if (align && align !== RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.align)
1550
+ normalizedLayout.align = align;
1551
+ const elevation = this.toFiniteNumber(layout.elevation);
1552
+ if (elevation !== undefined && elevation !== RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE.elevation)
1553
+ normalizedLayout.elevation = elevation;
1554
+ if (Object.keys(normalizedLayout).length)
1555
+ value.layout = normalizedLayout;
1556
+ const iconBadge = raw.iconBadge || {};
1557
+ const normalizedIconBadge = {};
1558
+ const icon = this.nonEmptyString(iconBadge.icon);
1559
+ const badgeText = this.nonEmptyString(iconBadge.badgeText);
1560
+ const iconChanged = icon && icon !== RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.icon;
1561
+ const iconColor = this.nonEmptyString(iconBadge.iconColor);
1562
+ const iconColorChanged = iconColor && iconColor !== RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.iconColor;
1563
+ const iconPos = this.nonEmptyString(iconBadge.iconPos);
1564
+ const iconPosChanged = iconPos && iconPos !== RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.iconPos;
1565
+ if (iconChanged || iconColorChanged || iconPosChanged) {
1566
+ normalizedIconBadge.icon = icon || RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.icon;
1567
+ if (iconColor)
1568
+ normalizedIconBadge.iconColor = iconColor;
1569
+ if (iconPos)
1570
+ normalizedIconBadge.iconPos = iconPos;
1571
+ }
1572
+ if (badgeText) {
1573
+ normalizedIconBadge.badgeText = badgeText;
1574
+ const badgeStyle = this.nonEmptyString(iconBadge.badgeStyle);
1575
+ const badgeColor = this.nonEmptyString(iconBadge.badgeColor);
1576
+ if (badgeStyle && badgeStyle !== RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.badgeStyle)
1577
+ normalizedIconBadge.badgeStyle = badgeStyle;
1578
+ if (badgeColor && badgeColor !== RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE.badgeColor)
1579
+ normalizedIconBadge.badgeColor = badgeColor;
1580
+ }
1581
+ if (Object.keys(normalizedIconBadge).length)
1582
+ value.iconBadge = normalizedIconBadge;
1583
+ const background = raw.background || {};
1584
+ const normalizedBackground = {};
1585
+ const backgroundColor = this.nonEmptyString(background.color);
1586
+ const gradient = this.nonEmptyString(background.gradient);
1587
+ if (gradient)
1588
+ normalizedBackground.gradient = gradient;
1589
+ const alpha = this.toFiniteNumber(background.alpha);
1590
+ const blur = this.toFiniteNumber(background.blur);
1591
+ const hasBackgroundAdjustment = (alpha !== undefined && alpha !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.alpha)
1592
+ || (blur !== undefined && blur !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.blur);
1593
+ if (backgroundColor && (backgroundColor !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.color || hasBackgroundAdjustment)) {
1594
+ normalizedBackground.color = backgroundColor;
1595
+ }
1596
+ if (alpha !== undefined && alpha !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.alpha && (normalizedBackground.color || normalizedBackground.gradient))
1597
+ normalizedBackground.alpha = alpha;
1598
+ if (blur !== undefined && blur !== RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE.blur && (normalizedBackground.color || normalizedBackground.gradient))
1599
+ normalizedBackground.blur = blur;
1600
+ if (Object.keys(normalizedBackground).length)
1601
+ value.background = normalizedBackground;
1602
+ const tooltip = raw.tooltip || {};
1603
+ const tooltipText = this.nonEmptyString(tooltip.text);
1604
+ if (tooltipText) {
1605
+ const normalizedTooltip = { text: tooltipText };
1606
+ const position = this.nonEmptyString(tooltip.position);
1607
+ const bgColor = this.nonEmptyString(tooltip.bgColor);
1608
+ const delayMs = this.toNonNegativeMs(tooltip.delayMs);
1609
+ if (position)
1610
+ normalizedTooltip.position = position;
1611
+ if (bgColor)
1612
+ normalizedTooltip.bgColor = bgColor;
1613
+ if (delayMs !== undefined)
1614
+ normalizedTooltip.delayMs = delayMs;
1615
+ value.tooltip = normalizedTooltip;
1616
+ }
1617
+ const cssClass = this.nonEmptyString(raw.cssClass);
1618
+ const inlineStyle = this.nonEmptyString(raw.inlineStyle);
1619
+ if (cssClass)
1620
+ value.cssClass = cssClass;
1621
+ if (inlineStyle)
1622
+ value.inlineStyle = inlineStyle;
1162
1623
  const normalizedAnimation = this.normalizeAnimationForEmit((formValue || {}).animation);
1163
1624
  if (normalizedAnimation) {
1164
1625
  value.animation = normalizedAnimation;
1165
1626
  }
1166
- else {
1167
- delete value.animation;
1168
- }
1169
1627
  return value;
1170
1628
  }
1629
+ nonEmptyString(value) {
1630
+ return typeof value === 'string' ? value.trim() : '';
1631
+ }
1632
+ toFiniteNumber(value) {
1633
+ if (value === null || value === undefined)
1634
+ return undefined;
1635
+ if (typeof value === 'string' && !value.trim())
1636
+ return undefined;
1637
+ const parsed = Number(value);
1638
+ return Number.isFinite(parsed) ? parsed : undefined;
1639
+ }
1640
+ createDefaultFormValue() {
1641
+ return {
1642
+ description: '',
1643
+ estilo: { ...RuleEffectsPanelComponent.DEFAULT_ESTILO_FORM_VALUE },
1644
+ layout: { ...RuleEffectsPanelComponent.DEFAULT_LAYOUT_FORM_VALUE },
1645
+ iconBadge: { ...RuleEffectsPanelComponent.DEFAULT_ICON_BADGE_FORM_VALUE },
1646
+ background: { ...RuleEffectsPanelComponent.DEFAULT_BACKGROUND_FORM_VALUE },
1647
+ animation: { ...RuleEffectsPanelComponent.DEFAULT_ANIMATION_FORM_VALUE },
1648
+ tooltip: { ...RuleEffectsPanelComponent.DEFAULT_TOOLTIP_FORM_VALUE },
1649
+ cssClass: '',
1650
+ inlineStyle: '',
1651
+ };
1652
+ }
1171
1653
  normalizeAnimationForEmit(animation) {
1172
1654
  if (!animation)
1173
1655
  return undefined;
@@ -1209,8 +1691,8 @@ class RuleEffectsPanelComponent {
1209
1691
  const parsed = Number(value);
1210
1692
  return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed) : undefined;
1211
1693
  }
1212
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RuleEffectsPanelComponent, deps: [{ token: i1.FormBuilder }, { token: EffectRegistryService }], target: i0.ɵɵFactoryTarget.Component });
1213
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RuleEffectsPanelComponent, isStandalone: true, selector: "praxis-rule-effects-panel", inputs: { scope: "scope", value: "value" }, outputs: { valueChange: "valueChange", apply: "apply", reset: "reset" }, ngImport: i0, template: "<div class=\"rulefx\">\n <header class=\"rulefx__header\">\n <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n <div class=\"rulefx__actions\">\n <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <mat-icon>bookmarks</mat-icon>\n {{ t('presets.label') }}\n </button>\n <mat-menu #presetsMenu=\"matMenu\">\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> Aprovado</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> Alerta</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> Erro</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> Info</button>\n </mat-menu>\n <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n <mat-icon>done</mat-icon>\n {{ t('actions.apply') }}\n </button>\n <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n <mat-icon>restart_alt</mat-icon>\n {{ t('actions.reset') }}\n </button>\n </div>\n </header>\n\n <!-- Ribbon com seis categorias -->\n <nav\n class=\"rulefx__ribbon\"\n aria-label=\"Categorias de efeitos\"\n role=\"tablist\"\n (keydown)=\"onTabsKeydown($event)\"\n >\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'estilo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'estilo'\"\n [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('estilo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.estilo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">text_format</span>\n <span>{{ t('tabs.estilo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'layout'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'layout'\"\n [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('layout')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.layout')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">view_quilt</span>\n <span>{{ t('tabs.layout') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'icone'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'icone'\"\n [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('icone')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.icone')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">verified</span>\n <span>{{ t('tabs.icone') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'fundo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'fundo'\"\n [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('fundo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.fundo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">gradient</span>\n <span>{{ t('tabs.fundo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'animacao'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'animacao'\"\n [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('animacao')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.animacao')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">animation</span>\n <span>{{ t('tabs.animacao') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'tooltip'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'tooltip'\"\n [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.tooltip')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">info</span>\n <span>{{ t('tabs.tooltip') }}</span>\n </button>\n </nav>\n\n <!-- Quickbar contextual -->\n @if (effectsForm) {\n <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n @switch (activeTab) {\n @case ('estilo') {\n <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n }\n @case ('layout') {\n <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n }\n @case ('icone') {\n <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n }\n @case ('fundo') {\n <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n }\n @case ('animacao') {\n <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n }\n @case ('tooltip') {\n <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n }\n }\n </section>\n }\n\n <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n <section class=\"rulefx__body\">\n <div class=\"rulefx__preview\">\n <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n <div\n class=\"preview__cell\"\n [ngStyle]=\"computeCellStyle(formValue)\"\n [ngClass]=\"computeCellClass(formValue)\"\n (mouseenter)=\"onHoverPreview(true)\"\n (mouseleave)=\"onHoverPreview(false)\"\n >\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n\n <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n Joana Silva \u2014 Ativo desde 2019\n </span>\n\n @if (formValue.iconBadge?.badgeText) {\n <span\n class=\"preview__badge\"\n [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n >\n {{ formValue.iconBadge?.badgeText }}\n </span>\n }\n\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n </div>\n\n <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n </div>\n\n <div class=\"rulefx__advanced\">\n <details class=\"advanced__section\">\n <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n <label class=\"textctl\">\n <span>{{ t('advanced.description') }}</span>\n <input type=\"text\" formControlName=\"description\" placeholder=\"ex.: Destacar pre\u00E7os altos\" />\n </label>\n <label class=\"textctl\">\n <span>Classe CSS</span>\n <input type=\"text\" formControlName=\"cssClass\" placeholder=\"ex.: praxis-cell--alert\" />\n </label>\n <label class=\"textctl\">\n <span>Estilo inline</span>\n <input type=\"text\" formControlName=\"inlineStyle\" placeholder=\"ex.: text-shadow: 0 0 8px rgba(0,255,163,.5)\" />\n </label>\n </div>\n </details>\n </div>\n </section>\n</div>\n", styles: [".rulefx{background:linear-gradient(180deg,#171b24,#1e2431);border-radius:14px;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 24px #00000047;padding:12px}.rulefx__header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px}.rulefx__title{margin:0;font-size:1.05rem}.rulefx__subtitle{margin:0;opacity:.75;font-size:.9rem}.rulefx__actions{display:inline-flex;gap:8px;align-items:center}.rulefx__ribbon{display:flex;gap:6px;padding:8px;border-radius:10px;background:linear-gradient(180deg,#202636,#1c2230);margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:transparent;color:#e7ecf6;cursor:pointer;border:none}.ribbon__tab.is-active{background:linear-gradient(180deg,#2a3550,#243149);box-shadow:inset 0 0 0 1px #ffffff0a}.rulefx__quickbar{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;background:linear-gradient(180deg,#202637,#1c2230);margin-bottom:10px}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;background:linear-gradient(180deg,#202637,#1c2230)}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#35d07f14;border:1px solid rgba(53,208,127,.25)}.preview__icon{font-size:18px;line-height:1}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:#151a24;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "component", type: EstiloEditorComponent, selector: "praxis-effects-estilo-editor", inputs: ["group"] }, { kind: "component", type: LayoutEditorComponent, selector: "praxis-effects-layout-editor", inputs: ["group"] }, { kind: "component", type: IconeBadgeEditorComponent, selector: "praxis-effects-icone-badge-editor", inputs: ["group"] }, { kind: "component", type: FundoEditorComponent, selector: "praxis-effects-fundo-editor", inputs: ["group"] }, { kind: "component", type: AnimacaoEditorComponent, selector: "praxis-effects-animacao-editor", inputs: ["group"] }, { kind: "component", type: TooltipEditorComponent, selector: "praxis-effects-tooltip-editor", inputs: ["group"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1694
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RuleEffectsPanelComponent, deps: [{ token: i2.FormBuilder }, { token: EffectRegistryService }, { token: i1.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
1695
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RuleEffectsPanelComponent, isStandalone: true, selector: "praxis-rule-effects-panel", inputs: { labels: "labels", scope: "scope", value: "value" }, outputs: { valueChange: "valueChange", apply: "apply", reset: "reset" }, providers: [providePraxisI18nConfig(PRAXIS_TABLE_RULE_BUILDER_I18N_CONFIG)], ngImport: i0, template: "<div class=\"rulefx\">\n <header class=\"rulefx__header\">\n <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n <div class=\"rulefx__actions\">\n <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <mat-icon>bookmarks</mat-icon>\n {{ t('presets.label') }}\n </button>\n <mat-menu #presetsMenu=\"matMenu\">\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> {{ t('presets.aprovado') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> {{ t('presets.alerta') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> {{ t('presets.erro') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> {{ t('presets.info') }}</button>\n </mat-menu>\n <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n <mat-icon>done</mat-icon>\n {{ t('actions.apply') }}\n </button>\n <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n <mat-icon>restart_alt</mat-icon>\n {{ t('actions.reset') }}\n </button>\n </div>\n </header>\n\n <!-- Ribbon com seis categorias -->\n <nav\n class=\"rulefx__ribbon\"\n [attr.aria-label]=\"t('tabs.ariaLabel')\"\n role=\"tablist\"\n (keydown)=\"onTabsKeydown($event)\"\n >\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'estilo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'estilo'\"\n [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('estilo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.estilo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">text_format</span>\n <span>{{ t('tabs.estilo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'layout'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'layout'\"\n [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('layout')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.layout')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">view_quilt</span>\n <span>{{ t('tabs.layout') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'icone'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'icone'\"\n [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('icone')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.icone')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">verified</span>\n <span>{{ t('tabs.icone') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'fundo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'fundo'\"\n [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('fundo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.fundo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">gradient</span>\n <span>{{ t('tabs.fundo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'animacao'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'animacao'\"\n [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('animacao')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.animacao')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">animation</span>\n <span>{{ t('tabs.animacao') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'tooltip'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'tooltip'\"\n [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.tooltip')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">info</span>\n <span>{{ t('tabs.tooltip') }}</span>\n </button>\n </nav>\n\n <!-- Quickbar contextual -->\n @if (effectsForm) {\n <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n @switch (activeTab) {\n @case ('estilo') {\n <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n }\n @case ('layout') {\n <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n }\n @case ('icone') {\n <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n }\n @case ('fundo') {\n <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n }\n @case ('animacao') {\n <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n }\n @case ('tooltip') {\n <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n }\n }\n </section>\n }\n\n <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n <section class=\"rulefx__body\">\n <div class=\"rulefx__preview\">\n <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n <div\n class=\"preview__cell\"\n [ngStyle]=\"computeCellStyle(formValue)\"\n [ngClass]=\"computeCellClass(formValue)\"\n (mouseenter)=\"onHoverPreview(true)\"\n (mouseleave)=\"onHoverPreview(false)\"\n >\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n\n <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n {{ t('preview.sampleText') }}\n </span>\n\n @if (formValue.iconBadge?.badgeText) {\n <span\n class=\"preview__badge\"\n [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n >\n {{ formValue.iconBadge?.badgeText }}\n </span>\n }\n\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n </div>\n\n <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n </div>\n\n <div class=\"rulefx__advanced\">\n <details class=\"advanced__section\">\n <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n <label class=\"textctl\">\n <span>{{ t('advanced.description') }}</span>\n <input type=\"text\" formControlName=\"description\" [placeholder]=\"t('advanced.descriptionPlaceholder')\" />\n </label>\n <label class=\"textctl\">\n <span>{{ t('advanced.cssClass') }}</span>\n <input type=\"text\" formControlName=\"cssClass\" [placeholder]=\"t('advanced.cssClassPlaceholder')\" />\n </label>\n <label class=\"textctl\">\n <span>{{ t('advanced.inlineStyle') }}</span>\n <input type=\"text\" formControlName=\"inlineStyle\" [placeholder]=\"t('advanced.inlineStylePlaceholder')\" />\n </label>\n </div>\n </details>\n </div>\n </section>\n</div>\n", styles: [".rulefx{background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border-radius:8px;color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));box-shadow:var(--md-sys-elevation-level1, 0 1px 3px rgba(0, 0, 0, .12));padding:12px;min-width:0;scroll-margin-block:140px 120px}.rulefx__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;margin-bottom:8px}.rulefx__title{grid-column:1;margin:0;min-width:0;font-size:1.05rem}.rulefx__subtitle{grid-column:1;margin:0;min-width:0;opacity:.75;font-size:.9rem;overflow-wrap:anywhere}.rulefx__actions{grid-column:2;grid-row:1/span 2;display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;min-width:0}.rulefx__ribbon{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:8px;background:var(--md-sys-color-surface-container, var(--mat-sys-surface-container, #eef1f5));margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 128px;min-width:0;padding:8px 10px;border-radius:8px;background:transparent;color:var(--md-sys-color-on-surface-variant, var(--mat-sys-on-surface-variant, #49454f));cursor:pointer;border:none}.ribbon__tab .material-icons{flex:0 0 auto;overflow:visible;font-size:18px;line-height:1}.ribbon__tab span:not(.material-icons){min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap;line-height:1.2}.ribbon__tab.is-active{background:var(--md-sys-color-secondary-container, var(--mat-sys-secondary-container, #e8def8));color:var(--md-sys-color-on-secondary-container, var(--mat-sys-on-secondary-container, #1d192b));box-shadow:inset 0 0 0 1px var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.rulefx__quickbar{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:10px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));margin-bottom:10px;min-width:0}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:12px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));min-width:0}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:100%;padding:10px 12px;border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.preview__icon{font-size:18px;line-height:1}.preview__text{min-width:0;overflow-wrap:anywhere}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px;min-width:0}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:8px 10px;min-width:0}@media(max-width:760px){.rulefx__header{grid-template-columns:1fr}.rulefx__actions{grid-column:1;grid-row:auto;justify-content:flex-start}.rulefx__body{grid-template-columns:1fr}}@media(max-width:420px){.rulefx{padding:10px}.ribbon__tab{flex-basis:calc(50% - 4px)}.ribbon__tab span:not(.material-icons){white-space:normal}}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "component", type: EstiloEditorComponent, selector: "praxis-effects-estilo-editor", inputs: ["group"] }, { kind: "component", type: LayoutEditorComponent, selector: "praxis-effects-layout-editor", inputs: ["group"] }, { kind: "component", type: IconeBadgeEditorComponent, selector: "praxis-effects-icone-badge-editor", inputs: ["group"] }, { kind: "component", type: FundoEditorComponent, selector: "praxis-effects-fundo-editor", inputs: ["group"] }, { kind: "component", type: AnimacaoEditorComponent, selector: "praxis-effects-animacao-editor", inputs: ["group"] }, { kind: "component", type: TooltipEditorComponent, selector: "praxis-effects-tooltip-editor", inputs: ["group"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1214
1696
  }
1215
1697
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RuleEffectsPanelComponent, decorators: [{
1216
1698
  type: Component,
@@ -1230,8 +1712,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
1230
1712
  FundoEditorComponent,
1231
1713
  AnimacaoEditorComponent,
1232
1714
  TooltipEditorComponent,
1233
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rulefx\">\n <header class=\"rulefx__header\">\n <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n <div class=\"rulefx__actions\">\n <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <mat-icon>bookmarks</mat-icon>\n {{ t('presets.label') }}\n </button>\n <mat-menu #presetsMenu=\"matMenu\">\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> Aprovado</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> Alerta</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> Erro</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> Info</button>\n </mat-menu>\n <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n <mat-icon>done</mat-icon>\n {{ t('actions.apply') }}\n </button>\n <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n <mat-icon>restart_alt</mat-icon>\n {{ t('actions.reset') }}\n </button>\n </div>\n </header>\n\n <!-- Ribbon com seis categorias -->\n <nav\n class=\"rulefx__ribbon\"\n aria-label=\"Categorias de efeitos\"\n role=\"tablist\"\n (keydown)=\"onTabsKeydown($event)\"\n >\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'estilo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'estilo'\"\n [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('estilo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.estilo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">text_format</span>\n <span>{{ t('tabs.estilo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'layout'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'layout'\"\n [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('layout')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.layout')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">view_quilt</span>\n <span>{{ t('tabs.layout') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'icone'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'icone'\"\n [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('icone')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.icone')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">verified</span>\n <span>{{ t('tabs.icone') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'fundo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'fundo'\"\n [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('fundo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.fundo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">gradient</span>\n <span>{{ t('tabs.fundo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'animacao'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'animacao'\"\n [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('animacao')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.animacao')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">animation</span>\n <span>{{ t('tabs.animacao') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'tooltip'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'tooltip'\"\n [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.tooltip')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">info</span>\n <span>{{ t('tabs.tooltip') }}</span>\n </button>\n </nav>\n\n <!-- Quickbar contextual -->\n @if (effectsForm) {\n <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n @switch (activeTab) {\n @case ('estilo') {\n <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n }\n @case ('layout') {\n <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n }\n @case ('icone') {\n <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n }\n @case ('fundo') {\n <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n }\n @case ('animacao') {\n <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n }\n @case ('tooltip') {\n <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n }\n }\n </section>\n }\n\n <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n <section class=\"rulefx__body\">\n <div class=\"rulefx__preview\">\n <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n <div\n class=\"preview__cell\"\n [ngStyle]=\"computeCellStyle(formValue)\"\n [ngClass]=\"computeCellClass(formValue)\"\n (mouseenter)=\"onHoverPreview(true)\"\n (mouseleave)=\"onHoverPreview(false)\"\n >\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n\n <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n Joana Silva \u2014 Ativo desde 2019\n </span>\n\n @if (formValue.iconBadge?.badgeText) {\n <span\n class=\"preview__badge\"\n [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n >\n {{ formValue.iconBadge?.badgeText }}\n </span>\n }\n\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n </div>\n\n <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n </div>\n\n <div class=\"rulefx__advanced\">\n <details class=\"advanced__section\">\n <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n <label class=\"textctl\">\n <span>{{ t('advanced.description') }}</span>\n <input type=\"text\" formControlName=\"description\" placeholder=\"ex.: Destacar pre\u00E7os altos\" />\n </label>\n <label class=\"textctl\">\n <span>Classe CSS</span>\n <input type=\"text\" formControlName=\"cssClass\" placeholder=\"ex.: praxis-cell--alert\" />\n </label>\n <label class=\"textctl\">\n <span>Estilo inline</span>\n <input type=\"text\" formControlName=\"inlineStyle\" placeholder=\"ex.: text-shadow: 0 0 8px rgba(0,255,163,.5)\" />\n </label>\n </div>\n </details>\n </div>\n </section>\n</div>\n", styles: [".rulefx{background:linear-gradient(180deg,#171b24,#1e2431);border-radius:14px;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 24px #00000047;padding:12px}.rulefx__header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px}.rulefx__title{margin:0;font-size:1.05rem}.rulefx__subtitle{margin:0;opacity:.75;font-size:.9rem}.rulefx__actions{display:inline-flex;gap:8px;align-items:center}.rulefx__ribbon{display:flex;gap:6px;padding:8px;border-radius:10px;background:linear-gradient(180deg,#202636,#1c2230);margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:transparent;color:#e7ecf6;cursor:pointer;border:none}.ribbon__tab.is-active{background:linear-gradient(180deg,#2a3550,#243149);box-shadow:inset 0 0 0 1px #ffffff0a}.rulefx__quickbar{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;background:linear-gradient(180deg,#202637,#1c2230);margin-bottom:10px}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;background:linear-gradient(180deg,#202637,#1c2230)}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#35d07f14;border:1px solid rgba(53,208,127,.25)}.preview__icon{font-size:18px;line-height:1}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:#151a24;color:#e7ecf6;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"] }]
1234
- }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: EffectRegistryService }], propDecorators: { scope: [{
1715
+ ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [providePraxisI18nConfig(PRAXIS_TABLE_RULE_BUILDER_I18N_CONFIG)], template: "<div class=\"rulefx\">\n <header class=\"rulefx__header\">\n <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n <div class=\"rulefx__actions\">\n <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <mat-icon>bookmarks</mat-icon>\n {{ t('presets.label') }}\n </button>\n <mat-menu #presetsMenu=\"matMenu\">\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> {{ t('presets.aprovado') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> {{ t('presets.alerta') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> {{ t('presets.erro') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> {{ t('presets.info') }}</button>\n </mat-menu>\n <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n <mat-icon>done</mat-icon>\n {{ t('actions.apply') }}\n </button>\n <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n <mat-icon>restart_alt</mat-icon>\n {{ t('actions.reset') }}\n </button>\n </div>\n </header>\n\n <!-- Ribbon com seis categorias -->\n <nav\n class=\"rulefx__ribbon\"\n [attr.aria-label]=\"t('tabs.ariaLabel')\"\n role=\"tablist\"\n (keydown)=\"onTabsKeydown($event)\"\n >\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'estilo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'estilo'\"\n [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('estilo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.estilo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">text_format</span>\n <span>{{ t('tabs.estilo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'layout'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'layout'\"\n [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('layout')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.layout')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">view_quilt</span>\n <span>{{ t('tabs.layout') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'icone'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'icone'\"\n [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('icone')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.icone')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">verified</span>\n <span>{{ t('tabs.icone') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'fundo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'fundo'\"\n [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('fundo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.fundo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">gradient</span>\n <span>{{ t('tabs.fundo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'animacao'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'animacao'\"\n [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('animacao')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.animacao')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">animation</span>\n <span>{{ t('tabs.animacao') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'tooltip'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'tooltip'\"\n [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.tooltip')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">info</span>\n <span>{{ t('tabs.tooltip') }}</span>\n </button>\n </nav>\n\n <!-- Quickbar contextual -->\n @if (effectsForm) {\n <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n @switch (activeTab) {\n @case ('estilo') {\n <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n }\n @case ('layout') {\n <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n }\n @case ('icone') {\n <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n }\n @case ('fundo') {\n <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n }\n @case ('animacao') {\n <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n }\n @case ('tooltip') {\n <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n }\n }\n </section>\n }\n\n <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n <section class=\"rulefx__body\">\n <div class=\"rulefx__preview\">\n <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n <div\n class=\"preview__cell\"\n [ngStyle]=\"computeCellStyle(formValue)\"\n [ngClass]=\"computeCellClass(formValue)\"\n (mouseenter)=\"onHoverPreview(true)\"\n (mouseleave)=\"onHoverPreview(false)\"\n >\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n\n <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n {{ t('preview.sampleText') }}\n </span>\n\n @if (formValue.iconBadge?.badgeText) {\n <span\n class=\"preview__badge\"\n [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n >\n {{ formValue.iconBadge?.badgeText }}\n </span>\n }\n\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n </div>\n\n <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n </div>\n\n <div class=\"rulefx__advanced\">\n <details class=\"advanced__section\">\n <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n <label class=\"textctl\">\n <span>{{ t('advanced.description') }}</span>\n <input type=\"text\" formControlName=\"description\" [placeholder]=\"t('advanced.descriptionPlaceholder')\" />\n </label>\n <label class=\"textctl\">\n <span>{{ t('advanced.cssClass') }}</span>\n <input type=\"text\" formControlName=\"cssClass\" [placeholder]=\"t('advanced.cssClassPlaceholder')\" />\n </label>\n <label class=\"textctl\">\n <span>{{ t('advanced.inlineStyle') }}</span>\n <input type=\"text\" formControlName=\"inlineStyle\" [placeholder]=\"t('advanced.inlineStylePlaceholder')\" />\n </label>\n </div>\n </details>\n </div>\n </section>\n</div>\n", styles: [".rulefx{background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border-radius:8px;color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));box-shadow:var(--md-sys-elevation-level1, 0 1px 3px rgba(0, 0, 0, .12));padding:12px;min-width:0;scroll-margin-block:140px 120px}.rulefx__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;margin-bottom:8px}.rulefx__title{grid-column:1;margin:0;min-width:0;font-size:1.05rem}.rulefx__subtitle{grid-column:1;margin:0;min-width:0;opacity:.75;font-size:.9rem;overflow-wrap:anywhere}.rulefx__actions{grid-column:2;grid-row:1/span 2;display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;min-width:0}.rulefx__ribbon{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:8px;background:var(--md-sys-color-surface-container, var(--mat-sys-surface-container, #eef1f5));margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 128px;min-width:0;padding:8px 10px;border-radius:8px;background:transparent;color:var(--md-sys-color-on-surface-variant, var(--mat-sys-on-surface-variant, #49454f));cursor:pointer;border:none}.ribbon__tab .material-icons{flex:0 0 auto;overflow:visible;font-size:18px;line-height:1}.ribbon__tab span:not(.material-icons){min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap;line-height:1.2}.ribbon__tab.is-active{background:var(--md-sys-color-secondary-container, var(--mat-sys-secondary-container, #e8def8));color:var(--md-sys-color-on-secondary-container, var(--mat-sys-on-secondary-container, #1d192b));box-shadow:inset 0 0 0 1px var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.rulefx__quickbar{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:10px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));margin-bottom:10px;min-width:0}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:12px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));min-width:0}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:100%;padding:10px 12px;border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.preview__icon{font-size:18px;line-height:1}.preview__text{min-width:0;overflow-wrap:anywhere}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px;min-width:0}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:8px 10px;min-width:0}@media(max-width:760px){.rulefx__header{grid-template-columns:1fr}.rulefx__actions{grid-column:1;grid-row:auto;justify-content:flex-start}.rulefx__body{grid-template-columns:1fr}}@media(max-width:420px){.rulefx{padding:10px}.ribbon__tab{flex-basis:calc(50% - 4px)}.ribbon__tab span:not(.material-icons){white-space:normal}}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"] }]
1716
+ }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: EffectRegistryService }, { type: i1.PraxisI18nService }], propDecorators: { labels: [{
1717
+ type: Input
1718
+ }], scope: [{
1235
1719
  type: Input
1236
1720
  }], value: [{
1237
1721
  type: Input
@@ -1469,9 +1953,10 @@ const PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST = {
1469
1953
  runtimeInputs: [
1470
1954
  { name: 'scope', type: 'RuleScope', description: 'Effect scope: cell, row, column or table.' },
1471
1955
  { name: 'value', type: 'RuleEffectDefinition | undefined', description: 'Initial effect definition hydrated into the panel form.' },
1956
+ { name: 'labels', type: 'Record<string, string>', description: 'Host-owned partial panel copy overrides merged with default labels for i18n/theming context; not part of the rule effect payload.' },
1472
1957
  { name: 'valueChange', type: 'RuleEffectDefinition', description: 'Debounced normalized effect payload emitted by the editor.' },
1473
1958
  { name: 'apply', type: 'void', description: 'Emitted when the user applies the current effect payload.' },
1474
- { name: 'reset', type: 'void', description: 'Emitted when the user resets the panel form.' },
1959
+ { name: 'reset', type: 'void', description: 'Emitted when the user resets the panel form back to canonical defaults.' },
1475
1960
  ],
1476
1961
  editableTargets: [
1477
1962
  { kind: 'rule', resolver: 'table-rule-by-stable-id', description: 'Table conditional rule entry keyed by stable rule id before it is passed to praxis-table.' },
@@ -1750,27 +2235,33 @@ const PRAXIS_TABLE_RULE_BUILDER_COMPONENT_METADATA = {
1750
2235
  name: 'value',
1751
2236
  type: 'RuleEffectDefinition | undefined',
1752
2237
  label: 'Valor',
1753
- description: 'Valor inicial para hidratar o formulario.',
2238
+ description: 'Valor inicial para hidratar o formulário.',
2239
+ },
2240
+ {
2241
+ name: 'labels',
2242
+ type: 'Record<string, string>',
2243
+ label: 'Rótulos',
2244
+ description: 'Overrides parciais de texto do painel, aplicados acima do catálogo i18n da lib sem alterar o payload de regras.',
1754
2245
  },
1755
2246
  ],
1756
2247
  outputs: [
1757
2248
  {
1758
2249
  name: 'valueChange',
1759
2250
  type: 'RuleEffectDefinition',
1760
- label: 'Mudanca de valor',
1761
- description: 'Disparado quando o valor consolidado e atualizado.',
2251
+ label: 'Mudança de valor',
2252
+ description: 'Disparado quando o valor consolidado é atualizado.',
1762
2253
  },
1763
2254
  {
1764
2255
  name: 'apply',
1765
2256
  type: 'void',
1766
2257
  label: 'Aplicar',
1767
- description: 'Disparado quando o usuario aplica as mudancas.',
2258
+ description: 'Disparado quando o usuário aplica as mudanças.',
1768
2259
  },
1769
2260
  {
1770
2261
  name: 'reset',
1771
2262
  type: 'void',
1772
2263
  label: 'Resetar',
1773
- description: 'Disparado quando o usuario reseta o formulario.',
2264
+ description: 'Disparado quando o usuário redefine o formulário para os defaults canônicos.',
1774
2265
  },
1775
2266
  ],
1776
2267
  tags: ['widget', 'rules', 'table', 'configurable'],
@@ -1792,4 +2283,4 @@ function providePraxisTableRuleBuilderMetadata() {
1792
2283
  * Generated bundle index. Do not edit.
1793
2284
  */
1794
2285
 
1795
- export { AnimacaoEditorComponent, DEFAULT_EFFECT_PRESETS, EffectRegistryService, EstiloEditorComponent, FundoEditorComponent, IconeBadgeEditorComponent, LayoutEditorComponent, PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST, PRAXIS_TABLE_RULE_BUILDER_COMPONENT_METADATA, RuleEffectsPanelComponent, TooltipEditorComponent, providePraxisTableRuleBuilderMetadata, toCellClassAndStyle };
2286
+ export { AnimacaoEditorComponent, DEFAULT_EFFECT_PRESETS, EffectRegistryService, EstiloEditorComponent, FundoEditorComponent, IconeBadgeEditorComponent, LayoutEditorComponent, PRAXIS_TABLE_RULE_BUILDER_AUTHORING_MANIFEST, PRAXIS_TABLE_RULE_BUILDER_COMPONENT_METADATA, PRAXIS_TABLE_RULE_BUILDER_I18N_CONFIG, PRAXIS_TABLE_RULE_BUILDER_I18N_NAMESPACE, PRAXIS_TABLE_RULE_BUILDER_LABEL_KEYS, RuleEffectsPanelComponent, TooltipEditorComponent, providePraxisTableRuleBuilderMetadata, toCellClassAndStyle };