@praxisui/table-rule-builder 9.0.0-beta.83 → 9.0.0-beta.85
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.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
|
-
"generatedAt": "2026-07-
|
|
3
|
+
"generatedAt": "2026-07-21T15:34:49.320Z",
|
|
4
4
|
"packageName": "@praxisui/table-rule-builder",
|
|
5
|
-
"packageVersion": "9.0.0-beta.
|
|
5
|
+
"packageVersion": "9.0.0-beta.85",
|
|
6
6
|
"sourceRegistry": "praxis-component-registry-ingestion",
|
|
7
7
|
"sourceRegistryVersion": "1.0.0",
|
|
8
8
|
"componentCount": 1,
|
|
@@ -265,6 +265,8 @@ const PRAXIS_TABLE_RULE_BUILDER_EN_US = {
|
|
|
265
265
|
'advanced.inlineStylePlaceholder': 'e.g. font-weight: 600;',
|
|
266
266
|
'style.group': 'Style editor',
|
|
267
267
|
'style.textColor': 'Text color',
|
|
268
|
+
'style.textColorAutomaticHint': 'Automatic when unchanged; the runtime derives accessible contrast for solid backgrounds.',
|
|
269
|
+
'preview.contrastUnresolved': 'Contrast is not proven in this context yet. Transparency, gradients, CSS variables, or external styles require runtime preview validation.',
|
|
268
270
|
'style.textBackgroundColor': 'Text background color',
|
|
269
271
|
'style.bold': 'Bold',
|
|
270
272
|
'style.italic': 'Italic',
|
|
@@ -375,6 +377,8 @@ const PRAXIS_TABLE_RULE_BUILDER_PT_BR = {
|
|
|
375
377
|
'advanced.inlineStylePlaceholder': 'ex.: font-weight: 600;',
|
|
376
378
|
'style.group': 'Editor de estilo',
|
|
377
379
|
'style.textColor': 'Cor do texto',
|
|
380
|
+
'style.textColorAutomaticHint': 'Automática quando não alterada; o runtime deriva contraste acessível para fundos sólidos.',
|
|
381
|
+
'preview.contrastUnresolved': 'Contraste ainda não comprovado neste contexto. Transparência, gradiente, variável CSS ou estilo externo exige validação no preview do runtime.',
|
|
378
382
|
'style.textBackgroundColor': 'Cor de fundo do texto',
|
|
379
383
|
'style.bold': 'Negrito',
|
|
380
384
|
'style.italic': 'Itálico',
|
|
@@ -518,6 +522,10 @@ class EstiloEditorComponent {
|
|
|
518
522
|
[gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
|
|
519
523
|
[popupSettings]="{ width: 340 }"
|
|
520
524
|
></pdx-color-picker>
|
|
525
|
+
<p class="accessible-surface-hint">
|
|
526
|
+
<mat-icon aria-hidden="true">contrast</mat-icon>
|
|
527
|
+
{{ tx('style.textColorAutomaticHint', 'Automática quando não alterada; o runtime deriva contraste acessível para fundos sólidos.') }}
|
|
528
|
+
</p>
|
|
521
529
|
|
|
522
530
|
<pdx-color-picker
|
|
523
531
|
[label]="tx('style.textBackgroundColor', 'Cor de fundo do texto')"
|
|
@@ -569,7 +577,7 @@ class EstiloEditorComponent {
|
|
|
569
577
|
</label>
|
|
570
578
|
</div>
|
|
571
579
|
</div>
|
|
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 });
|
|
580
|
+
`, isInline: true, styles: [".estilo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start;min-width:0}pdx-color-picker,mat-form-field{min-width:0}.accessible-surface-hint{display:flex;align-items:flex-start;gap:6px;margin:-6px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.accessible-surface-hint mat-icon{flex:0 0 auto;width:16px;height:16px;font-size:16px}.toggles{display:flex;align-items:center;gap:8px;min-width:0}.toggles mat-button-toggle-group{flex-wrap:wrap}.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;min-width:0}.slider{display:flex;flex-direction:column;gap:6px;min-width:0}.slider span{white-space:nowrap}mat-slider{width:100%;min-width:0}@media(max-width:520px){.estilo-grid,.sliders{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: PdxColorPickerComponent, selector: "pdx-color-picker", inputs: ["actionsLayout", "activeView", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "disabledMode", "readonlyMode", "visible", "presentationMode", "fillMode", "format", "gradientSettings", "icon", "iconClass", "svgIcon", "paletteSettings", "popupSettings", "preview", "rounded", "size", "tabindex", "views", "maxRecent", "showRecent"], outputs: ["valueChange", "open", "close", "cancel", "activeViewChange", "activeColorClick", "focusEvent", "blurEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
573
581
|
}
|
|
574
582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EstiloEditorComponent, decorators: [{
|
|
575
583
|
type: Component,
|
|
@@ -593,6 +601,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
593
601
|
[gradientSettings]="{ showOpacity: false, channel: 'hsv' }"
|
|
594
602
|
[popupSettings]="{ width: 340 }"
|
|
595
603
|
></pdx-color-picker>
|
|
604
|
+
<p class="accessible-surface-hint">
|
|
605
|
+
<mat-icon aria-hidden="true">contrast</mat-icon>
|
|
606
|
+
{{ tx('style.textColorAutomaticHint', 'Automática quando não alterada; o runtime deriva contraste acessível para fundos sólidos.') }}
|
|
607
|
+
</p>
|
|
596
608
|
|
|
597
609
|
<pdx-color-picker
|
|
598
610
|
[label]="tx('style.textBackgroundColor', 'Cor de fundo do texto')"
|
|
@@ -644,7 +656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
644
656
|
</label>
|
|
645
657
|
</div>
|
|
646
658
|
</div>
|
|
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"] }]
|
|
659
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".estilo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start;min-width:0}pdx-color-picker,mat-form-field{min-width:0}.accessible-surface-hint{display:flex;align-items:flex-start;gap:6px;margin:-6px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.accessible-surface-hint mat-icon{flex:0 0 auto;width:16px;height:16px;font-size:16px}.toggles{display:flex;align-items:center;gap:8px;min-width:0}.toggles mat-button-toggle-group{flex-wrap:wrap}.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;min-width:0}.slider{display:flex;flex-direction:column;gap:6px;min-width:0}.slider span{white-space:nowrap}mat-slider{width:100%;min-width:0}@media(max-width:520px){.estilo-grid,.sliders{grid-template-columns:1fr}}\n"] }]
|
|
648
660
|
}], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
|
|
649
661
|
type: Input
|
|
650
662
|
}] } });
|
|
@@ -1250,6 +1262,19 @@ class RuleEffectsPanelComponent {
|
|
|
1250
1262
|
destroy$ = new Subject();
|
|
1251
1263
|
isHovering = false;
|
|
1252
1264
|
tabOrder = ['estilo', 'layout', 'icone', 'fundo', 'animacao', 'tooltip'];
|
|
1265
|
+
get conditionalSurfacePreviewUnresolved() {
|
|
1266
|
+
if (!this.effectsForm)
|
|
1267
|
+
return false;
|
|
1268
|
+
const raw = this.effectsForm.getRawValue();
|
|
1269
|
+
const background = raw?.background ?? {};
|
|
1270
|
+
const color = this.nonEmptyString(background.color);
|
|
1271
|
+
return !!(this.nonEmptyString(background.gradient)
|
|
1272
|
+
|| (this.toFiniteNumber(background.alpha) ?? 0) > 0
|
|
1273
|
+
|| (this.toFiniteNumber(background.blur) ?? 0) > 0
|
|
1274
|
+
|| (color && /(?:var|color-mix)\s*\(/i.test(color))
|
|
1275
|
+
|| this.nonEmptyString(raw?.cssClass)
|
|
1276
|
+
|| this.nonEmptyString(raw?.inlineStyle));
|
|
1277
|
+
}
|
|
1253
1278
|
constructor(fb, registry, i18n) {
|
|
1254
1279
|
this.fb = fb;
|
|
1255
1280
|
this.registry = registry;
|
|
@@ -1692,7 +1717,7 @@ class RuleEffectsPanelComponent {
|
|
|
1692
1717
|
return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed) : undefined;
|
|
1693
1718
|
}
|
|
1694
1719
|
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 });
|
|
1720
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RuleEffectsPanelComponent, isStandalone: true, selector: "praxis-rule-effects-panel", inputs: { labels: "labels", scope: "scope", value: "value" }, outputs: { valueChange: "valueChange", apply: "apply", reset: "reset" }, providers: [providePraxisI18nConfig(PRAXIS_TABLE_RULE_BUILDER_I18N_CONFIG)], ngImport: i0, template: "<div class=\"rulefx\">\n <header class=\"rulefx__header\">\n <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n <div class=\"rulefx__actions\">\n <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <mat-icon>bookmarks</mat-icon>\n {{ t('presets.label') }}\n </button>\n <mat-menu #presetsMenu=\"matMenu\">\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> {{ t('presets.aprovado') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> {{ t('presets.alerta') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> {{ t('presets.erro') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> {{ t('presets.info') }}</button>\n </mat-menu>\n <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n <mat-icon>done</mat-icon>\n {{ t('actions.apply') }}\n </button>\n <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n <mat-icon>restart_alt</mat-icon>\n {{ t('actions.reset') }}\n </button>\n </div>\n </header>\n\n <!-- Ribbon com seis categorias -->\n <nav\n class=\"rulefx__ribbon\"\n [attr.aria-label]=\"t('tabs.ariaLabel')\"\n role=\"tablist\"\n (keydown)=\"onTabsKeydown($event)\"\n >\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'estilo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'estilo'\"\n [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('estilo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.estilo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">text_format</span>\n <span>{{ t('tabs.estilo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'layout'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'layout'\"\n [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('layout')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.layout')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">view_quilt</span>\n <span>{{ t('tabs.layout') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'icone'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'icone'\"\n [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('icone')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.icone')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">verified</span>\n <span>{{ t('tabs.icone') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'fundo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'fundo'\"\n [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('fundo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.fundo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">gradient</span>\n <span>{{ t('tabs.fundo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'animacao'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'animacao'\"\n [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('animacao')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.animacao')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">animation</span>\n <span>{{ t('tabs.animacao') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'tooltip'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'tooltip'\"\n [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.tooltip')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">info</span>\n <span>{{ t('tabs.tooltip') }}</span>\n </button>\n </nav>\n\n <!-- Quickbar contextual -->\n @if (effectsForm) {\n <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n @switch (activeTab) {\n @case ('estilo') {\n <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n }\n @case ('layout') {\n <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n }\n @case ('icone') {\n <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n }\n @case ('fundo') {\n <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n }\n @case ('animacao') {\n <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n }\n @case ('tooltip') {\n <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n }\n }\n </section>\n }\n\n <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n <section class=\"rulefx__body\">\n <div class=\"rulefx__preview\">\n <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n <div\n class=\"preview__cell\"\n [ngStyle]=\"computeCellStyle(formValue)\"\n [ngClass]=\"computeCellClass(formValue)\"\n (mouseenter)=\"onHoverPreview(true)\"\n (mouseleave)=\"onHoverPreview(false)\"\n >\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n\n <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n {{ t('preview.sampleText') }}\n </span>\n\n @if (formValue.iconBadge?.badgeText) {\n <span\n class=\"preview__badge\"\n [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n >\n {{ formValue.iconBadge?.badgeText }}\n </span>\n }\n\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n </div>\n\n <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n @if (conditionalSurfacePreviewUnresolved) {\n <p class=\"preview__diagnostic\" role=\"status\">\n <mat-icon aria-hidden=\"true\">warning_amber</mat-icon>\n <span>{{ t('preview.contrastUnresolved') }}</span>\n </p>\n }\n </div>\n\n <div class=\"rulefx__advanced\">\n <details class=\"advanced__section\">\n <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n <label class=\"textctl\">\n <span>{{ t('advanced.description') }}</span>\n <input type=\"text\" formControlName=\"description\" [placeholder]=\"t('advanced.descriptionPlaceholder')\" />\n </label>\n <label class=\"textctl\">\n <span>{{ t('advanced.cssClass') }}</span>\n <input type=\"text\" formControlName=\"cssClass\" [placeholder]=\"t('advanced.cssClassPlaceholder')\" />\n </label>\n <label class=\"textctl\">\n <span>{{ t('advanced.inlineStyle') }}</span>\n <input type=\"text\" formControlName=\"inlineStyle\" [placeholder]=\"t('advanced.inlineStylePlaceholder')\" />\n </label>\n </div>\n </details>\n </div>\n </section>\n</div>\n", styles: [".rulefx{background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border-radius:8px;color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));box-shadow:var(--md-sys-elevation-level1, 0 1px 3px rgba(0, 0, 0, .12));padding:12px;min-width:0;scroll-margin-block:140px 120px}.rulefx__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;margin-bottom:8px}.rulefx__title{grid-column:1;margin:0;min-width:0;font-size:1.05rem}.rulefx__subtitle{grid-column:1;margin:0;min-width:0;opacity:.75;font-size:.9rem;overflow-wrap:anywhere}.rulefx__actions{grid-column:2;grid-row:1/span 2;display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;min-width:0}.rulefx__ribbon{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:8px;background:var(--md-sys-color-surface-container, var(--mat-sys-surface-container, #eef1f5));margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 128px;min-width:0;padding:8px 10px;border-radius:8px;background:transparent;color:var(--md-sys-color-on-surface-variant, var(--mat-sys-on-surface-variant, #49454f));cursor:pointer;border:none}.ribbon__tab .material-icons{flex:0 0 auto;overflow:visible;font-size:18px;line-height:1}.ribbon__tab span:not(.material-icons){min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap;line-height:1.2}.ribbon__tab.is-active{background:var(--md-sys-color-secondary-container, var(--mat-sys-secondary-container, #e8def8));color:var(--md-sys-color-on-secondary-container, var(--mat-sys-on-secondary-container, #1d192b));box-shadow:inset 0 0 0 1px var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.rulefx__quickbar{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:10px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));margin-bottom:10px;min-width:0}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:12px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));min-width:0}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:100%;padding:10px 12px;border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.preview__icon{font-size:18px;line-height:1}.preview__text{min-width:0;overflow-wrap:anywhere}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.preview__diagnostic{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;padding:8px 10px;border-radius:6px;background:var(--md-sys-color-error-container, var(--mat-sys-error-container, #ffdad6));color:var(--md-sys-color-on-error-container, var(--mat-sys-on-error-container, #410002));font-size:.82rem;line-height:1.35}.preview__diagnostic mat-icon{flex:0 0 auto;width:18px;height:18px;font-size:18px}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px;min-width:0}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:8px 10px;min-width:0}@media(max-width:760px){.rulefx__header{grid-template-columns:1fr}.rulefx__actions{grid-column:1;grid-row:auto;justify-content:flex-start}.rulefx__body{grid-template-columns:1fr}}@media(max-width:420px){.rulefx{padding:10px}.ribbon__tab{flex-basis:calc(50% - 4px)}.ribbon__tab span:not(.material-icons){white-space:normal}}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "component", type: EstiloEditorComponent, selector: "praxis-effects-estilo-editor", inputs: ["group"] }, { kind: "component", type: LayoutEditorComponent, selector: "praxis-effects-layout-editor", inputs: ["group"] }, { kind: "component", type: IconeBadgeEditorComponent, selector: "praxis-effects-icone-badge-editor", inputs: ["group"] }, { kind: "component", type: FundoEditorComponent, selector: "praxis-effects-fundo-editor", inputs: ["group"] }, { kind: "component", type: AnimacaoEditorComponent, selector: "praxis-effects-animacao-editor", inputs: ["group"] }, { kind: "component", type: TooltipEditorComponent, selector: "praxis-effects-tooltip-editor", inputs: ["group"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1696
1721
|
}
|
|
1697
1722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RuleEffectsPanelComponent, decorators: [{
|
|
1698
1723
|
type: Component,
|
|
@@ -1712,7 +1737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1712
1737
|
FundoEditorComponent,
|
|
1713
1738
|
AnimacaoEditorComponent,
|
|
1714
1739
|
TooltipEditorComponent,
|
|
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"] }]
|
|
1740
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [providePraxisI18nConfig(PRAXIS_TABLE_RULE_BUILDER_I18N_CONFIG)], template: "<div class=\"rulefx\">\n <header class=\"rulefx__header\">\n <h3 class=\"rulefx__title\">{{ t('panel.title') }}</h3>\n <p class=\"rulefx__subtitle\">{{ t('panel.subtitle') }}</p>\n <div class=\"rulefx__actions\">\n <button mat-stroked-button type=\"button\" [matMenuTriggerFor]=\"presetsMenu\" [attr.aria-label]=\"t('presets.label')\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <mat-icon>bookmarks</mat-icon>\n {{ t('presets.label') }}\n </button>\n <mat-menu #presetsMenu=\"matMenu\">\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('aprovado')\"><mat-icon>check_circle</mat-icon> {{ t('presets.aprovado') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('alerta')\"><mat-icon>warning</mat-icon> {{ t('presets.alerta') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('erro')\"><mat-icon>error</mat-icon> {{ t('presets.erro') }}</button>\n <button mat-menu-item type=\"button\" (click)=\"applyPreset('info')\"><mat-icon>info</mat-icon> {{ t('presets.info') }}</button>\n </mat-menu>\n <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"$event.stopPropagation(); onApply()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.apply')\" [matTooltip]=\"t('actions.apply')\" matTooltipPosition=\"below\">\n <mat-icon>done</mat-icon>\n {{ t('actions.apply') }}\n </button>\n <button mat-stroked-button type=\"button\" (click)=\"$event.stopPropagation(); onReset()\" (mousedown)=\"$event.stopPropagation()\" [attr.aria-label]=\"t('actions.reset')\" [matTooltip]=\"t('actions.reset')\" matTooltipPosition=\"below\">\n <mat-icon>restart_alt</mat-icon>\n {{ t('actions.reset') }}\n </button>\n </div>\n </header>\n\n <!-- Ribbon com seis categorias -->\n <nav\n class=\"rulefx__ribbon\"\n [attr.aria-label]=\"t('tabs.ariaLabel')\"\n role=\"tablist\"\n (keydown)=\"onTabsKeydown($event)\"\n >\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'estilo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'estilo'\"\n [attr.tabindex]=\"activeTab === 'estilo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('estilo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.estilo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">text_format</span>\n <span>{{ t('tabs.estilo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'layout'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'layout'\"\n [attr.tabindex]=\"activeTab === 'layout' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('layout')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.layout')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">view_quilt</span>\n <span>{{ t('tabs.layout') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'icone'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'icone'\"\n [attr.tabindex]=\"activeTab === 'icone' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('icone')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.icone')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">verified</span>\n <span>{{ t('tabs.icone') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'fundo'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'fundo'\"\n [attr.tabindex]=\"activeTab === 'fundo' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('fundo')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.fundo')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">gradient</span>\n <span>{{ t('tabs.fundo') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'animacao'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'animacao'\"\n [attr.tabindex]=\"activeTab === 'animacao' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('animacao')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.animacao')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">animation</span>\n <span>{{ t('tabs.animacao') }}</span>\n </button>\n <button\n class=\"ribbon__tab\"\n [class.is-active]=\"activeTab === 'tooltip'\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === 'tooltip'\"\n [attr.tabindex]=\"activeTab === 'tooltip' ? 0 : -1\"\n (click)=\"$event.stopPropagation(); setTab('tooltip')\"\n (mousedown)=\"$event.stopPropagation()\"\n [matTooltip]=\"t('tabs.tooltip')\"\n matTooltipPosition=\"below\"\n >\n <span class=\"material-icons\">info</span>\n <span>{{ t('tabs.tooltip') }}</span>\n </button>\n </nav>\n\n <!-- Quickbar contextual -->\n @if (effectsForm) {\n <section class=\"rulefx__quickbar\" aria-live=\"polite\">\n @switch (activeTab) {\n @case ('estilo') {\n <praxis-effects-estilo-editor [group]=\"estiloGroup\"></praxis-effects-estilo-editor>\n }\n @case ('layout') {\n <praxis-effects-layout-editor [group]=\"layoutGroup\"></praxis-effects-layout-editor>\n }\n @case ('icone') {\n <praxis-effects-icone-badge-editor [group]=\"iconBadgeGroup\"></praxis-effects-icone-badge-editor>\n }\n @case ('fundo') {\n <praxis-effects-fundo-editor [group]=\"backgroundGroup\"></praxis-effects-fundo-editor>\n }\n @case ('animacao') {\n <praxis-effects-animacao-editor [group]=\"animationGroup\"></praxis-effects-animacao-editor>\n }\n @case ('tooltip') {\n <praxis-effects-tooltip-editor [group]=\"tooltipGroup\"></praxis-effects-tooltip-editor>\n }\n }\n </section>\n }\n\n <!-- Pr\u00E9-visualiza\u00E7\u00E3o e se\u00E7\u00E3o avan\u00E7ada -->\n <section class=\"rulefx__body\">\n <div class=\"rulefx__preview\">\n <div class=\"preview__title\">{{ t('preview.title') }}</div>\n\n <div\n class=\"preview__cell\"\n [ngStyle]=\"computeCellStyle(formValue)\"\n [ngClass]=\"computeCellClass(formValue)\"\n (mouseenter)=\"onHoverPreview(true)\"\n (mouseleave)=\"onHoverPreview(false)\"\n >\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'before') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n\n <span class=\"preview__text\" [ngStyle]=\"computeTextStyle(formValue)\">\n {{ t('preview.sampleText') }}\n </span>\n\n @if (formValue.iconBadge?.badgeText) {\n <span\n class=\"preview__badge\"\n [ngStyle]=\"{ 'background': badgeBackground(formValue), 'border-color': badgeBorder(formValue) }\"\n >\n {{ formValue.iconBadge?.badgeText }}\n </span>\n }\n\n @if (formValue.iconBadge?.icon && formValue.iconBadge?.iconPos === 'after') {\n <span\n class=\"material-icons preview__icon\"\n [style.color]=\"formValue.iconBadge?.iconColor\"\n >\n {{ formValue.iconBadge?.icon }}\n </span>\n }\n </div>\n\n <p class=\"preview__hint\">{{ t('preview.hint') }}</p>\n @if (conditionalSurfacePreviewUnresolved) {\n <p class=\"preview__diagnostic\" role=\"status\">\n <mat-icon aria-hidden=\"true\">warning_amber</mat-icon>\n <span>{{ t('preview.contrastUnresolved') }}</span>\n </p>\n }\n </div>\n\n <div class=\"rulefx__advanced\">\n <details class=\"advanced__section\">\n <summary (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">{{ t('advanced.title') }}</summary>\n <div class=\"advanced__grid\" [formGroup]=\"effectsForm\">\n <label class=\"textctl\">\n <span>{{ t('advanced.description') }}</span>\n <input type=\"text\" formControlName=\"description\" [placeholder]=\"t('advanced.descriptionPlaceholder')\" />\n </label>\n <label class=\"textctl\">\n <span>{{ t('advanced.cssClass') }}</span>\n <input type=\"text\" formControlName=\"cssClass\" [placeholder]=\"t('advanced.cssClassPlaceholder')\" />\n </label>\n <label class=\"textctl\">\n <span>{{ t('advanced.inlineStyle') }}</span>\n <input type=\"text\" formControlName=\"inlineStyle\" [placeholder]=\"t('advanced.inlineStylePlaceholder')\" />\n </label>\n </div>\n </details>\n </div>\n </section>\n</div>\n", styles: [".rulefx{background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border-radius:8px;color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));box-shadow:var(--md-sys-elevation-level1, 0 1px 3px rgba(0, 0, 0, .12));padding:12px;min-width:0;scroll-margin-block:140px 120px}.rulefx__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;margin-bottom:8px}.rulefx__title{grid-column:1;margin:0;min-width:0;font-size:1.05rem}.rulefx__subtitle{grid-column:1;margin:0;min-width:0;opacity:.75;font-size:.9rem;overflow-wrap:anywhere}.rulefx__actions{grid-column:2;grid-row:1/span 2;display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;min-width:0}.rulefx__ribbon{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:8px;background:var(--md-sys-color-surface-container, var(--mat-sys-surface-container, #eef1f5));margin-bottom:8px}.ribbon__tab{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 128px;min-width:0;padding:8px 10px;border-radius:8px;background:transparent;color:var(--md-sys-color-on-surface-variant, var(--mat-sys-on-surface-variant, #49454f));cursor:pointer;border:none}.ribbon__tab .material-icons{flex:0 0 auto;overflow:visible;font-size:18px;line-height:1}.ribbon__tab span:not(.material-icons){min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap;line-height:1.2}.ribbon__tab.is-active{background:var(--md-sys-color-secondary-container, var(--mat-sys-secondary-container, #e8def8));color:var(--md-sys-color-on-secondary-container, var(--mat-sys-on-secondary-container, #1d192b));box-shadow:inset 0 0 0 1px var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.rulefx__quickbar{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:10px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));margin-bottom:10px;min-width:0}.rulefx__body{display:grid;grid-template-columns:1fr 320px;gap:12px}.rulefx__preview{border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:12px;background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));min-width:0}.preview__title{font-weight:600;margin-bottom:8px}.preview__cell{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:100%;padding:10px 12px;border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--mat-sys-surface-container-low, #f7f8fa));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6))}.preview__icon{font-size:18px;line-height:1}.preview__text{min-width:0;overflow-wrap:anywhere}.preview__badge{font-size:.75rem;border-radius:999px;padding:2px 8px;border:1px solid transparent}.preview__hint{opacity:.7;font-size:.85rem;margin:8px 0 0}.preview__diagnostic{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;padding:8px 10px;border-radius:6px;background:var(--md-sys-color-error-container, var(--mat-sys-error-container, #ffdad6));color:var(--md-sys-color-on-error-container, var(--mat-sys-on-error-container, #410002));font-size:.82rem;line-height:1.35}.preview__diagnostic mat-icon{flex:0 0 auto;width:18px;height:18px;font-size:18px}.rulefx__advanced .advanced__grid{display:grid;grid-template-columns:1fr;gap:8px;min-width:0}.rulefx__advanced .textctl{display:grid;gap:6px}.rulefx__advanced input[type=text]{background:var(--md-sys-color-surface, var(--mat-sys-surface, #ffffff));color:var(--md-sys-color-on-surface, var(--mat-sys-on-surface, #1d1b20));border:1px solid var(--md-sys-color-outline-variant, var(--mat-sys-outline-variant, #d9dee6));border-radius:8px;padding:8px 10px;min-width:0}@media(max-width:760px){.rulefx__header{grid-template-columns:1fr}.rulefx__actions{grid-column:1;grid-row:auto;justify-content:flex-start}.rulefx__body{grid-template-columns:1fr}}@media(max-width:420px){.rulefx{padding:10px}.ribbon__tab{flex-basis:calc(50% - 4px)}.ribbon__tab span:not(.material-icons){white-space:normal}}.anim--once{animation-iteration-count:1}.anim--loop{animation-iteration-count:infinite}.anim--count{animation-iteration-count:3}.anim--subtle{--pfx-preview-scale-peak: 1.01;--pfx-preview-min-opacity: .7;--pfx-preview-slide-distance: 2px;--pfx-preview-border-strength: .18}.anim--normal{--pfx-preview-scale-peak: 1.03;--pfx-preview-min-opacity: .45;--pfx-preview-slide-distance: 6px;--pfx-preview-border-strength: .3}.anim--strong{--pfx-preview-scale-peak: 1.05;--pfx-preview-min-opacity: .25;--pfx-preview-slide-distance: 8px;--pfx-preview-border-strength: .42}.anim--pulse{animation-name:pfxPulse;animation-duration:.8s;animation-timing-function:ease-in-out}.anim--blink{animation-name:pfxBlink;animation-duration:.7s}.anim--grow{animation-name:pfxGrow;animation-duration:.4s}.anim--fade{animation-name:pfxFade;animation-duration:.6s}.anim--slide-in{animation-name:pfxSlideIn;animation-duration:.3s}.anim--border-pulse{animation-name:pfxBorderPulse;animation-duration:.9s}@keyframes pfxPulse{0%{transform:scale(1)}50%{transform:scale(var(--pfx-preview-scale-peak, 1.03))}to{transform:scale(1)}}@keyframes pfxBlink{0%,49%{opacity:1}50%,to{opacity:var(--pfx-preview-min-opacity, .25)}}@keyframes pfxGrow{0%{transform:scale(.96)}to{transform:scale(1)}}@keyframes pfxFade{0%{opacity:0}to{opacity:1}}@keyframes pfxSlideIn{0%{transform:translateY(var(--pfx-preview-slide-distance, 6px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pfxBorderPulse{0%,to{box-shadow:inset 0 0 #d32f2f00}50%{box-shadow:inset 0 0 0 2px rgba(211,47,47,var(--pfx-preview-border-strength, .3))}}.icon--overlay{position:relative}.icon--overlay .preview__icon{position:absolute;left:6px;top:6px}@media(prefers-reduced-motion:reduce){.preview__cell{animation:none!important;transition:none!important}}\n"] }]
|
|
1716
1741
|
}], ctorParameters: () => [{ type: i2.FormBuilder }, { type: EffectRegistryService }, { type: i1.PraxisI18nService }], propDecorators: { labels: [{
|
|
1717
1742
|
type: Input
|
|
1718
1743
|
}], scope: [{
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisui/table-rule-builder",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.85",
|
|
4
4
|
"description": "Praxis Table Rule Builder: UI components and engine utils for table rules",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/common": "^21.0.0",
|
|
7
7
|
"@angular/core": "^21.0.0",
|
|
8
8
|
"@angular/forms": "^21.0.0",
|
|
9
9
|
"@angular/material": "^21.0.0",
|
|
10
|
-
"@praxisui/ai": "^9.0.0-beta.
|
|
11
|
-
"@praxisui/core": "^9.0.0-beta.
|
|
12
|
-
"@praxisui/dynamic-fields": "^9.0.0-beta.
|
|
10
|
+
"@praxisui/ai": "^9.0.0-beta.85",
|
|
11
|
+
"@praxisui/core": "^9.0.0-beta.85",
|
|
12
|
+
"@praxisui/dynamic-fields": "^9.0.0-beta.85",
|
|
13
13
|
"rxjs": "~7.8.0"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
@@ -107,6 +107,7 @@ declare class RuleEffectsPanelComponent implements OnInit, OnDestroy {
|
|
|
107
107
|
destroy$: Subject<void>;
|
|
108
108
|
isHovering: boolean;
|
|
109
109
|
readonly tabOrder: Array<typeof this.activeTab>;
|
|
110
|
+
get conditionalSurfacePreviewUnresolved(): boolean;
|
|
110
111
|
constructor(fb: FormBuilder, registry: EffectRegistryService, i18n: PraxisI18nService);
|
|
111
112
|
ngOnInit(): void;
|
|
112
113
|
patchForm(v: RuleEffectDefinition): void;
|