@praxisui/stepper 10.0.0-rc.4 → 10.0.0-rc.40
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/ai/component-registry.json +2 -2
- package/fesm2022/praxisui-stepper.mjs +135 -123
- package/package.json +9 -9
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
|
-
"generatedAt": "2026-10-
|
|
3
|
+
"generatedAt": "2026-10-26T18:09:20.136Z",
|
|
4
4
|
"packageName": "@praxisui/stepper",
|
|
5
|
-
"packageVersion": "10.0.0-rc.
|
|
5
|
+
"packageVersion": "10.0.0-rc.40",
|
|
6
6
|
"sourceRegistry": "praxis-component-registry-ingestion",
|
|
7
7
|
"sourceRegistryVersion": "1.0.0",
|
|
8
8
|
"componentCount": 1,
|
|
@@ -22,15 +22,17 @@ import * as i3$1 from '@angular/material/form-field';
|
|
|
22
22
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
23
23
|
import * as i4$1 from '@angular/material/input';
|
|
24
24
|
import { MatInputModule } from '@angular/material/input';
|
|
25
|
-
import * as
|
|
25
|
+
import * as i4$2 from '@angular/material/select';
|
|
26
|
+
import { MatSelectModule } from '@angular/material/select';
|
|
27
|
+
import * as i7 from '@angular/material/slide-toggle';
|
|
26
28
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
27
|
-
import * as
|
|
29
|
+
import * as i8 from '@angular/cdk/drag-drop';
|
|
28
30
|
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
29
|
-
import * as
|
|
31
|
+
import * as i9 from '@angular/material/tooltip';
|
|
30
32
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
31
33
|
import * as i1$1 from '@angular/material/dialog';
|
|
32
34
|
import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
|
|
33
|
-
import * as
|
|
35
|
+
import * as i10 from '@angular/material/tabs';
|
|
34
36
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
35
37
|
import { PRAXIS_LIST_COMPONENT_METADATA } from '@praxisui/list';
|
|
36
38
|
import { PraxisFilesUploadConfigEditor } from '@praxisui/files-upload';
|
|
@@ -1617,11 +1619,15 @@ class PraxisStepper {
|
|
|
1617
1619
|
icon="dashboard_customize"
|
|
1618
1620
|
title="Sem conteúdo nesta etapa"
|
|
1619
1621
|
description="Adicione um formulário ou widgets a esta etapa, ou abra o editor para configurar."
|
|
1620
|
-
[primaryAction]="
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1622
|
+
[primaryAction]="
|
|
1623
|
+
enableCustomization
|
|
1624
|
+
? {
|
|
1625
|
+
label: 'Abrir editor',
|
|
1626
|
+
icon: 'tune',
|
|
1627
|
+
action: openEditor.bind(this),
|
|
1628
|
+
}
|
|
1629
|
+
: undefined
|
|
1630
|
+
"
|
|
1625
1631
|
></praxis-empty-state-card>
|
|
1626
1632
|
}
|
|
1627
1633
|
</div>
|
|
@@ -1754,8 +1760,8 @@ class PraxisStepper {
|
|
|
1754
1760
|
[inline]="true"
|
|
1755
1761
|
title="Stepper sem etapas"
|
|
1756
1762
|
description="Adicione etapas para começar. Você pode configurar formulários ou widgets em cada etapa."
|
|
1757
|
-
[primaryAction]="primaryCta"
|
|
1758
|
-
[secondaryActions]="secondaryCtas"
|
|
1763
|
+
[primaryAction]="enableCustomization ? primaryCta : undefined"
|
|
1764
|
+
[secondaryActions]="enableCustomization ? secondaryCtas : []"
|
|
1759
1765
|
></praxis-empty-state-card>
|
|
1760
1766
|
}
|
|
1761
1767
|
@if (enableCustomization) {
|
|
@@ -1768,7 +1774,7 @@ class PraxisStepper {
|
|
|
1768
1774
|
<mat-icon fontIcon="edit"></mat-icon>
|
|
1769
1775
|
</button>
|
|
1770
1776
|
}
|
|
1771
|
-
`, isInline: true, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface);opacity:1}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-active{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-optional{color:var(--md-sys-color-on-surface);opacity:1}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent;--mat-stepper-header-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-on-surface) 8%, transparent );--mat-stepper-header-focus-state-layer-color: transparent;--mat-stepper-header-hover-state-layer-shape: 14px;--mat-stepper-header-focus-state-layer-shape: 14px}::ng-deep .pdx-stepper-ft-light .mat-step-header{margin:0}::ng-deep .pdx-stepper-ft-light .mat-step-header .mat-step-header-ripple{display:none}::ng-deep .ft-stepper{background:transparent}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.stepper-ai-assistant-trigger{box-shadow:var( --md-sys-elevation-level2, 0 4px 12px rgba(0, 0, 0, .18) )}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { 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.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", 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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "initialValue", "emptyState", "editorialContext", "mode", "config", "actions", "schemaSource", "schemaUrl", "readUrl", "submitUrl", "submitMethod", "submitIdempotencyKey", "submitCorrelationId", "submitResourceVersion", "submitResourceVersionTargetResourceKey", "submitResourceVersionTargetIdField", "responseSchemaUrl", "apiEndpointKey", "apiUrlEntry", "enableCustomization", "showAiAssistant", "formId", "componentInstanceId", "configPersistenceStrategy", "layout", "generatedLayoutPreset", "layoutPolicy", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "presentation", "visibleGlobal", "fieldIconPolicy", "domainRules", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "configPatchChange", "formReady", "valueChange", "payloadPreviewChange", "syncCompleted", "initializationError", "loadingStateChange", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError", "ruleDiagnosticsChange", "reactiveDeterminationExecuted", "reactiveDeterminationPendingChange"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone", "variant", "alignment", "density", "iconContainer"] }, { kind: "component", type: PraxisAiAssistantShellComponent, selector: "praxis-ai-assistant-shell", inputs: ["labels", "mode", "state", "contextItems", "attachments", "messages", "quickReplies", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "layout", "rootClassName"], outputs: ["nodeAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1777
|
+
`, isInline: true, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface);opacity:1}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-active{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-optional{color:var(--md-sys-color-on-surface);opacity:1}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent;--mat-stepper-header-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-on-surface) 8%, transparent );--mat-stepper-header-focus-state-layer-color: transparent;--mat-stepper-header-hover-state-layer-shape: 14px;--mat-stepper-header-focus-state-layer-shape: 14px}::ng-deep .pdx-stepper-ft-light .mat-step-header{margin:0}::ng-deep .pdx-stepper-ft-light .mat-step-header .mat-step-header-ripple{display:none}::ng-deep .ft-stepper{background:transparent}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.stepper-ai-assistant-trigger{box-shadow:var( --md-sys-elevation-level2, 0 4px 12px rgba(0, 0, 0, .18) )}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { 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.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", 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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "initialValue", "emptyState", "editorialContext", "mode", "config", "actions", "schemaSource", "actionId", "operationId", "schemaUrl", "readUrl", "submitUrl", "submitMethod", "submitIdempotencyKey", "submitCorrelationId", "submitResourceVersion", "submitResourceVersionTargetResourceKey", "submitResourceVersionTargetIdField", "responseSchemaUrl", "apiEndpointKey", "apiUrlEntry", "enableCustomization", "showAiAssistant", "formId", "componentInstanceId", "configPersistenceStrategy", "layout", "layoutMode", "formLayout", "generatedLayoutPreset", "layoutPolicy", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "presentation", "presentationPreset", "sectionDefaultAppearance", "sectionDivider", "visibleGlobal", "fieldIconPolicy", "domainRules", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "configPatchChange", "formReady", "valueChange", "payloadPreviewChange", "syncCompleted", "initializationError", "loadingStateChange", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError", "ruleDiagnosticsChange", "reactiveDeterminationExecuted", "reactiveDeterminationPendingChange", "tabChange", "tabSelected"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone", "variant", "alignment", "density", "iconContainer"] }, { kind: "component", type: PraxisAiAssistantShellComponent, selector: "praxis-ai-assistant-shell", inputs: ["labels", "mode", "state", "contextItems", "attachments", "messages", "quickReplies", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "layout", "rootClassName"], outputs: ["nodeAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1772
1778
|
}
|
|
1773
1779
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisStepper, decorators: [{
|
|
1774
1780
|
type: Component,
|
|
@@ -1939,11 +1945,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1939
1945
|
icon="dashboard_customize"
|
|
1940
1946
|
title="Sem conteúdo nesta etapa"
|
|
1941
1947
|
description="Adicione um formulário ou widgets a esta etapa, ou abra o editor para configurar."
|
|
1942
|
-
[primaryAction]="
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1948
|
+
[primaryAction]="
|
|
1949
|
+
enableCustomization
|
|
1950
|
+
? {
|
|
1951
|
+
label: 'Abrir editor',
|
|
1952
|
+
icon: 'tune',
|
|
1953
|
+
action: openEditor.bind(this),
|
|
1954
|
+
}
|
|
1955
|
+
: undefined
|
|
1956
|
+
"
|
|
1947
1957
|
></praxis-empty-state-card>
|
|
1948
1958
|
}
|
|
1949
1959
|
</div>
|
|
@@ -2076,8 +2086,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
2076
2086
|
[inline]="true"
|
|
2077
2087
|
title="Stepper sem etapas"
|
|
2078
2088
|
description="Adicione etapas para começar. Você pode configurar formulários ou widgets em cada etapa."
|
|
2079
|
-
[primaryAction]="primaryCta"
|
|
2080
|
-
[secondaryActions]="secondaryCtas"
|
|
2089
|
+
[primaryAction]="enableCustomization ? primaryCta : undefined"
|
|
2090
|
+
[secondaryActions]="enableCustomization ? secondaryCtas : []"
|
|
2081
2091
|
></praxis-empty-state-card>
|
|
2082
2092
|
}
|
|
2083
2093
|
@if (enableCustomization) {
|
|
@@ -3542,14 +3552,15 @@ class PraxisStepperConfigEditor {
|
|
|
3542
3552
|
this.onAppearanceChange();
|
|
3543
3553
|
}
|
|
3544
3554
|
get headerLabelTextWeight() {
|
|
3545
|
-
|
|
3555
|
+
const raw = this.appearance.tokens['header-label-text-weight'];
|
|
3556
|
+
return raw != null && String(raw).trim() !== '' ? String(raw).trim() : undefined;
|
|
3546
3557
|
}
|
|
3547
3558
|
setHeaderLabelTextWeight(v) {
|
|
3548
3559
|
if (!v) {
|
|
3549
3560
|
delete this.appearance.tokens['header-label-text-weight'];
|
|
3550
3561
|
}
|
|
3551
3562
|
else {
|
|
3552
|
-
this.appearance.tokens['header-label-text-weight'] = v;
|
|
3563
|
+
this.appearance.tokens['header-label-text-weight'] = String(v);
|
|
3553
3564
|
}
|
|
3554
3565
|
this.onAppearanceChange();
|
|
3555
3566
|
}
|
|
@@ -4057,32 +4068,32 @@ class PraxisStepperConfigEditor {
|
|
|
4057
4068
|
<div class="pdx-grid">
|
|
4058
4069
|
<mat-form-field appearance="outline">
|
|
4059
4070
|
<mat-label>{{ tx('editor.general.orientation', 'Orientation') }}</mat-label>
|
|
4060
|
-
<select
|
|
4061
|
-
<option value="horizontal">{{ tx('editor.general.orientation.horizontal', 'Horizontal') }}</option>
|
|
4062
|
-
<option value="vertical">{{ tx('editor.general.orientation.vertical', 'Vertical') }}</option>
|
|
4063
|
-
</select>
|
|
4071
|
+
<mat-select [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
|
|
4072
|
+
<mat-option value="horizontal">{{ tx('editor.general.orientation.horizontal', 'Horizontal') }}</mat-option>
|
|
4073
|
+
<mat-option value="vertical">{{ tx('editor.general.orientation.vertical', 'Vertical') }}</mat-option>
|
|
4074
|
+
</mat-select>
|
|
4064
4075
|
</mat-form-field>
|
|
4065
4076
|
<mat-form-field appearance="outline">
|
|
4066
4077
|
<mat-label>{{ tx('editor.general.headerPosition', 'Title position') }}</mat-label>
|
|
4067
|
-
<select
|
|
4068
|
-
<option value="top">{{ tx('editor.general.headerPosition.top', 'Above') }}</option>
|
|
4069
|
-
<option value="bottom">{{ tx('editor.general.headerPosition.bottom', 'Below') }}</option>
|
|
4070
|
-
</select>
|
|
4078
|
+
<mat-select [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
|
|
4079
|
+
<mat-option value="top">{{ tx('editor.general.headerPosition.top', 'Above') }}</mat-option>
|
|
4080
|
+
<mat-option value="bottom">{{ tx('editor.general.headerPosition.bottom', 'Below') }}</mat-option>
|
|
4081
|
+
</mat-select>
|
|
4071
4082
|
</mat-form-field>
|
|
4072
4083
|
<mat-form-field appearance="outline">
|
|
4073
4084
|
<mat-label>{{ tx('editor.general.labelPosition', 'Label position') }}</mat-label>
|
|
4074
|
-
<select
|
|
4075
|
-
<option value="end">{{ tx('editor.general.labelPosition.end', 'Beside') }}</option>
|
|
4076
|
-
<option value="bottom">{{ tx('editor.general.labelPosition.bottom', 'Below') }}</option>
|
|
4077
|
-
</select>
|
|
4085
|
+
<mat-select [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
|
|
4086
|
+
<mat-option value="end">{{ tx('editor.general.labelPosition.end', 'Beside') }}</mat-option>
|
|
4087
|
+
<mat-option value="bottom">{{ tx('editor.general.labelPosition.bottom', 'Below') }}</mat-option>
|
|
4088
|
+
</mat-select>
|
|
4078
4089
|
</mat-form-field>
|
|
4079
4090
|
<mat-form-field appearance="outline">
|
|
4080
4091
|
<mat-label>{{ tx('editor.general.density', 'Density') }}</mat-label>
|
|
4081
|
-
<select
|
|
4082
|
-
<option [
|
|
4083
|
-
<option value="comfortable">{{ tx('editor.general.density.comfortable', 'Comfortable') }}</option>
|
|
4084
|
-
<option value="compact">{{ tx('editor.general.density.compact', 'Compact') }}</option>
|
|
4085
|
-
</select>
|
|
4092
|
+
<mat-select [(ngModel)]="config.density" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.density.default', 'Default')">
|
|
4093
|
+
<mat-option [value]="undefined">{{ tx('editor.general.density.default', 'Default') }}</mat-option>
|
|
4094
|
+
<mat-option value="comfortable">{{ tx('editor.general.density.comfortable', 'Comfortable') }}</mat-option>
|
|
4095
|
+
<mat-option value="compact">{{ tx('editor.general.density.compact', 'Compact') }}</mat-option>
|
|
4096
|
+
</mat-select>
|
|
4086
4097
|
</mat-form-field>
|
|
4087
4098
|
<mat-form-field appearance="outline">
|
|
4088
4099
|
<mat-label>{{ tx('editor.general.animationDuration', 'Animation duration') }}</mat-label>
|
|
@@ -4476,32 +4487,32 @@ class PraxisStepperConfigEditor {
|
|
|
4476
4487
|
<div class="pdx-grid">
|
|
4477
4488
|
<mat-form-field appearance="outline">
|
|
4478
4489
|
<mat-label>{{ tx('editor.navigation.variant', 'Button style') }}</mat-label>
|
|
4479
|
-
<select
|
|
4480
|
-
<option [
|
|
4481
|
-
<option value="basic">{{ tx('editor.navigation.variant.basic', 'Text') }}</option>
|
|
4482
|
-
<option value="flat">{{ tx('editor.navigation.variant.flat', 'Flat') }}</option>
|
|
4483
|
-
<option value="stroked">{{ tx('editor.navigation.variant.stroked', 'Stroked') }}</option>
|
|
4484
|
-
<option value="raised">{{ tx('editor.navigation.variant.raised', 'Raised') }}</option>
|
|
4485
|
-
</select>
|
|
4490
|
+
<mat-select [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.variant.default', 'Default (raised)')">
|
|
4491
|
+
<mat-option [value]="undefined">{{ tx('editor.navigation.variant.default', 'Default (raised)') }}</mat-option>
|
|
4492
|
+
<mat-option value="basic">{{ tx('editor.navigation.variant.basic', 'Text') }}</mat-option>
|
|
4493
|
+
<mat-option value="flat">{{ tx('editor.navigation.variant.flat', 'Flat') }}</mat-option>
|
|
4494
|
+
<mat-option value="stroked">{{ tx('editor.navigation.variant.stroked', 'Stroked') }}</mat-option>
|
|
4495
|
+
<mat-option value="raised">{{ tx('editor.navigation.variant.raised', 'Raised') }}</mat-option>
|
|
4496
|
+
</mat-select>
|
|
4486
4497
|
</mat-form-field>
|
|
4487
4498
|
<mat-form-field appearance="outline">
|
|
4488
4499
|
<mat-label>{{ tx('editor.navigation.color', 'Color') }}</mat-label>
|
|
4489
|
-
<select
|
|
4490
|
-
<option [
|
|
4491
|
-
<option value="primary">{{ tx('editor.navigation.color.primary', 'Primary') }}</option>
|
|
4492
|
-
<option value="accent">{{ tx('editor.navigation.color.accent', 'Accent') }}</option>
|
|
4493
|
-
<option value="warn">{{ tx('editor.navigation.color.warn', 'Warn') }}</option>
|
|
4494
|
-
</select>
|
|
4500
|
+
<mat-select [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.color.default', 'Default')">
|
|
4501
|
+
<mat-option [value]="undefined">{{ tx('editor.navigation.color.default', 'Default') }}</mat-option>
|
|
4502
|
+
<mat-option value="primary">{{ tx('editor.navigation.color.primary', 'Primary') }}</mat-option>
|
|
4503
|
+
<mat-option value="accent">{{ tx('editor.navigation.color.accent', 'Accent') }}</mat-option>
|
|
4504
|
+
<mat-option value="warn">{{ tx('editor.navigation.color.warn', 'Warn') }}</mat-option>
|
|
4505
|
+
</mat-select>
|
|
4495
4506
|
</mat-form-field>
|
|
4496
4507
|
<mat-form-field appearance="outline">
|
|
4497
4508
|
<mat-label>{{ tx('editor.navigation.align', 'Alignment') }}</mat-label>
|
|
4498
|
-
<select
|
|
4499
|
-
<option [
|
|
4500
|
-
<option value="start">{{ tx('editor.navigation.align.start', 'Left') }}</option>
|
|
4501
|
-
<option value="center">{{ tx('editor.navigation.align.center', 'Center') }}</option>
|
|
4502
|
-
<option value="space-between">{{ tx('editor.navigation.align.spaceBetween', 'Spaced') }}</option>
|
|
4503
|
-
<option value="end">{{ tx('editor.navigation.align.end', 'Right') }}</option>
|
|
4504
|
-
</select>
|
|
4509
|
+
<mat-select [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.align.default', 'Right')">
|
|
4510
|
+
<mat-option [value]="undefined">{{ tx('editor.navigation.align.default', 'Right') }}</mat-option>
|
|
4511
|
+
<mat-option value="start">{{ tx('editor.navigation.align.start', 'Left') }}</mat-option>
|
|
4512
|
+
<mat-option value="center">{{ tx('editor.navigation.align.center', 'Center') }}</mat-option>
|
|
4513
|
+
<mat-option value="space-between">{{ tx('editor.navigation.align.spaceBetween', 'Spaced') }}</mat-option>
|
|
4514
|
+
<mat-option value="end">{{ tx('editor.navigation.align.end', 'Right') }}</mat-option>
|
|
4515
|
+
</mat-select>
|
|
4505
4516
|
</mat-form-field>
|
|
4506
4517
|
</div>
|
|
4507
4518
|
</div>
|
|
@@ -4573,13 +4584,13 @@ class PraxisStepperConfigEditor {
|
|
|
4573
4584
|
</mat-form-field>
|
|
4574
4585
|
<mat-form-field appearance="outline">
|
|
4575
4586
|
<mat-label>{{ tx('editor.appearance.textWeight', 'Text weight') }}</mat-label>
|
|
4576
|
-
<select
|
|
4577
|
-
<option [
|
|
4578
|
-
<option value="400">{{ tx('editor.appearance.textWeight.400', 'Normal') }}</option>
|
|
4579
|
-
<option value="500">{{ tx('editor.appearance.textWeight.500', 'Medium') }}</option>
|
|
4580
|
-
<option value="600">{{ tx('editor.appearance.textWeight.600', 'Semibold') }}</option>
|
|
4581
|
-
<option value="700">{{ tx('editor.appearance.textWeight.700', 'Bold') }}</option>
|
|
4582
|
-
</select>
|
|
4587
|
+
<mat-select [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)" [placeholder]="tx('editor.appearance.textWeight.default', 'Default')">
|
|
4588
|
+
<mat-option [value]="undefined">{{ tx('editor.appearance.textWeight.default', 'Default') }}</mat-option>
|
|
4589
|
+
<mat-option value="400">{{ tx('editor.appearance.textWeight.400', 'Normal') }}</mat-option>
|
|
4590
|
+
<mat-option value="500">{{ tx('editor.appearance.textWeight.500', 'Medium') }}</mat-option>
|
|
4591
|
+
<mat-option value="600">{{ tx('editor.appearance.textWeight.600', 'Semibold') }}</mat-option>
|
|
4592
|
+
<mat-option value="700">{{ tx('editor.appearance.textWeight.700', 'Bold') }}</mat-option>
|
|
4593
|
+
</mat-select>
|
|
4583
4594
|
</mat-form-field>
|
|
4584
4595
|
<mat-form-field appearance="outline" class="field-span-2">
|
|
4585
4596
|
<mat-label>{{ tx('editor.appearance.themeClass', 'Theme class') }}</mat-label>
|
|
@@ -4587,12 +4598,12 @@ class PraxisStepperConfigEditor {
|
|
|
4587
4598
|
</mat-form-field>
|
|
4588
4599
|
<mat-form-field appearance="outline">
|
|
4589
4600
|
<mat-label>{{ tx('editor.appearance.iconSet', 'Icon set') }}</mat-label>
|
|
4590
|
-
<select
|
|
4591
|
-
<option [
|
|
4592
|
-
<option value="material-symbols-outlined">Material Symbols (Outlined)</option>
|
|
4593
|
-
<option value="material-symbols-rounded">Material Symbols (Rounded)</option>
|
|
4594
|
-
<option value="material-symbols-sharp">Material Symbols (Sharp)</option>
|
|
4595
|
-
</select>
|
|
4601
|
+
<mat-select [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()" [placeholder]="tx('editor.appearance.iconSet.default', 'Material Icons (default)')">
|
|
4602
|
+
<mat-option [value]="undefined">{{ tx('editor.appearance.iconSet.default', 'Material Icons (default)') }}</mat-option>
|
|
4603
|
+
<mat-option value="material-symbols-outlined">Material Symbols (Outlined)</mat-option>
|
|
4604
|
+
<mat-option value="material-symbols-rounded">Material Symbols (Rounded)</mat-option>
|
|
4605
|
+
<mat-option value="material-symbols-sharp">Material Symbols (Sharp)</mat-option>
|
|
4606
|
+
</mat-select>
|
|
4596
4607
|
</mat-form-field>
|
|
4597
4608
|
</div>
|
|
4598
4609
|
<div class="inline-actions-grid icon-picker-grid">
|
|
@@ -4678,7 +4689,7 @@ class PraxisStepperConfigEditor {
|
|
|
4678
4689
|
</mat-tab>
|
|
4679
4690
|
</mat-tab-group>
|
|
4680
4691
|
</div>
|
|
4681
|
-
`, isInline: true, styles: [".pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:16px;display:grid;gap:16px;background:var(--md-sys-color-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.widget-item .info .meta{margin-top:2px;font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-column{display:grid;gap:10px;min-width:0}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.editor-icon-action{color:var(--md-sys-color-on-surface-variant)}.editor-icon-action--danger{color:var(--md-sys-color-error)}.mat-mdc-form-field-icon-suffix{align-self:center}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { 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: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] });
|
|
4692
|
+
`, isInline: true, styles: [":host{display:block;container-type:inline-size;color:var(--pfx-settings-panel-text-primary, var(--md-sys-color-on-surface))}.pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:16px;display:grid;gap:16px;background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface));border:1px solid color-mix(in srgb,var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant)) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.widget-item .info .meta{margin-top:2px;font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-column{display:grid;gap:10px;min-width:0}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.editor-icon-action{color:var(--md-sys-color-on-surface-variant)}.editor-icon-action--danger{color:var(--md-sys-color-error)}.mat-mdc-form-field-icon-suffix{align-self:center}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@container (max-width: 900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@container (max-width: 640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { 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: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i10.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] });
|
|
4682
4693
|
}
|
|
4683
4694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisStepperConfigEditor, decorators: [{
|
|
4684
4695
|
type: Component,
|
|
@@ -4686,6 +4697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
4686
4697
|
FormsModule,
|
|
4687
4698
|
MatFormFieldModule,
|
|
4688
4699
|
MatInputModule,
|
|
4700
|
+
MatSelectModule,
|
|
4689
4701
|
MatIconModule,
|
|
4690
4702
|
PraxisIconButtonComponent,
|
|
4691
4703
|
PraxisIconDirective,
|
|
@@ -4715,32 +4727,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
4715
4727
|
<div class="pdx-grid">
|
|
4716
4728
|
<mat-form-field appearance="outline">
|
|
4717
4729
|
<mat-label>{{ tx('editor.general.orientation', 'Orientation') }}</mat-label>
|
|
4718
|
-
<select
|
|
4719
|
-
<option value="horizontal">{{ tx('editor.general.orientation.horizontal', 'Horizontal') }}</option>
|
|
4720
|
-
<option value="vertical">{{ tx('editor.general.orientation.vertical', 'Vertical') }}</option>
|
|
4721
|
-
</select>
|
|
4730
|
+
<mat-select [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
|
|
4731
|
+
<mat-option value="horizontal">{{ tx('editor.general.orientation.horizontal', 'Horizontal') }}</mat-option>
|
|
4732
|
+
<mat-option value="vertical">{{ tx('editor.general.orientation.vertical', 'Vertical') }}</mat-option>
|
|
4733
|
+
</mat-select>
|
|
4722
4734
|
</mat-form-field>
|
|
4723
4735
|
<mat-form-field appearance="outline">
|
|
4724
4736
|
<mat-label>{{ tx('editor.general.headerPosition', 'Title position') }}</mat-label>
|
|
4725
|
-
<select
|
|
4726
|
-
<option value="top">{{ tx('editor.general.headerPosition.top', 'Above') }}</option>
|
|
4727
|
-
<option value="bottom">{{ tx('editor.general.headerPosition.bottom', 'Below') }}</option>
|
|
4728
|
-
</select>
|
|
4737
|
+
<mat-select [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
|
|
4738
|
+
<mat-option value="top">{{ tx('editor.general.headerPosition.top', 'Above') }}</mat-option>
|
|
4739
|
+
<mat-option value="bottom">{{ tx('editor.general.headerPosition.bottom', 'Below') }}</mat-option>
|
|
4740
|
+
</mat-select>
|
|
4729
4741
|
</mat-form-field>
|
|
4730
4742
|
<mat-form-field appearance="outline">
|
|
4731
4743
|
<mat-label>{{ tx('editor.general.labelPosition', 'Label position') }}</mat-label>
|
|
4732
|
-
<select
|
|
4733
|
-
<option value="end">{{ tx('editor.general.labelPosition.end', 'Beside') }}</option>
|
|
4734
|
-
<option value="bottom">{{ tx('editor.general.labelPosition.bottom', 'Below') }}</option>
|
|
4735
|
-
</select>
|
|
4744
|
+
<mat-select [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
|
|
4745
|
+
<mat-option value="end">{{ tx('editor.general.labelPosition.end', 'Beside') }}</mat-option>
|
|
4746
|
+
<mat-option value="bottom">{{ tx('editor.general.labelPosition.bottom', 'Below') }}</mat-option>
|
|
4747
|
+
</mat-select>
|
|
4736
4748
|
</mat-form-field>
|
|
4737
4749
|
<mat-form-field appearance="outline">
|
|
4738
4750
|
<mat-label>{{ tx('editor.general.density', 'Density') }}</mat-label>
|
|
4739
|
-
<select
|
|
4740
|
-
<option [
|
|
4741
|
-
<option value="comfortable">{{ tx('editor.general.density.comfortable', 'Comfortable') }}</option>
|
|
4742
|
-
<option value="compact">{{ tx('editor.general.density.compact', 'Compact') }}</option>
|
|
4743
|
-
</select>
|
|
4751
|
+
<mat-select [(ngModel)]="config.density" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.density.default', 'Default')">
|
|
4752
|
+
<mat-option [value]="undefined">{{ tx('editor.general.density.default', 'Default') }}</mat-option>
|
|
4753
|
+
<mat-option value="comfortable">{{ tx('editor.general.density.comfortable', 'Comfortable') }}</mat-option>
|
|
4754
|
+
<mat-option value="compact">{{ tx('editor.general.density.compact', 'Compact') }}</mat-option>
|
|
4755
|
+
</mat-select>
|
|
4744
4756
|
</mat-form-field>
|
|
4745
4757
|
<mat-form-field appearance="outline">
|
|
4746
4758
|
<mat-label>{{ tx('editor.general.animationDuration', 'Animation duration') }}</mat-label>
|
|
@@ -5134,32 +5146,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
5134
5146
|
<div class="pdx-grid">
|
|
5135
5147
|
<mat-form-field appearance="outline">
|
|
5136
5148
|
<mat-label>{{ tx('editor.navigation.variant', 'Button style') }}</mat-label>
|
|
5137
|
-
<select
|
|
5138
|
-
<option [
|
|
5139
|
-
<option value="basic">{{ tx('editor.navigation.variant.basic', 'Text') }}</option>
|
|
5140
|
-
<option value="flat">{{ tx('editor.navigation.variant.flat', 'Flat') }}</option>
|
|
5141
|
-
<option value="stroked">{{ tx('editor.navigation.variant.stroked', 'Stroked') }}</option>
|
|
5142
|
-
<option value="raised">{{ tx('editor.navigation.variant.raised', 'Raised') }}</option>
|
|
5143
|
-
</select>
|
|
5149
|
+
<mat-select [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.variant.default', 'Default (raised)')">
|
|
5150
|
+
<mat-option [value]="undefined">{{ tx('editor.navigation.variant.default', 'Default (raised)') }}</mat-option>
|
|
5151
|
+
<mat-option value="basic">{{ tx('editor.navigation.variant.basic', 'Text') }}</mat-option>
|
|
5152
|
+
<mat-option value="flat">{{ tx('editor.navigation.variant.flat', 'Flat') }}</mat-option>
|
|
5153
|
+
<mat-option value="stroked">{{ tx('editor.navigation.variant.stroked', 'Stroked') }}</mat-option>
|
|
5154
|
+
<mat-option value="raised">{{ tx('editor.navigation.variant.raised', 'Raised') }}</mat-option>
|
|
5155
|
+
</mat-select>
|
|
5144
5156
|
</mat-form-field>
|
|
5145
5157
|
<mat-form-field appearance="outline">
|
|
5146
5158
|
<mat-label>{{ tx('editor.navigation.color', 'Color') }}</mat-label>
|
|
5147
|
-
<select
|
|
5148
|
-
<option [
|
|
5149
|
-
<option value="primary">{{ tx('editor.navigation.color.primary', 'Primary') }}</option>
|
|
5150
|
-
<option value="accent">{{ tx('editor.navigation.color.accent', 'Accent') }}</option>
|
|
5151
|
-
<option value="warn">{{ tx('editor.navigation.color.warn', 'Warn') }}</option>
|
|
5152
|
-
</select>
|
|
5159
|
+
<mat-select [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.color.default', 'Default')">
|
|
5160
|
+
<mat-option [value]="undefined">{{ tx('editor.navigation.color.default', 'Default') }}</mat-option>
|
|
5161
|
+
<mat-option value="primary">{{ tx('editor.navigation.color.primary', 'Primary') }}</mat-option>
|
|
5162
|
+
<mat-option value="accent">{{ tx('editor.navigation.color.accent', 'Accent') }}</mat-option>
|
|
5163
|
+
<mat-option value="warn">{{ tx('editor.navigation.color.warn', 'Warn') }}</mat-option>
|
|
5164
|
+
</mat-select>
|
|
5153
5165
|
</mat-form-field>
|
|
5154
5166
|
<mat-form-field appearance="outline">
|
|
5155
5167
|
<mat-label>{{ tx('editor.navigation.align', 'Alignment') }}</mat-label>
|
|
5156
|
-
<select
|
|
5157
|
-
<option [
|
|
5158
|
-
<option value="start">{{ tx('editor.navigation.align.start', 'Left') }}</option>
|
|
5159
|
-
<option value="center">{{ tx('editor.navigation.align.center', 'Center') }}</option>
|
|
5160
|
-
<option value="space-between">{{ tx('editor.navigation.align.spaceBetween', 'Spaced') }}</option>
|
|
5161
|
-
<option value="end">{{ tx('editor.navigation.align.end', 'Right') }}</option>
|
|
5162
|
-
</select>
|
|
5168
|
+
<mat-select [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.align.default', 'Right')">
|
|
5169
|
+
<mat-option [value]="undefined">{{ tx('editor.navigation.align.default', 'Right') }}</mat-option>
|
|
5170
|
+
<mat-option value="start">{{ tx('editor.navigation.align.start', 'Left') }}</mat-option>
|
|
5171
|
+
<mat-option value="center">{{ tx('editor.navigation.align.center', 'Center') }}</mat-option>
|
|
5172
|
+
<mat-option value="space-between">{{ tx('editor.navigation.align.spaceBetween', 'Spaced') }}</mat-option>
|
|
5173
|
+
<mat-option value="end">{{ tx('editor.navigation.align.end', 'Right') }}</mat-option>
|
|
5174
|
+
</mat-select>
|
|
5163
5175
|
</mat-form-field>
|
|
5164
5176
|
</div>
|
|
5165
5177
|
</div>
|
|
@@ -5231,13 +5243,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
5231
5243
|
</mat-form-field>
|
|
5232
5244
|
<mat-form-field appearance="outline">
|
|
5233
5245
|
<mat-label>{{ tx('editor.appearance.textWeight', 'Text weight') }}</mat-label>
|
|
5234
|
-
<select
|
|
5235
|
-
<option [
|
|
5236
|
-
<option value="400">{{ tx('editor.appearance.textWeight.400', 'Normal') }}</option>
|
|
5237
|
-
<option value="500">{{ tx('editor.appearance.textWeight.500', 'Medium') }}</option>
|
|
5238
|
-
<option value="600">{{ tx('editor.appearance.textWeight.600', 'Semibold') }}</option>
|
|
5239
|
-
<option value="700">{{ tx('editor.appearance.textWeight.700', 'Bold') }}</option>
|
|
5240
|
-
</select>
|
|
5246
|
+
<mat-select [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)" [placeholder]="tx('editor.appearance.textWeight.default', 'Default')">
|
|
5247
|
+
<mat-option [value]="undefined">{{ tx('editor.appearance.textWeight.default', 'Default') }}</mat-option>
|
|
5248
|
+
<mat-option value="400">{{ tx('editor.appearance.textWeight.400', 'Normal') }}</mat-option>
|
|
5249
|
+
<mat-option value="500">{{ tx('editor.appearance.textWeight.500', 'Medium') }}</mat-option>
|
|
5250
|
+
<mat-option value="600">{{ tx('editor.appearance.textWeight.600', 'Semibold') }}</mat-option>
|
|
5251
|
+
<mat-option value="700">{{ tx('editor.appearance.textWeight.700', 'Bold') }}</mat-option>
|
|
5252
|
+
</mat-select>
|
|
5241
5253
|
</mat-form-field>
|
|
5242
5254
|
<mat-form-field appearance="outline" class="field-span-2">
|
|
5243
5255
|
<mat-label>{{ tx('editor.appearance.themeClass', 'Theme class') }}</mat-label>
|
|
@@ -5245,12 +5257,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
5245
5257
|
</mat-form-field>
|
|
5246
5258
|
<mat-form-field appearance="outline">
|
|
5247
5259
|
<mat-label>{{ tx('editor.appearance.iconSet', 'Icon set') }}</mat-label>
|
|
5248
|
-
<select
|
|
5249
|
-
<option [
|
|
5250
|
-
<option value="material-symbols-outlined">Material Symbols (Outlined)</option>
|
|
5251
|
-
<option value="material-symbols-rounded">Material Symbols (Rounded)</option>
|
|
5252
|
-
<option value="material-symbols-sharp">Material Symbols (Sharp)</option>
|
|
5253
|
-
</select>
|
|
5260
|
+
<mat-select [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()" [placeholder]="tx('editor.appearance.iconSet.default', 'Material Icons (default)')">
|
|
5261
|
+
<mat-option [value]="undefined">{{ tx('editor.appearance.iconSet.default', 'Material Icons (default)') }}</mat-option>
|
|
5262
|
+
<mat-option value="material-symbols-outlined">Material Symbols (Outlined)</mat-option>
|
|
5263
|
+
<mat-option value="material-symbols-rounded">Material Symbols (Rounded)</mat-option>
|
|
5264
|
+
<mat-option value="material-symbols-sharp">Material Symbols (Sharp)</mat-option>
|
|
5265
|
+
</mat-select>
|
|
5254
5266
|
</mat-form-field>
|
|
5255
5267
|
</div>
|
|
5256
5268
|
<div class="inline-actions-grid icon-picker-grid">
|
|
@@ -5336,7 +5348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
5336
5348
|
</mat-tab>
|
|
5337
5349
|
</mat-tab-group>
|
|
5338
5350
|
</div>
|
|
5339
|
-
`, styles: [".pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:16px;display:grid;gap:16px;background:var(--md-sys-color-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.widget-item .info .meta{margin-top:2px;font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-column{display:grid;gap:10px;min-width:0}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.editor-icon-action{color:var(--md-sys-color-on-surface-variant)}.editor-icon-action--danger{color:var(--md-sys-color-error)}.mat-mdc-form-field-icon-suffix{align-self:center}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}\n"] }]
|
|
5351
|
+
`, styles: [":host{display:block;container-type:inline-size;color:var(--pfx-settings-panel-text-primary, var(--md-sys-color-on-surface))}.pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:16px;display:grid;gap:16px;background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface));border:1px solid color-mix(in srgb,var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant)) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.widget-item .info .meta{margin-top:2px;font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-column{display:grid;gap:10px;min-width:0}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.editor-icon-action{color:var(--md-sys-color-on-surface-variant)}.editor-icon-action--danger{color:var(--md-sys-color-error)}.mat-mdc-form-field-icon-suffix{align-self:center}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@container (max-width: 900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@container (max-width: 640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}\n"] }]
|
|
5340
5352
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5341
5353
|
type: Inject,
|
|
5342
5354
|
args: [SETTINGS_PANEL_DATA]
|
package/package.json
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisui/stepper",
|
|
3
|
-
"version": "10.0.0-rc.
|
|
3
|
+
"version": "10.0.0-rc.40",
|
|
4
4
|
"description": "Stepper workflows for Praxis UI with integrated forms, lists, uploads and page builder support.",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/common": "^21.0.0",
|
|
7
7
|
"@angular/core": "^21.0.0",
|
|
8
8
|
"@angular/material": "^21.0.0",
|
|
9
9
|
"@angular/cdk": "^21.0.0",
|
|
10
|
-
"@praxisui/core": "^10.0.0-rc.
|
|
11
|
-
"@praxisui/dynamic-form": "^10.0.0-rc.
|
|
12
|
-
"@praxisui/rich-content": "^10.0.0-rc.
|
|
13
|
-
"@praxisui/settings-panel": "^10.0.0-rc.
|
|
14
|
-
"@praxisui/list": "^10.0.0-rc.
|
|
15
|
-
"@praxisui/files-upload": "^10.0.0-rc.
|
|
16
|
-
"@praxisui/page-builder": "^10.0.0-rc.
|
|
10
|
+
"@praxisui/core": "^10.0.0-rc.40",
|
|
11
|
+
"@praxisui/dynamic-form": "^10.0.0-rc.40",
|
|
12
|
+
"@praxisui/rich-content": "^10.0.0-rc.40",
|
|
13
|
+
"@praxisui/settings-panel": "^10.0.0-rc.40",
|
|
14
|
+
"@praxisui/list": "^10.0.0-rc.40",
|
|
15
|
+
"@praxisui/files-upload": "^10.0.0-rc.40",
|
|
16
|
+
"@praxisui/page-builder": "^10.0.0-rc.40",
|
|
17
17
|
"@angular/forms": "^21.0.0",
|
|
18
18
|
"@angular/router": "^21.0.0",
|
|
19
|
-
"@praxisui/ai": "^10.0.0-rc.
|
|
19
|
+
"@praxisui/ai": "^10.0.0-rc.40",
|
|
20
20
|
"rxjs": "~7.8.0"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|