@praxisui/table-rule-builder 10.0.0-rc.33 → 10.0.0-rc.35
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-10-
|
|
3
|
+
"generatedAt": "2026-10-21T13:10:38.195Z",
|
|
4
4
|
"packageName": "@praxisui/table-rule-builder",
|
|
5
|
-
"packageVersion": "10.0.0-rc.
|
|
5
|
+
"packageVersion": "10.0.0-rc.35",
|
|
6
6
|
"sourceRegistry": "praxis-component-registry-ingestion",
|
|
7
7
|
"sourceRegistryVersion": "1.0.0",
|
|
8
8
|
"componentCount": 1,
|
|
@@ -12,7 +12,7 @@ import * as i3 from '@angular/material/form-field';
|
|
|
12
12
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
13
13
|
import * as i4 from '@angular/material/input';
|
|
14
14
|
import { MatInputModule } from '@angular/material/input';
|
|
15
|
-
import * as i5$
|
|
15
|
+
import * as i5$2 from '@angular/material/button';
|
|
16
16
|
import { MatButtonModule } from '@angular/material/button';
|
|
17
17
|
import * as i6 from '@angular/material/icon';
|
|
18
18
|
import { MatIconModule } from '@angular/material/icon';
|
|
@@ -20,8 +20,10 @@ import * as i7$1 from '@angular/material/tooltip';
|
|
|
20
20
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
21
21
|
import * as i8 from '@angular/material/menu';
|
|
22
22
|
import { MatMenuModule } from '@angular/material/menu';
|
|
23
|
-
import * as i5 from '@angular/material/button-toggle';
|
|
23
|
+
import * as i5$1 from '@angular/material/button-toggle';
|
|
24
24
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
25
|
+
import * as i5 from '@angular/material/select';
|
|
26
|
+
import { MatSelectModule } from '@angular/material/select';
|
|
25
27
|
import * as i7 from '@angular/material/slider';
|
|
26
28
|
import { MatSliderModule } from '@angular/material/slider';
|
|
27
29
|
import { PdxColorPickerComponent } from '@praxisui/dynamic-fields';
|
|
@@ -554,12 +556,16 @@ class EstiloEditorComponent {
|
|
|
554
556
|
|
|
555
557
|
<mat-form-field appearance="outline">
|
|
556
558
|
<mat-label>{{ tx('style.transform', 'Transformacao') }}</mat-label>
|
|
557
|
-
<select
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
559
|
+
<mat-select
|
|
560
|
+
formControlName="transform"
|
|
561
|
+
[placeholder]="tx('style.transform.none', 'Nenhuma')"
|
|
562
|
+
[attr.aria-label]="tx('style.transformAria', 'Transformacao do texto')"
|
|
563
|
+
>
|
|
564
|
+
<mat-option [value]="null">{{ tx('style.transform.none', 'Nenhuma') }}</mat-option>
|
|
565
|
+
<mat-option value="uppercase">{{ tx('style.transform.uppercase', 'MAIUSCULAS') }}</mat-option>
|
|
566
|
+
<mat-option value="lowercase">{{ tx('style.transform.lowercase', 'minusculas') }}</mat-option>
|
|
567
|
+
<mat-option value="capitalize">{{ tx('style.transform.capitalize', 'Capitalizar') }}</mat-option>
|
|
568
|
+
</mat-select>
|
|
563
569
|
</mat-form-field>
|
|
564
570
|
|
|
565
571
|
<div class="sliders">
|
|
@@ -577,7 +583,7 @@ class EstiloEditorComponent {
|
|
|
577
583
|
</label>
|
|
578
584
|
</div>
|
|
579
585
|
</div>
|
|
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.
|
|
586
|
+
`, isInline: true, styles: [":host{display:block;container-type:inline-size}.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}@container (max-width: 520px){.estilo-grid,.sliders{grid-template-columns:1fr}}@media(max-width:520px){.estilo-grid,.sliders{grid-template-columns:1fr}}\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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i5$1.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$1.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", "governedSelectionChange", "open", "close", "cancel", "activeViewChange", "activeColorClick", "focusEvent", "blurEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
581
587
|
}
|
|
582
588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EstiloEditorComponent, decorators: [{
|
|
583
589
|
type: Component,
|
|
@@ -585,6 +591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
585
591
|
ReactiveFormsModule,
|
|
586
592
|
MatFormFieldModule,
|
|
587
593
|
MatInputModule,
|
|
594
|
+
MatSelectModule,
|
|
588
595
|
MatButtonToggleModule,
|
|
589
596
|
MatIconModule,
|
|
590
597
|
MatSliderModule,
|
|
@@ -633,12 +640,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
633
640
|
|
|
634
641
|
<mat-form-field appearance="outline">
|
|
635
642
|
<mat-label>{{ tx('style.transform', 'Transformacao') }}</mat-label>
|
|
636
|
-
<select
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
643
|
+
<mat-select
|
|
644
|
+
formControlName="transform"
|
|
645
|
+
[placeholder]="tx('style.transform.none', 'Nenhuma')"
|
|
646
|
+
[attr.aria-label]="tx('style.transformAria', 'Transformacao do texto')"
|
|
647
|
+
>
|
|
648
|
+
<mat-option [value]="null">{{ tx('style.transform.none', 'Nenhuma') }}</mat-option>
|
|
649
|
+
<mat-option value="uppercase">{{ tx('style.transform.uppercase', 'MAIUSCULAS') }}</mat-option>
|
|
650
|
+
<mat-option value="lowercase">{{ tx('style.transform.lowercase', 'minusculas') }}</mat-option>
|
|
651
|
+
<mat-option value="capitalize">{{ tx('style.transform.capitalize', 'Capitalizar') }}</mat-option>
|
|
652
|
+
</mat-select>
|
|
642
653
|
</mat-form-field>
|
|
643
654
|
|
|
644
655
|
<div class="sliders">
|
|
@@ -656,7 +667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
656
667
|
</label>
|
|
657
668
|
</div>
|
|
658
669
|
</div>
|
|
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"] }]
|
|
670
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;container-type:inline-size}.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}@container (max-width: 520px){.estilo-grid,.sliders{grid-template-columns:1fr}}@media(max-width:520px){.estilo-grid,.sliders{grid-template-columns:1fr}}\n"] }]
|
|
660
671
|
}], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
|
|
661
672
|
type: Input
|
|
662
673
|
}] } });
|
|
@@ -712,7 +723,7 @@ class LayoutEditorComponent {
|
|
|
712
723
|
<input matInput type="number" formControlName="elevation" placeholder="6" />
|
|
713
724
|
</mat-form-field>
|
|
714
725
|
</div>
|
|
715
|
-
`, 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 });
|
|
726
|
+
`, 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$1.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$1.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 });
|
|
716
727
|
}
|
|
717
728
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutEditorComponent, decorators: [{
|
|
718
729
|
type: Component,
|
|
@@ -810,7 +821,7 @@ class IconeBadgeEditorComponent {
|
|
|
810
821
|
</mat-button-toggle-group>
|
|
811
822
|
</div>
|
|
812
823
|
</div>
|
|
813
|
-
`, 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 });
|
|
824
|
+
`, 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$1.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$1.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 });
|
|
814
825
|
}
|
|
815
826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconeBadgeEditorComponent, decorators: [{
|
|
816
827
|
type: Component,
|
|
@@ -942,33 +953,41 @@ class AnimacaoEditorComponent {
|
|
|
942
953
|
</label>
|
|
943
954
|
<mat-form-field appearance="outline">
|
|
944
955
|
<mat-label>{{ tx('animation.preset', 'Preset') }}</mat-label>
|
|
945
|
-
<select
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
<option value="
|
|
951
|
-
<option value="
|
|
952
|
-
<option value="
|
|
953
|
-
<option value="
|
|
954
|
-
<option value="
|
|
955
|
-
<option value="
|
|
956
|
-
<option value="
|
|
957
|
-
<option value="
|
|
958
|
-
<option value="
|
|
959
|
-
|
|
956
|
+
<mat-select
|
|
957
|
+
formControlName="preset"
|
|
958
|
+
[placeholder]="tx('animation.preset.none', 'Sem preset')"
|
|
959
|
+
[attr.aria-label]="tx('animation.preset.aria', 'Preset de animacao')"
|
|
960
|
+
>
|
|
961
|
+
<mat-option value="">{{ tx('animation.preset.none', 'Sem preset') }}</mat-option>
|
|
962
|
+
<mat-option value="info-soft">Info Soft</mat-option>
|
|
963
|
+
<mat-option value="success-confirm">Success Confirm</mat-option>
|
|
964
|
+
<mat-option value="warning-attention">Warning Attention</mat-option>
|
|
965
|
+
<mat-option value="critical-alert">Critical Alert</mat-option>
|
|
966
|
+
<mat-option value="audit-review">Audit Review</mat-option>
|
|
967
|
+
<mat-option value="sync-pending">Sync Pending</mat-option>
|
|
968
|
+
<mat-option value="sla-warning">SLA Warning (alias)</mat-option>
|
|
969
|
+
<mat-option value="sla-breach">SLA Breach (alias)</mat-option>
|
|
970
|
+
<mat-option value="risk-elevated">Risk Elevated (alias)</mat-option>
|
|
971
|
+
<mat-option value="risk-critical">Risk Critical (alias)</mat-option>
|
|
972
|
+
<mat-option value="audit-warning">Audit Warning (alias)</mat-option>
|
|
973
|
+
<mat-option value="sync-warning">Sync Warning (alias)</mat-option>
|
|
974
|
+
</mat-select>
|
|
960
975
|
</mat-form-field>
|
|
961
976
|
<mat-form-field appearance="outline">
|
|
962
977
|
<mat-label>{{ tx('animation.type', 'Tipo') }}</mat-label>
|
|
963
|
-
<select
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
<option value="
|
|
969
|
-
<option value="
|
|
970
|
-
<option value="
|
|
971
|
-
|
|
978
|
+
<mat-select
|
|
979
|
+
formControlName="type"
|
|
980
|
+
[placeholder]="tx('animation.defaultFromPreset', 'Padrao do preset')"
|
|
981
|
+
[attr.aria-label]="tx('animation.type.aria', 'Tipo de animacao')"
|
|
982
|
+
>
|
|
983
|
+
<mat-option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</mat-option>
|
|
984
|
+
<mat-option value="pulse">Pulse</mat-option>
|
|
985
|
+
<mat-option value="blink">Blink</mat-option>
|
|
986
|
+
<mat-option value="grow">Grow</mat-option>
|
|
987
|
+
<mat-option value="fade">Fade</mat-option>
|
|
988
|
+
<mat-option value="slide-in">Slide In</mat-option>
|
|
989
|
+
<mat-option value="border-pulse">Border Pulse</mat-option>
|
|
990
|
+
</mat-select>
|
|
972
991
|
</mat-form-field>
|
|
973
992
|
<mat-form-field appearance="outline">
|
|
974
993
|
<mat-label>{{ tx('animation.duration', 'Duracao (ms)') }}</mat-label>
|
|
@@ -980,40 +999,52 @@ class AnimacaoEditorComponent {
|
|
|
980
999
|
</mat-form-field>
|
|
981
1000
|
<mat-form-field appearance="outline">
|
|
982
1001
|
<mat-label>{{ tx('animation.trigger', 'Disparo') }}</mat-label>
|
|
983
|
-
<select
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
<option value="
|
|
989
|
-
<option value="
|
|
990
|
-
<option value="
|
|
991
|
-
|
|
1002
|
+
<mat-select
|
|
1003
|
+
formControlName="trigger"
|
|
1004
|
+
[placeholder]="tx('animation.defaultFromPreset', 'Padrao do preset')"
|
|
1005
|
+
[attr.aria-label]="tx('animation.trigger.aria', 'Disparo da animacao')"
|
|
1006
|
+
>
|
|
1007
|
+
<mat-option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</mat-option>
|
|
1008
|
+
<mat-option value="onChange">{{ tx('animation.trigger.onChange', 'Ao mudar') }}</mat-option>
|
|
1009
|
+
<mat-option value="onAppear">{{ tx('animation.trigger.onAppear', 'Ao aparecer') }}</mat-option>
|
|
1010
|
+
<mat-option value="onHover">{{ tx('animation.trigger.onHover', 'Ao passar o mouse') }}</mat-option>
|
|
1011
|
+
<mat-option value="onConditionEnter">{{ tx('animation.trigger.onConditionEnter', 'Ao entrar na condicao') }}</mat-option>
|
|
1012
|
+
<mat-option value="onConditionExit">{{ tx('animation.trigger.onConditionExit', 'Ao sair da condicao') }}</mat-option>
|
|
1013
|
+
<mat-option value="onDataRefresh">{{ tx('animation.trigger.onDataRefresh', 'Ao atualizar dados') }}</mat-option>
|
|
1014
|
+
</mat-select>
|
|
992
1015
|
</mat-form-field>
|
|
993
1016
|
<mat-form-field appearance="outline">
|
|
994
1017
|
<mat-label>{{ tx('animation.repeat', 'Repeticao') }}</mat-label>
|
|
995
|
-
<select
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1018
|
+
<mat-select
|
|
1019
|
+
formControlName="repeat"
|
|
1020
|
+
[placeholder]="tx('animation.defaultFromPreset', 'Padrao do preset')"
|
|
1021
|
+
[attr.aria-label]="tx('animation.repeat.aria', 'Repeticao da animacao')"
|
|
1022
|
+
>
|
|
1023
|
+
<mat-option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</mat-option>
|
|
1024
|
+
<mat-option value="once">{{ tx('animation.repeat.once', 'Uma vez') }}</mat-option>
|
|
1025
|
+
<mat-option value="loop">{{ tx('animation.repeat.loop', 'Loop') }}</mat-option>
|
|
1026
|
+
<mat-option value="infinite">{{ tx('animation.repeat.infinite', 'Infinito') }}</mat-option>
|
|
1027
|
+
</mat-select>
|
|
1001
1028
|
</mat-form-field>
|
|
1002
1029
|
<mat-form-field appearance="outline">
|
|
1003
1030
|
<mat-label>{{ tx('animation.intensity', 'Intensidade') }}</mat-label>
|
|
1004
|
-
<select
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1031
|
+
<mat-select
|
|
1032
|
+
formControlName="intensity"
|
|
1033
|
+
[placeholder]="tx('animation.defaultFromPreset', 'Padrao do preset')"
|
|
1034
|
+
[attr.aria-label]="tx('animation.intensity.aria', 'Intensidade da animacao')"
|
|
1035
|
+
>
|
|
1036
|
+
<mat-option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</mat-option>
|
|
1037
|
+
<mat-option value="subtle">{{ tx('animation.intensity.subtle', 'Sutil') }}</mat-option>
|
|
1038
|
+
<mat-option value="normal">{{ tx('animation.intensity.normal', 'Normal') }}</mat-option>
|
|
1039
|
+
<mat-option value="strong">{{ tx('animation.intensity.strong', 'Forte') }}</mat-option>
|
|
1040
|
+
</mat-select>
|
|
1010
1041
|
</mat-form-field>
|
|
1011
1042
|
</div>
|
|
1012
|
-
`, 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}
|
|
1043
|
+
`, isInline: true, styles: [":host{display:block;container-type:inline-size}.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;cursor:pointer}.anim-toggle input[type=checkbox]{accent-color:var(--pfx-settings-panel-accent, var(--md-sys-color-primary));width:16px;height:16px}@container (max-width: 520px){.anim-grid{grid-template-columns:1fr}}\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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][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: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1013
1044
|
}
|
|
1014
1045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnimacaoEditorComponent, decorators: [{
|
|
1015
1046
|
type: Component,
|
|
1016
|
-
args: [{ selector: 'praxis-effects-animacao-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
|
|
1047
|
+
args: [{ selector: 'praxis-effects-animacao-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule], template: `
|
|
1017
1048
|
<div class="anim-grid" role="group" [attr.aria-label]="tx('animation.group', 'Editor de animacao')" [formGroup]="group">
|
|
1018
1049
|
<label class="anim-toggle">
|
|
1019
1050
|
<input type="checkbox" formControlName="enabled" />
|
|
@@ -1021,33 +1052,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1021
1052
|
</label>
|
|
1022
1053
|
<mat-form-field appearance="outline">
|
|
1023
1054
|
<mat-label>{{ tx('animation.preset', 'Preset') }}</mat-label>
|
|
1024
|
-
<select
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
<option value="
|
|
1030
|
-
<option value="
|
|
1031
|
-
<option value="
|
|
1032
|
-
<option value="
|
|
1033
|
-
<option value="
|
|
1034
|
-
<option value="
|
|
1035
|
-
<option value="
|
|
1036
|
-
<option value="
|
|
1037
|
-
<option value="
|
|
1038
|
-
|
|
1055
|
+
<mat-select
|
|
1056
|
+
formControlName="preset"
|
|
1057
|
+
[placeholder]="tx('animation.preset.none', 'Sem preset')"
|
|
1058
|
+
[attr.aria-label]="tx('animation.preset.aria', 'Preset de animacao')"
|
|
1059
|
+
>
|
|
1060
|
+
<mat-option value="">{{ tx('animation.preset.none', 'Sem preset') }}</mat-option>
|
|
1061
|
+
<mat-option value="info-soft">Info Soft</mat-option>
|
|
1062
|
+
<mat-option value="success-confirm">Success Confirm</mat-option>
|
|
1063
|
+
<mat-option value="warning-attention">Warning Attention</mat-option>
|
|
1064
|
+
<mat-option value="critical-alert">Critical Alert</mat-option>
|
|
1065
|
+
<mat-option value="audit-review">Audit Review</mat-option>
|
|
1066
|
+
<mat-option value="sync-pending">Sync Pending</mat-option>
|
|
1067
|
+
<mat-option value="sla-warning">SLA Warning (alias)</mat-option>
|
|
1068
|
+
<mat-option value="sla-breach">SLA Breach (alias)</mat-option>
|
|
1069
|
+
<mat-option value="risk-elevated">Risk Elevated (alias)</mat-option>
|
|
1070
|
+
<mat-option value="risk-critical">Risk Critical (alias)</mat-option>
|
|
1071
|
+
<mat-option value="audit-warning">Audit Warning (alias)</mat-option>
|
|
1072
|
+
<mat-option value="sync-warning">Sync Warning (alias)</mat-option>
|
|
1073
|
+
</mat-select>
|
|
1039
1074
|
</mat-form-field>
|
|
1040
1075
|
<mat-form-field appearance="outline">
|
|
1041
1076
|
<mat-label>{{ tx('animation.type', 'Tipo') }}</mat-label>
|
|
1042
|
-
<select
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
<option value="
|
|
1048
|
-
<option value="
|
|
1049
|
-
<option value="
|
|
1050
|
-
|
|
1077
|
+
<mat-select
|
|
1078
|
+
formControlName="type"
|
|
1079
|
+
[placeholder]="tx('animation.defaultFromPreset', 'Padrao do preset')"
|
|
1080
|
+
[attr.aria-label]="tx('animation.type.aria', 'Tipo de animacao')"
|
|
1081
|
+
>
|
|
1082
|
+
<mat-option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</mat-option>
|
|
1083
|
+
<mat-option value="pulse">Pulse</mat-option>
|
|
1084
|
+
<mat-option value="blink">Blink</mat-option>
|
|
1085
|
+
<mat-option value="grow">Grow</mat-option>
|
|
1086
|
+
<mat-option value="fade">Fade</mat-option>
|
|
1087
|
+
<mat-option value="slide-in">Slide In</mat-option>
|
|
1088
|
+
<mat-option value="border-pulse">Border Pulse</mat-option>
|
|
1089
|
+
</mat-select>
|
|
1051
1090
|
</mat-form-field>
|
|
1052
1091
|
<mat-form-field appearance="outline">
|
|
1053
1092
|
<mat-label>{{ tx('animation.duration', 'Duracao (ms)') }}</mat-label>
|
|
@@ -1059,36 +1098,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1059
1098
|
</mat-form-field>
|
|
1060
1099
|
<mat-form-field appearance="outline">
|
|
1061
1100
|
<mat-label>{{ tx('animation.trigger', 'Disparo') }}</mat-label>
|
|
1062
|
-
<select
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
<option value="
|
|
1068
|
-
<option value="
|
|
1069
|
-
<option value="
|
|
1070
|
-
|
|
1101
|
+
<mat-select
|
|
1102
|
+
formControlName="trigger"
|
|
1103
|
+
[placeholder]="tx('animation.defaultFromPreset', 'Padrao do preset')"
|
|
1104
|
+
[attr.aria-label]="tx('animation.trigger.aria', 'Disparo da animacao')"
|
|
1105
|
+
>
|
|
1106
|
+
<mat-option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</mat-option>
|
|
1107
|
+
<mat-option value="onChange">{{ tx('animation.trigger.onChange', 'Ao mudar') }}</mat-option>
|
|
1108
|
+
<mat-option value="onAppear">{{ tx('animation.trigger.onAppear', 'Ao aparecer') }}</mat-option>
|
|
1109
|
+
<mat-option value="onHover">{{ tx('animation.trigger.onHover', 'Ao passar o mouse') }}</mat-option>
|
|
1110
|
+
<mat-option value="onConditionEnter">{{ tx('animation.trigger.onConditionEnter', 'Ao entrar na condicao') }}</mat-option>
|
|
1111
|
+
<mat-option value="onConditionExit">{{ tx('animation.trigger.onConditionExit', 'Ao sair da condicao') }}</mat-option>
|
|
1112
|
+
<mat-option value="onDataRefresh">{{ tx('animation.trigger.onDataRefresh', 'Ao atualizar dados') }}</mat-option>
|
|
1113
|
+
</mat-select>
|
|
1071
1114
|
</mat-form-field>
|
|
1072
1115
|
<mat-form-field appearance="outline">
|
|
1073
1116
|
<mat-label>{{ tx('animation.repeat', 'Repeticao') }}</mat-label>
|
|
1074
|
-
<select
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1117
|
+
<mat-select
|
|
1118
|
+
formControlName="repeat"
|
|
1119
|
+
[placeholder]="tx('animation.defaultFromPreset', 'Padrao do preset')"
|
|
1120
|
+
[attr.aria-label]="tx('animation.repeat.aria', 'Repeticao da animacao')"
|
|
1121
|
+
>
|
|
1122
|
+
<mat-option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</mat-option>
|
|
1123
|
+
<mat-option value="once">{{ tx('animation.repeat.once', 'Uma vez') }}</mat-option>
|
|
1124
|
+
<mat-option value="loop">{{ tx('animation.repeat.loop', 'Loop') }}</mat-option>
|
|
1125
|
+
<mat-option value="infinite">{{ tx('animation.repeat.infinite', 'Infinito') }}</mat-option>
|
|
1126
|
+
</mat-select>
|
|
1080
1127
|
</mat-form-field>
|
|
1081
1128
|
<mat-form-field appearance="outline">
|
|
1082
1129
|
<mat-label>{{ tx('animation.intensity', 'Intensidade') }}</mat-label>
|
|
1083
|
-
<select
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1130
|
+
<mat-select
|
|
1131
|
+
formControlName="intensity"
|
|
1132
|
+
[placeholder]="tx('animation.defaultFromPreset', 'Padrao do preset')"
|
|
1133
|
+
[attr.aria-label]="tx('animation.intensity.aria', 'Intensidade da animacao')"
|
|
1134
|
+
>
|
|
1135
|
+
<mat-option value="">{{ tx('animation.defaultFromPreset', 'Padrao do preset') }}</mat-option>
|
|
1136
|
+
<mat-option value="subtle">{{ tx('animation.intensity.subtle', 'Sutil') }}</mat-option>
|
|
1137
|
+
<mat-option value="normal">{{ tx('animation.intensity.normal', 'Normal') }}</mat-option>
|
|
1138
|
+
<mat-option value="strong">{{ tx('animation.intensity.strong', 'Forte') }}</mat-option>
|
|
1139
|
+
</mat-select>
|
|
1089
1140
|
</mat-form-field>
|
|
1090
1141
|
</div>
|
|
1091
|
-
`, 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"] }]
|
|
1142
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;container-type:inline-size}.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;cursor:pointer}.anim-toggle input[type=checkbox]{accent-color:var(--pfx-settings-panel-accent, var(--md-sys-color-primary));width:16px;height:16px}@container (max-width: 520px){.anim-grid{grid-template-columns:1fr}}\n"] }]
|
|
1092
1143
|
}], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
|
|
1093
1144
|
type: Input
|
|
1094
1145
|
}] } });
|
|
@@ -1111,12 +1162,12 @@ class TooltipEditorComponent {
|
|
|
1111
1162
|
</mat-form-field>
|
|
1112
1163
|
<mat-form-field appearance="outline">
|
|
1113
1164
|
<mat-label>{{ tx('tooltip.position', 'Posicao') }}</mat-label>
|
|
1114
|
-
<select
|
|
1115
|
-
<option value="top">{{ tx('tooltip.position.top', 'Topo') }}</option>
|
|
1116
|
-
<option value="right">{{ tx('tooltip.position.right', 'Direita') }}</option>
|
|
1117
|
-
<option value="bottom">{{ tx('tooltip.position.bottom', 'Baixo') }}</option>
|
|
1118
|
-
<option value="left">{{ tx('tooltip.position.left', 'Esquerda') }}</option>
|
|
1119
|
-
</select>
|
|
1165
|
+
<mat-select formControlName="position" [attr.aria-label]="tx('tooltip.position.aria', 'Posicao do tooltip')">
|
|
1166
|
+
<mat-option value="top">{{ tx('tooltip.position.top', 'Topo') }}</mat-option>
|
|
1167
|
+
<mat-option value="right">{{ tx('tooltip.position.right', 'Direita') }}</mat-option>
|
|
1168
|
+
<mat-option value="bottom">{{ tx('tooltip.position.bottom', 'Baixo') }}</mat-option>
|
|
1169
|
+
<mat-option value="left">{{ tx('tooltip.position.left', 'Esquerda') }}</mat-option>
|
|
1170
|
+
</mat-select>
|
|
1120
1171
|
</mat-form-field>
|
|
1121
1172
|
<mat-form-field appearance="outline">
|
|
1122
1173
|
<mat-label>{{ tx('tooltip.backgroundColor', 'Cor do fundo') }}</mat-label>
|
|
@@ -1127,11 +1178,11 @@ class TooltipEditorComponent {
|
|
|
1127
1178
|
<input matInput type="number" formControlName="delayMs" placeholder="300" />
|
|
1128
1179
|
</mat-form-field>
|
|
1129
1180
|
</div>
|
|
1130
|
-
`, 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.
|
|
1181
|
+
`, isInline: true, styles: [":host{display:block;container-type:inline-size}.tooltip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}@container (max-width: 520px){.tooltip-grid{grid-template-columns:1fr}}\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: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1131
1182
|
}
|
|
1132
1183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipEditorComponent, decorators: [{
|
|
1133
1184
|
type: Component,
|
|
1134
|
-
args: [{ selector: 'praxis-effects-tooltip-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: `
|
|
1185
|
+
args: [{ selector: 'praxis-effects-tooltip-editor', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule], template: `
|
|
1135
1186
|
<div class="tooltip-grid" role="group" [attr.aria-label]="tx('tooltip.group', 'Editor de tooltip')" [formGroup]="group">
|
|
1136
1187
|
<mat-form-field appearance="outline" class="full">
|
|
1137
1188
|
<mat-label>{{ tx('tooltip.text', 'Texto') }}</mat-label>
|
|
@@ -1139,12 +1190,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1139
1190
|
</mat-form-field>
|
|
1140
1191
|
<mat-form-field appearance="outline">
|
|
1141
1192
|
<mat-label>{{ tx('tooltip.position', 'Posicao') }}</mat-label>
|
|
1142
|
-
<select
|
|
1143
|
-
<option value="top">{{ tx('tooltip.position.top', 'Topo') }}</option>
|
|
1144
|
-
<option value="right">{{ tx('tooltip.position.right', 'Direita') }}</option>
|
|
1145
|
-
<option value="bottom">{{ tx('tooltip.position.bottom', 'Baixo') }}</option>
|
|
1146
|
-
<option value="left">{{ tx('tooltip.position.left', 'Esquerda') }}</option>
|
|
1147
|
-
</select>
|
|
1193
|
+
<mat-select formControlName="position" [attr.aria-label]="tx('tooltip.position.aria', 'Posicao do tooltip')">
|
|
1194
|
+
<mat-option value="top">{{ tx('tooltip.position.top', 'Topo') }}</mat-option>
|
|
1195
|
+
<mat-option value="right">{{ tx('tooltip.position.right', 'Direita') }}</mat-option>
|
|
1196
|
+
<mat-option value="bottom">{{ tx('tooltip.position.bottom', 'Baixo') }}</mat-option>
|
|
1197
|
+
<mat-option value="left">{{ tx('tooltip.position.left', 'Esquerda') }}</mat-option>
|
|
1198
|
+
</mat-select>
|
|
1148
1199
|
</mat-form-field>
|
|
1149
1200
|
<mat-form-field appearance="outline">
|
|
1150
1201
|
<mat-label>{{ tx('tooltip.backgroundColor', 'Cor do fundo') }}</mat-label>
|
|
@@ -1155,7 +1206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1155
1206
|
<input matInput type="number" formControlName="delayMs" placeholder="300" />
|
|
1156
1207
|
</mat-form-field>
|
|
1157
1208
|
</div>
|
|
1158
|
-
`, 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"] }]
|
|
1209
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;container-type:inline-size}.tooltip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.full{grid-column:1 / -1}@container (max-width: 520px){.tooltip-grid{grid-template-columns:1fr}}\n"] }]
|
|
1159
1210
|
}], ctorParameters: () => [{ type: i1.PraxisI18nService }], propDecorators: { group: [{
|
|
1160
1211
|
type: Input
|
|
1161
1212
|
}] } });
|
|
@@ -1717,7 +1768,7 @@ class RuleEffectsPanelComponent {
|
|
|
1717
1768
|
return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed) : undefined;
|
|
1718
1769
|
}
|
|
1719
1770
|
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 });
|
|
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 });
|
|
1771
|
+
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));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));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));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$2.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 });
|
|
1721
1772
|
}
|
|
1722
1773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RuleEffectsPanelComponent, decorators: [{
|
|
1723
1774
|
type: Component,
|
|
@@ -1737,7 +1788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1737
1788
|
FundoEditorComponent,
|
|
1738
1789
|
AnimacaoEditorComponent,
|
|
1739
1790
|
TooltipEditorComponent,
|
|
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"] }]
|
|
1791
|
+
], 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));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));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));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"] }]
|
|
1741
1792
|
}], ctorParameters: () => [{ type: i2.FormBuilder }, { type: EffectRegistryService }, { type: i1.PraxisI18nService }], propDecorators: { labels: [{
|
|
1742
1793
|
type: Input
|
|
1743
1794
|
}], scope: [{
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisui/table-rule-builder",
|
|
3
|
-
"version": "10.0.0-rc.
|
|
3
|
+
"version": "10.0.0-rc.35",
|
|
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": "^10.0.0-rc.
|
|
11
|
-
"@praxisui/core": "^10.0.0-rc.
|
|
12
|
-
"@praxisui/dynamic-fields": "^10.0.0-rc.
|
|
10
|
+
"@praxisui/ai": "^10.0.0-rc.35",
|
|
11
|
+
"@praxisui/core": "^10.0.0-rc.35",
|
|
12
|
+
"@praxisui/dynamic-fields": "^10.0.0-rc.35",
|
|
13
13
|
"rxjs": "~7.8.0"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|