@praxisui/dynamic-form 9.0.4-rc.16 → 9.0.4-rc.18
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.
package/README.md
CHANGED
|
@@ -251,6 +251,11 @@ Common inputs:
|
|
|
251
251
|
- `domainRules`
|
|
252
252
|
- `editorialContext`
|
|
253
253
|
|
|
254
|
+
In `edit` and `view`, `resourceId` identifies the remote entity to hydrate. In
|
|
255
|
+
`create`, it is contextual only (for example, the employee targeted by an
|
|
256
|
+
item-scoped command) and never starts an entity read; provide command defaults
|
|
257
|
+
through `initialValue`.
|
|
258
|
+
|
|
254
259
|
Common outputs:
|
|
255
260
|
|
|
256
261
|
- `formSubmit`, `formCancel`, `formReset`
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
|
-
"generatedAt": "2026-08-
|
|
3
|
+
"generatedAt": "2026-08-03T19:37:31.311Z",
|
|
4
4
|
"packageName": "@praxisui/dynamic-form",
|
|
5
|
-
"packageVersion": "9.0.4-rc.
|
|
5
|
+
"packageVersion": "9.0.4-rc.18",
|
|
6
6
|
"sourceRegistry": "praxis-component-registry-ingestion",
|
|
7
7
|
"sourceRegistryVersion": "1.0.0",
|
|
8
8
|
"componentCount": 2,
|
|
@@ -628,6 +628,7 @@ const PRAXIS_DYNAMIC_FORM_I18N_CONFIG = {
|
|
|
628
628
|
[PRAXIS_DYNAMIC_FORM_I18N_NAMESPACE]: {
|
|
629
629
|
'pt-BR': {
|
|
630
630
|
'settings.title': 'Configuração do Formulário',
|
|
631
|
+
'layout.defaultSectionTitle': 'Informações',
|
|
631
632
|
'actions.invalidRequired': 'Preencha os campos obrigatórios para continuar.',
|
|
632
633
|
'actions.invalidRequiredWithFields': 'Preencha: {{fields}}.',
|
|
633
634
|
'config.tabs.mobileLabel': 'Seção do editor',
|
|
@@ -1116,6 +1117,7 @@ const PRAXIS_DYNAMIC_FORM_I18N_CONFIG = {
|
|
|
1116
1117
|
},
|
|
1117
1118
|
'en-US': {
|
|
1118
1119
|
'settings.title': 'Form Configuration',
|
|
1120
|
+
'layout.defaultSectionTitle': 'Information',
|
|
1119
1121
|
'actions.invalidRequired': 'Complete the required fields to continue.',
|
|
1120
1122
|
'actions.invalidRequiredWithFields': 'Complete: {{fields}}.',
|
|
1121
1123
|
'config.tabs.mobileLabel': 'Editor section',
|
|
@@ -2097,7 +2099,7 @@ class PraxisFormActionsComponent {
|
|
|
2097
2099
|
return actionId === 'cancel' || actionId === 'reset';
|
|
2098
2100
|
}
|
|
2099
2101
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisFormActionsComponent, deps: [{ token: i1$1.KeyboardShortcutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2100
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisFormActionsComponent, isStandalone: true, selector: "praxis-form-actions", inputs: { actions: "actions", editorialVisualContext: "editorialVisualContext", isSubmitting: "isSubmitting", formIsValid: "formIsValid", submitError: "submitError", invalidRequiredFieldLabels: "invalidRequiredFieldLabels", suppressInvalidSubmitHint: "suppressInvalidSubmitHint", formId: "formId", actionOverrides: "actionOverrides" }, outputs: { action: "action" }, providers: [providePraxisI18nConfig(PRAXIS_DYNAMIC_FORM_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"form-actions\"\n [ngClass]=\"viewClassMap\"\n [ngStyle]=\"actions?.containerStyles\"\n>\n @if (submitError) {\n <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n <div>\n <h4 class=\"alert__title\">Erro ao salvar</h4>\n <p class=\"alert__text\">{{ submitError }}</p>\n </div>\n </div>\n }\n @if (shouldShowInvalidSubmitHint()) {\n <div class=\"form-actions__hint\" role=\"status\" aria-live=\"polite\">\n <mat-icon class=\"form-actions__hint-icon\" aria-hidden=\"true\">info</mat-icon>\n <span>{{ getInvalidSubmitHint() }}</span>\n </div>\n }\n <div class=\"desktop-actions\">\n @if (isSplitLayout()) {\n <div class=\"desktop-actions-group secondary-group\">\n @for (button of getSecondaryButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n </div>\n <div class=\"desktop-actions-group primary-group\">\n @for (button of getPrimaryButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n </div>\n } @else {\n @for (button of getActionButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n }\n </div>\n @if (actions?.mobile?.collapseToMenu) {\n <div class=\"mobile-actions\">\n @for (button of getVisibleButtons(); track button.id) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n @if (getCollapsedButtons().length > 0) {\n <button\n praxisIconButton=\"more_vert\"\n size=\"compact\"\n [matMenuTriggerFor]=\"actionsMenu\"\n aria-label=\"More actions\"\n >\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n @for (button of getCollapsedButtons(); track button.id) {\n <button\n mat-menu-item\n (click)=\"onActionButtonClick(button, $event)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\"\n >\n @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n </mat-menu>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.1rem;z-index:1;font-family:inherit;border-radius:18px;background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%));border:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.with-divider{border-top:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}:host([data-actions-placement=afterSections]) .form-actions{margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px);background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%))}:host([data-actions-placement=afterSections]) .form-actions.with-divider{border-top-color:var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit)}.form-actions.editorial-visual-context.with-divider{border-top:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant)) 72%,transparent)}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}.form-actions__hint{display:inline-flex;align-items:center;gap:.45rem;max-width:min(100%,32rem);padding:.5rem .65rem;border-radius:8px;font-size:.84rem;line-height:1.25;color:var(--md-sys-color-on-secondary-container);background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-secondary-container) 82%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary-container) 44%,transparent));border:1px solid color-mix(in srgb,var(--md-sys-color-secondary) 22%,transparent)}.form-actions__hint-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;line-height:18px}.form-actions.position-split .desktop-actions{width:100%;justify-content:space-between;align-items:center}.desktop-actions-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.desktop-actions-group.primary-group{justify-content:flex-end}.desktop-actions-group.secondary-group{opacity:.94}.form-actions .mdc-button{letter-spacing:.01em;border-radius:999px}.form-actions.editorial-visual-context .mdc-button{border-radius:var(--editorial-button-radius, 999px);font-family:var(--editorial-body-font-family, inherit)}.form-actions .mdc-button.size-small{min-height:36px;padding-inline:12px;font-size:.82rem}.form-actions .mdc-button.size-medium{min-height:44px;padding-inline:18px}.form-actions .mdc-button.size-large{min-height:50px;padding-inline:24px;font-size:.98rem}.form-actions .mat-mdc-raised-button,.form-actions .mat-mdc-unelevated-button{box-shadow:none}.form-actions .mat-mdc-raised-button:not([disabled]),.form-actions .mat-mdc-unelevated-button:not([disabled]){--mdc-protected-button-container-color: var(--md-sys-color-primary);--mdc-protected-button-label-text-color: var(--md-sys-color-on-primary);--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary)}.form-actions .mat-mdc-raised-button[disabled],.form-actions .mat-mdc-unelevated-button[disabled]{opacity:.55}.form-actions .mat-mdc-outlined-button,.form-actions .mat-mdc-button-base.mat-mdc-outlined-button{background:transparent}.form-actions.editorial-visual-context .mat-mdc-raised-button,.form-actions.editorial-visual-context .mat-mdc-unelevated-button{--mdc-protected-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-protected-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mdc-filled-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-filled-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));box-shadow:var(--editorial-floating-shadow, var(--editorial-card-shadow, none))}.form-actions.editorial-visual-context .mat-mdc-outlined-button{--mdc-outlined-button-outline-color: var(--editorial-border-color, var(--md-sys-color-outline-variant));--mdc-outlined-button-label-text-color: var( --editorial-cta-secondary-text, var(--editorial-text-primary, var(--md-sys-color-on-surface)) );background:color-mix(in srgb,var(--editorial-cta-secondary, var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low))) 72%,transparent)}.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-primary,.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-accent{--mdc-outlined-button-label-text-color: var(--editorial-cta-primary, var(--md-sys-color-primary));background:transparent}.form-actions button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.form-actions button .mat-icon+span{margin-left:8px}@media(max-width:768px){.form-actions{padding:.9rem;border-radius:16px}:host([data-actions-placement=afterSections]) .form-actions{border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px)}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
|
|
2102
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisFormActionsComponent, isStandalone: true, selector: "praxis-form-actions", inputs: { actions: "actions", editorialVisualContext: "editorialVisualContext", isSubmitting: "isSubmitting", formIsValid: "formIsValid", submitError: "submitError", invalidRequiredFieldLabels: "invalidRequiredFieldLabels", suppressInvalidSubmitHint: "suppressInvalidSubmitHint", formId: "formId", actionOverrides: "actionOverrides" }, outputs: { action: "action" }, providers: [providePraxisI18nConfig(PRAXIS_DYNAMIC_FORM_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"form-actions\"\n [ngClass]=\"viewClassMap\"\n [ngStyle]=\"actions?.containerStyles\"\n>\n @if (submitError) {\n <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n <div>\n <h4 class=\"alert__title\">Erro ao salvar</h4>\n <p class=\"alert__text\">{{ submitError }}</p>\n </div>\n </div>\n }\n @if (shouldShowInvalidSubmitHint()) {\n <div class=\"form-actions__hint\" role=\"status\" aria-live=\"polite\">\n <mat-icon class=\"form-actions__hint-icon\" aria-hidden=\"true\">info</mat-icon>\n <span>{{ getInvalidSubmitHint() }}</span>\n </div>\n }\n <div class=\"desktop-actions\">\n @if (isSplitLayout()) {\n <div class=\"desktop-actions-group secondary-group\">\n @for (button of getSecondaryButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n </div>\n <div class=\"desktop-actions-group primary-group\">\n @for (button of getPrimaryButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n </div>\n } @else {\n @for (button of getActionButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n }\n </div>\n @if (actions?.mobile?.collapseToMenu) {\n <div class=\"mobile-actions\">\n @for (button of getVisibleButtons(); track button.id) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n @if (getCollapsedButtons().length > 0) {\n <button\n praxisIconButton=\"more_vert\"\n size=\"compact\"\n [matMenuTriggerFor]=\"actionsMenu\"\n aria-label=\"More actions\"\n >\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n @for (button of getCollapsedButtons(); track button.id) {\n <button\n mat-menu-item\n (click)=\"onActionButtonClick(button, $event)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\"\n >\n @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n </mat-menu>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.1rem;z-index:1;font-family:inherit;border-radius:18px;background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%));border:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.with-divider{border-top:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}:host([data-actions-placement=afterSections]) .form-actions{margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px);background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%))}:host([data-actions-placement=afterSections]) .form-actions.with-divider{border-top-color:var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit)}.form-actions.editorial-visual-context.with-divider{border-top:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant)) 72%,transparent)}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}.form-actions__hint{display:inline-flex;align-items:center;gap:.45rem;max-width:min(100%,32rem);padding:.5rem .65rem;border-radius:8px;font-size:.84rem;line-height:1.25;color:var(--md-sys-color-on-secondary-container);background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-secondary-container) 82%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary-container) 44%,transparent));border:1px solid color-mix(in srgb,var(--md-sys-color-secondary) 22%,transparent)}.form-actions__hint-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;line-height:18px}.form-actions.position-split .desktop-actions{width:100%;justify-content:space-between;align-items:center}.desktop-actions-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.desktop-actions-group.primary-group{justify-content:flex-end}.desktop-actions-group.secondary-group{opacity:.94}.form-actions .mdc-button{letter-spacing:.01em;border-radius:999px}.form-actions.editorial-visual-context .mdc-button{border-radius:var(--editorial-button-radius, 999px);font-family:var(--editorial-body-font-family, inherit)}.form-actions .mdc-button.size-small{min-height:36px;padding-inline:12px;font-size:.82rem}.form-actions .mdc-button.size-medium{min-height:44px;padding-inline:18px}.form-actions .mdc-button.size-large{min-height:50px;padding-inline:24px;font-size:.98rem}.form-actions .mat-mdc-raised-button,.form-actions .mat-mdc-unelevated-button{box-shadow:none}.form-actions .mat-mdc-raised-button:not([disabled]),.form-actions .mat-mdc-unelevated-button:not([disabled]){--mat-button-protected-container-color: var(--md-sys-color-primary);--mat-button-protected-label-text-color: var(--md-sys-color-on-primary);--mat-button-filled-container-color: var(--md-sys-color-primary);--mat-button-filled-label-text-color: var(--md-sys-color-on-primary);--mdc-protected-button-container-color: var(--md-sys-color-primary);--mdc-protected-button-label-text-color: var(--md-sys-color-on-primary);--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary)}.form-actions .mat-mdc-raised-button[disabled],.form-actions .mat-mdc-unelevated-button[disabled]{opacity:.55}.form-actions .mat-mdc-outlined-button,.form-actions .mat-mdc-button-base.mat-mdc-outlined-button{background:transparent}.form-actions.editorial-visual-context .mat-mdc-raised-button,.form-actions.editorial-visual-context .mat-mdc-unelevated-button{--mat-button-protected-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mat-button-protected-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mat-button-filled-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mat-button-filled-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mdc-protected-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-protected-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mdc-filled-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-filled-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));box-shadow:var(--editorial-floating-shadow, var(--editorial-card-shadow, none))}.form-actions.editorial-visual-context .mat-mdc-outlined-button{--mdc-outlined-button-outline-color: var(--editorial-border-color, var(--md-sys-color-outline-variant));--mdc-outlined-button-label-text-color: var( --editorial-cta-secondary-text, var(--editorial-text-primary, var(--md-sys-color-on-surface)) );background:color-mix(in srgb,var(--editorial-cta-secondary, var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low))) 72%,transparent)}.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-primary,.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-accent{--mdc-outlined-button-label-text-color: var(--editorial-cta-primary, var(--md-sys-color-primary));background:transparent}.form-actions button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.form-actions button .mat-icon+span{margin-left:8px}@media(max-width:768px){.form-actions{padding:.9rem;border-radius:16px}:host([data-actions-placement=afterSections]) .form-actions{border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px)}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
|
|
2101
2103
|
}
|
|
2102
2104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisFormActionsComponent, decorators: [{
|
|
2103
2105
|
type: Component,
|
|
@@ -2109,7 +2111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
2109
2111
|
MatMenuModule,
|
|
2110
2112
|
PraxisIconButtonComponent,
|
|
2111
2113
|
PraxisIconDirective,
|
|
2112
|
-
], providers: [providePraxisI18nConfig(PRAXIS_DYNAMIC_FORM_I18N_CONFIG)], template: "<div\n class=\"form-actions\"\n [ngClass]=\"viewClassMap\"\n [ngStyle]=\"actions?.containerStyles\"\n>\n @if (submitError) {\n <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n <div>\n <h4 class=\"alert__title\">Erro ao salvar</h4>\n <p class=\"alert__text\">{{ submitError }}</p>\n </div>\n </div>\n }\n @if (shouldShowInvalidSubmitHint()) {\n <div class=\"form-actions__hint\" role=\"status\" aria-live=\"polite\">\n <mat-icon class=\"form-actions__hint-icon\" aria-hidden=\"true\">info</mat-icon>\n <span>{{ getInvalidSubmitHint() }}</span>\n </div>\n }\n <div class=\"desktop-actions\">\n @if (isSplitLayout()) {\n <div class=\"desktop-actions-group secondary-group\">\n @for (button of getSecondaryButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n </div>\n <div class=\"desktop-actions-group primary-group\">\n @for (button of getPrimaryButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n </div>\n } @else {\n @for (button of getActionButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n }\n </div>\n @if (actions?.mobile?.collapseToMenu) {\n <div class=\"mobile-actions\">\n @for (button of getVisibleButtons(); track button.id) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n @if (getCollapsedButtons().length > 0) {\n <button\n praxisIconButton=\"more_vert\"\n size=\"compact\"\n [matMenuTriggerFor]=\"actionsMenu\"\n aria-label=\"More actions\"\n >\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n @for (button of getCollapsedButtons(); track button.id) {\n <button\n mat-menu-item\n (click)=\"onActionButtonClick(button, $event)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\"\n >\n @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n </mat-menu>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.1rem;z-index:1;font-family:inherit;border-radius:18px;background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%));border:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.with-divider{border-top:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}:host([data-actions-placement=afterSections]) .form-actions{margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px);background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%))}:host([data-actions-placement=afterSections]) .form-actions.with-divider{border-top-color:var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit)}.form-actions.editorial-visual-context.with-divider{border-top:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant)) 72%,transparent)}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}.form-actions__hint{display:inline-flex;align-items:center;gap:.45rem;max-width:min(100%,32rem);padding:.5rem .65rem;border-radius:8px;font-size:.84rem;line-height:1.25;color:var(--md-sys-color-on-secondary-container);background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-secondary-container) 82%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary-container) 44%,transparent));border:1px solid color-mix(in srgb,var(--md-sys-color-secondary) 22%,transparent)}.form-actions__hint-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;line-height:18px}.form-actions.position-split .desktop-actions{width:100%;justify-content:space-between;align-items:center}.desktop-actions-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.desktop-actions-group.primary-group{justify-content:flex-end}.desktop-actions-group.secondary-group{opacity:.94}.form-actions .mdc-button{letter-spacing:.01em;border-radius:999px}.form-actions.editorial-visual-context .mdc-button{border-radius:var(--editorial-button-radius, 999px);font-family:var(--editorial-body-font-family, inherit)}.form-actions .mdc-button.size-small{min-height:36px;padding-inline:12px;font-size:.82rem}.form-actions .mdc-button.size-medium{min-height:44px;padding-inline:18px}.form-actions .mdc-button.size-large{min-height:50px;padding-inline:24px;font-size:.98rem}.form-actions .mat-mdc-raised-button,.form-actions .mat-mdc-unelevated-button{box-shadow:none}.form-actions .mat-mdc-raised-button:not([disabled]),.form-actions .mat-mdc-unelevated-button:not([disabled]){--mdc-protected-button-container-color: var(--md-sys-color-primary);--mdc-protected-button-label-text-color: var(--md-sys-color-on-primary);--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary)}.form-actions .mat-mdc-raised-button[disabled],.form-actions .mat-mdc-unelevated-button[disabled]{opacity:.55}.form-actions .mat-mdc-outlined-button,.form-actions .mat-mdc-button-base.mat-mdc-outlined-button{background:transparent}.form-actions.editorial-visual-context .mat-mdc-raised-button,.form-actions.editorial-visual-context .mat-mdc-unelevated-button{--mdc-protected-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-protected-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mdc-filled-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-filled-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));box-shadow:var(--editorial-floating-shadow, var(--editorial-card-shadow, none))}.form-actions.editorial-visual-context .mat-mdc-outlined-button{--mdc-outlined-button-outline-color: var(--editorial-border-color, var(--md-sys-color-outline-variant));--mdc-outlined-button-label-text-color: var( --editorial-cta-secondary-text, var(--editorial-text-primary, var(--md-sys-color-on-surface)) );background:color-mix(in srgb,var(--editorial-cta-secondary, var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low))) 72%,transparent)}.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-primary,.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-accent{--mdc-outlined-button-label-text-color: var(--editorial-cta-primary, var(--md-sys-color-primary));background:transparent}.form-actions button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.form-actions button .mat-icon+span{margin-left:8px}@media(max-width:768px){.form-actions{padding:.9rem;border-radius:16px}:host([data-actions-placement=afterSections]) .form-actions{border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px)}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"] }]
|
|
2114
|
+
], providers: [providePraxisI18nConfig(PRAXIS_DYNAMIC_FORM_I18N_CONFIG)], template: "<div\n class=\"form-actions\"\n [ngClass]=\"viewClassMap\"\n [ngStyle]=\"actions?.containerStyles\"\n>\n @if (submitError) {\n <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n <div>\n <h4 class=\"alert__title\">Erro ao salvar</h4>\n <p class=\"alert__text\">{{ submitError }}</p>\n </div>\n </div>\n }\n @if (shouldShowInvalidSubmitHint()) {\n <div class=\"form-actions__hint\" role=\"status\" aria-live=\"polite\">\n <mat-icon class=\"form-actions__hint-icon\" aria-hidden=\"true\">info</mat-icon>\n <span>{{ getInvalidSubmitHint() }}</span>\n </div>\n }\n <div class=\"desktop-actions\">\n @if (isSplitLayout()) {\n <div class=\"desktop-actions-group secondary-group\">\n @for (button of getSecondaryButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n </div>\n <div class=\"desktop-actions-group primary-group\">\n @for (button of getPrimaryButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n </div>\n } @else {\n @for (button of getActionButtons(); track button.id) {\n @if (button.visible) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button\n [type]=\"button.type || 'button'\"\n [color]=\"getMatColor(button)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [attr.aria-busy]=\"button.loading ? 'true' : null\"\n [matTooltip]=\"button.tooltip\"\n (click)=\"onActionButtonClick(button, $event)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n }\n }\n </div>\n @if (actions?.mobile?.collapseToMenu) {\n <div class=\"mobile-actions\">\n @for (button of getVisibleButtons(); track button.id) {\n @switch (button.variant || 'raised') {\n @case ('stroked') {\n <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @case ('fab') {\n <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n @default {\n <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n }\n }\n @if (getCollapsedButtons().length > 0) {\n <button\n praxisIconButton=\"more_vert\"\n size=\"compact\"\n [matMenuTriggerFor]=\"actionsMenu\"\n aria-label=\"More actions\"\n >\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n @for (button of getCollapsedButtons(); track button.id) {\n <button\n mat-menu-item\n (click)=\"onActionButtonClick(button, $event)\"\n [disabled]=\"isActionButtonDisabled(button)\"\n [ngClass]=\"getButtonNgClass(button)\"\n [ngStyle]=\"getButtonStyles(button)\"\n >\n @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n <span>{{ button.label }}</span>\n </button>\n }\n </mat-menu>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.1rem;z-index:1;font-family:inherit;border-radius:18px;background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%));border:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.with-divider{border-top:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}:host([data-actions-placement=afterSections]) .form-actions{margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px);background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%))}:host([data-actions-placement=afterSections]) .form-actions.with-divider{border-top-color:var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit)}.form-actions.editorial-visual-context.with-divider{border-top:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant)) 72%,transparent)}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}.form-actions__hint{display:inline-flex;align-items:center;gap:.45rem;max-width:min(100%,32rem);padding:.5rem .65rem;border-radius:8px;font-size:.84rem;line-height:1.25;color:var(--md-sys-color-on-secondary-container);background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-secondary-container) 82%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary-container) 44%,transparent));border:1px solid color-mix(in srgb,var(--md-sys-color-secondary) 22%,transparent)}.form-actions__hint-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;line-height:18px}.form-actions.position-split .desktop-actions{width:100%;justify-content:space-between;align-items:center}.desktop-actions-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.desktop-actions-group.primary-group{justify-content:flex-end}.desktop-actions-group.secondary-group{opacity:.94}.form-actions .mdc-button{letter-spacing:.01em;border-radius:999px}.form-actions.editorial-visual-context .mdc-button{border-radius:var(--editorial-button-radius, 999px);font-family:var(--editorial-body-font-family, inherit)}.form-actions .mdc-button.size-small{min-height:36px;padding-inline:12px;font-size:.82rem}.form-actions .mdc-button.size-medium{min-height:44px;padding-inline:18px}.form-actions .mdc-button.size-large{min-height:50px;padding-inline:24px;font-size:.98rem}.form-actions .mat-mdc-raised-button,.form-actions .mat-mdc-unelevated-button{box-shadow:none}.form-actions .mat-mdc-raised-button:not([disabled]),.form-actions .mat-mdc-unelevated-button:not([disabled]){--mat-button-protected-container-color: var(--md-sys-color-primary);--mat-button-protected-label-text-color: var(--md-sys-color-on-primary);--mat-button-filled-container-color: var(--md-sys-color-primary);--mat-button-filled-label-text-color: var(--md-sys-color-on-primary);--mdc-protected-button-container-color: var(--md-sys-color-primary);--mdc-protected-button-label-text-color: var(--md-sys-color-on-primary);--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary)}.form-actions .mat-mdc-raised-button[disabled],.form-actions .mat-mdc-unelevated-button[disabled]{opacity:.55}.form-actions .mat-mdc-outlined-button,.form-actions .mat-mdc-button-base.mat-mdc-outlined-button{background:transparent}.form-actions.editorial-visual-context .mat-mdc-raised-button,.form-actions.editorial-visual-context .mat-mdc-unelevated-button{--mat-button-protected-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mat-button-protected-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mat-button-filled-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mat-button-filled-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mdc-protected-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-protected-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mdc-filled-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-filled-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));box-shadow:var(--editorial-floating-shadow, var(--editorial-card-shadow, none))}.form-actions.editorial-visual-context .mat-mdc-outlined-button{--mdc-outlined-button-outline-color: var(--editorial-border-color, var(--md-sys-color-outline-variant));--mdc-outlined-button-label-text-color: var( --editorial-cta-secondary-text, var(--editorial-text-primary, var(--md-sys-color-on-surface)) );background:color-mix(in srgb,var(--editorial-cta-secondary, var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low))) 72%,transparent)}.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-primary,.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-accent{--mdc-outlined-button-label-text-color: var(--editorial-cta-primary, var(--md-sys-color-primary));background:transparent}.form-actions button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.form-actions button .mat-icon+span{margin-left:8px}@media(max-width:768px){.form-actions{padding:.9rem;border-radius:16px}:host([data-actions-placement=afterSections]) .form-actions{border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px)}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"] }]
|
|
2113
2115
|
}], ctorParameters: () => [{ type: i1$1.KeyboardShortcutService }], propDecorators: { actions: [{
|
|
2114
2116
|
type: Input
|
|
2115
2117
|
}], editorialVisualContext: [{
|
|
@@ -12306,6 +12308,7 @@ class PraxisDynamicForm {
|
|
|
12306
12308
|
createSchemaMaterializedConfig(hostConfig, fieldMetadata) {
|
|
12307
12309
|
const materialized = materializeFormLayoutFromMetadata(fieldMetadata, {
|
|
12308
12310
|
policy: this.layoutPolicy,
|
|
12311
|
+
defaultSectionTitle: this.i18n.t('layout.defaultSectionTitle', undefined, 'Informações', PRAXIS_DYNAMIC_FORM_I18N_NAMESPACE),
|
|
12309
12312
|
});
|
|
12310
12313
|
const materializedFields = (materialized.fieldMetadata || []).map((field) => this.materializeFieldHelpPolicy(field, hostConfig.helpPresentation));
|
|
12311
12314
|
return normalizeFormConfig$1({
|
|
@@ -12393,6 +12396,23 @@ class PraxisDynamicForm {
|
|
|
12393
12396
|
}
|
|
12394
12397
|
loadEntity() {
|
|
12395
12398
|
this.debugLog('[PDF] loadEntity:start', { id: this.pendingEntityId });
|
|
12399
|
+
// CREATE may still carry a resourceId when the form materializes an
|
|
12400
|
+
// item-scoped command (approve, deactivate, reactivate, etc.). In that
|
|
12401
|
+
// case the id belongs to the command context and must not trigger an
|
|
12402
|
+
// entity read/hydration cycle. Command defaults are supplied explicitly
|
|
12403
|
+
// through initialValue.
|
|
12404
|
+
if (this.mode === 'create') {
|
|
12405
|
+
this.entityHydrationPending = false;
|
|
12406
|
+
const normalized = this.getNormalizedInitialValue();
|
|
12407
|
+
if (normalized && Object.keys(this.form.controls || {}).length) {
|
|
12408
|
+
this.form.patchValue(normalized, { emitEvent: false });
|
|
12409
|
+
}
|
|
12410
|
+
this.flushEntityHydrationState();
|
|
12411
|
+
this.debugLog('[PDF] loadEntity:skipped-create-mode', {
|
|
12412
|
+
id: this.pendingEntityId,
|
|
12413
|
+
});
|
|
12414
|
+
return;
|
|
12415
|
+
}
|
|
12396
12416
|
if (this.pendingEntityId == null) {
|
|
12397
12417
|
this.entityHydrationPending = false;
|
|
12398
12418
|
return;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisui/dynamic-form",
|
|
3
|
-
"version": "9.0.4-rc.
|
|
3
|
+
"version": "9.0.4-rc.18",
|
|
4
4
|
"description": "Angular dynamic form engine for Praxis UI: metadata-driven forms, hooks, and services integrating @praxisui/* packages.",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/common": "^21.0.0",
|
|
@@ -9,13 +9,13 @@
|
|
|
9
9
|
"@angular/forms": "^21.0.0",
|
|
10
10
|
"@angular/material": "^21.0.0",
|
|
11
11
|
"@angular/router": "^21.0.0",
|
|
12
|
-
"@praxisui/ai": "^9.0.4-rc.
|
|
13
|
-
"@praxisui/dynamic-fields": "^9.0.4-rc.
|
|
14
|
-
"@praxisui/metadata-editor": "^9.0.4-rc.
|
|
15
|
-
"@praxisui/rich-content": "^9.0.4-rc.
|
|
16
|
-
"@praxisui/settings-panel": "^9.0.4-rc.
|
|
17
|
-
"@praxisui/visual-builder": "^9.0.4-rc.
|
|
18
|
-
"@praxisui/core": "^9.0.4-rc.
|
|
12
|
+
"@praxisui/ai": "^9.0.4-rc.18",
|
|
13
|
+
"@praxisui/dynamic-fields": "^9.0.4-rc.18",
|
|
14
|
+
"@praxisui/metadata-editor": "^9.0.4-rc.18",
|
|
15
|
+
"@praxisui/rich-content": "^9.0.4-rc.18",
|
|
16
|
+
"@praxisui/settings-panel": "^9.0.4-rc.18",
|
|
17
|
+
"@praxisui/visual-builder": "^9.0.4-rc.18",
|
|
18
|
+
"@praxisui/core": "^9.0.4-rc.18",
|
|
19
19
|
"rxjs": "^7.8.0"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
@@ -232,14 +232,16 @@ O host deve persistir `formSubmit.formData` para fluxos normais. `formSubmit.raw
|
|
|
232
232
|
### Input bindings
|
|
233
233
|
|
|
234
234
|
`initialValue` is an active component input for host-authored or complementary
|
|
235
|
-
field values.
|
|
236
|
-
|
|
235
|
+
field values. In `edit/view`, the runtime applies it without redefining the
|
|
236
|
+
canonical remote entity loaded through `resourcePath` and `resourceId`. In
|
|
237
|
+
`create`, including item-scoped command forms, it is the only supported source
|
|
238
|
+
of initial values: a contextual `resourceId` never triggers entity hydration.
|
|
237
239
|
|
|
238
240
|
| Binding/Path | Type | Required | Source | Runtime normalization | Notes |
|
|
239
241
|
| --- | --- | --- | --- | --- | --- |
|
|
240
242
|
| `config` | `FormConfig` | Conditional | component-input | `normalizeFormConfig(config)` | Contrato principal quando fornecido diretamente pelo host. |
|
|
241
243
|
| `resourcePath` | `string \| undefined` | Conditional | component-input | `crud.configure(resourcePath)` | Endpoint base para schema e dados remotos. Alternativa canônica: `schemaUrl` explícito. |
|
|
242
|
-
| `resourceId` | `string \| number \| undefined` | No | component-input | update `pendingEntityId
|
|
244
|
+
| `resourceId` | `string \| number \| undefined` | No | component-input | update `pendingEntityId`; hydrate only in `edit/view` | Carrega entidade em modo `edit/view`. Em `create`, pode identificar o item dono de um comando sem iniciar leitura nem bloquear os campos. |
|
|
243
245
|
| `mode` | `'create' \| 'edit' \| 'view'` | No | component-input/storage | persistido em `formInputsKey` | Preferência de modo pode ser hidratada do storage. |
|
|
244
246
|
| `schemaSource` | `'resource' \| 'filter'` | No | component-input | runtime branch | Seleciona caminho de obtenção de schema quando `schemaUrl` não é informado. |
|
|
245
247
|
| `schemaUrl` | `string \| null \| undefined` | Conditional | component-input | parsed as `/schemas/filtered` contract | Fonte canônica explícita para inicialização schema-backed sem depender de `resourcePath`. |
|
|
@@ -569,7 +571,7 @@ No ecossistema Praxis, ele funciona tanto como runtime final quanto como superfi
|
|
|
569
571
|
| --- | --- | --- | --- | --- |
|
|
570
572
|
| `config` | `FormConfig` | `{ sections: [] }` | Active | Contrato principal consumido no ciclo inteiro. `sections` é opcional somente para forms schema-driven com grounding explícito (`metadata.source='schema'`, schema metadata ou fonte runtime como `schemaUrl`/`resourcePath`); ausência de layout manual é normalizada internamente como array vazio e permite que `layoutPolicy`/schema materializem agrupamentos. |
|
|
571
573
|
| `resourcePath` | `string \| undefined` | `undefined` | Active | Habilita carga de schema/dados remotos. Opcional quando `schemaUrl` explícito é fornecido. |
|
|
572
|
-
| `resourceId` | `string \| number \| undefined` | `undefined` | Active | Carrega entidade no modo `edit/view
|
|
574
|
+
| `resourceId` | `string \| number \| undefined` | `undefined` | Active | Carrega entidade no modo `edit/view`; em `create`, funciona apenas como contexto do item e não dispara hidratação. |
|
|
573
575
|
| `mode` | `'create' \| 'edit' \| 'view'` | `'create'` | Active | Governa submit, leitura e apresentacao. |
|
|
574
576
|
| `schemaSource` | `'resource' \| 'filter'` | `'resource'` | Active | Seleciona origem do schema remoto. |
|
|
575
577
|
| `schemaUrl` | `string \| undefined` | `undefined` | Active | Permite usar schema canonico publicado pelo backend sem heuristica local de path e pode iniciar o fluxo corporativo sem `resourcePath`. |
|
|
@@ -704,7 +706,7 @@ Validado em 2026-04-23 contra `praxis-api-quickstart` publicado no Render com
|
|
|
704
706
|
|
|
705
707
|
#### Data mode e fluxo
|
|
706
708
|
|
|
707
|
-
- `mode='create'`: cria registro
|
|
709
|
+
- `mode='create'`: cria registro ou materializa um comando; nunca carrega a entidade por `resourceId`, e valores iniciais devem vir de `initialValue`.
|
|
708
710
|
- `mode='edit'`: carrega entidade por `resourceId` quando disponivel.
|
|
709
711
|
- `mode='view'`: foco em leitura/apresentacao; actions de edicao podem ser suprimidas.
|
|
710
712
|
|