@praxisui/core 9.0.0-beta.0 → 9.0.0-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +106 -1227
- package/fesm2022/praxisui-core.mjs +246 -57
- package/package.json +2 -9
- package/types/praxisui-core.d.ts +53 -2
|
@@ -20346,7 +20346,7 @@ class SurfaceOpenActionEditorComponent {
|
|
|
20346
20346
|
.filter(Boolean)));
|
|
20347
20347
|
}
|
|
20348
20348
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SurfaceOpenActionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20349
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SurfaceOpenActionEditorComponent, isStandalone: true, selector: "praxis-surface-open-action-editor", inputs: { value: "value", hostKind: "hostKind" }, outputs: { valueChange: "valueChange" }, providers: [providePraxisI18nConfig(SURFACE_OPEN_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: `
|
|
20349
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SurfaceOpenActionEditorComponent, isStandalone: true, selector: "praxis-surface-open-action-editor", inputs: { value: "value", hostKind: "hostKind" }, outputs: { valueChange: "valueChange" }, host: { attributes: { "data-praxis-surface-open-action-editor": "core" } }, providers: [providePraxisI18nConfig(SURFACE_OPEN_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: `
|
|
20350
20350
|
<div class="surface-editor">
|
|
20351
20351
|
<div class="surface-section">
|
|
20352
20352
|
<div class="surface-section-title">{{ t('editor.presets.title', 'Presets') }}</div>
|
|
@@ -20643,17 +20643,17 @@ class SurfaceOpenActionEditorComponent {
|
|
|
20643
20643
|
{{ t('editor.bindings.empty', 'No bindings configured yet.') }}
|
|
20644
20644
|
</div>
|
|
20645
20645
|
}
|
|
20646
|
-
<div class="surface-
|
|
20646
|
+
<div class="surface-guidance">
|
|
20647
20647
|
@if (bindingSourceSuggestionsPreview) {
|
|
20648
|
-
<div>
|
|
20648
|
+
<div class="surface-guidance__item">
|
|
20649
20649
|
{{ t('editor.bindings.suggestedSources', 'Suggested sources: {{value}}', { value: bindingSourceSuggestionsPreview }) }}
|
|
20650
20650
|
</div>
|
|
20651
20651
|
}
|
|
20652
|
-
<div>
|
|
20652
|
+
<div class="surface-guidance__item surface-guidance__item--primary">
|
|
20653
20653
|
{{ t('editor.bindings.sourceSemantics', 'Use payload.* for the canonical event envelope and runtime.* for direct host state when the source component exposes it.') }}
|
|
20654
20654
|
</div>
|
|
20655
20655
|
@if (bindingTargetSuggestionsPreview) {
|
|
20656
|
-
<div>
|
|
20656
|
+
<div class="surface-guidance__item">
|
|
20657
20657
|
{{ t('editor.bindings.suggestedTargets', 'Suggested targets: {{value}}', { value: bindingTargetSuggestionsPreview }) }}
|
|
20658
20658
|
</div>
|
|
20659
20659
|
}
|
|
@@ -20689,11 +20689,11 @@ class SurfaceOpenActionEditorComponent {
|
|
|
20689
20689
|
</mat-form-field>
|
|
20690
20690
|
</div>
|
|
20691
20691
|
</div>
|
|
20692
|
-
`, isInline: true, styles: [".surface-editor{display:grid;gap:
|
|
20692
|
+
`, isInline: true, styles: [".surface-editor{display:grid;gap:14px;min-width:0}.surface-section{display:grid;gap:10px;min-width:0;padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.surface-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:0}.surface-section-title{font-size:12px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);margin-bottom:0}.surface-section-header .surface-section-title{margin-bottom:0}.surface-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px 16px;min-width:0}.surface-preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.surface-span-2{grid-column:span 2}.surface-span-all{width:100%;min-width:0}.surface-component-meta{display:grid;gap:4px;padding:10px 12px;border-radius:8px;background:var(--md-sys-color-surface-container)}.surface-component-title{font-weight:600;color:var(--md-sys-color-on-surface)}.surface-component-description,.surface-empty{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.surface-bindings{display:grid;gap:10px;min-width:0}.surface-binding-row{display:grid;grid-template-columns:minmax(min(220px,100%),1.15fr) minmax(min(240px,100%),1.25fr) minmax(128px,.55fr) auto;gap:10px;align-items:start;min-width:0;padding:10px;border-radius:8px;background:var(--md-sys-color-surface-container)}.surface-binding-row mat-form-field:nth-child(4){grid-column:1 / -2}.surface-guidance{display:grid;gap:4px;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 18%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.surface-guidance__item{overflow-wrap:anywhere}.surface-guidance__item--primary{color:var(--md-sys-color-on-surface)}mat-form-field{width:100%;min-width:0}@media(max-width:960px){.surface-section{padding:12px}.surface-span-2{grid-column:1 / -1}.surface-binding-row{grid-template-columns:minmax(0,1fr)}.surface-binding-row mat-form-field:nth-child(4){grid-column:auto}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
20693
20693
|
}
|
|
20694
20694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SurfaceOpenActionEditorComponent, decorators: [{
|
|
20695
20695
|
type: Component,
|
|
20696
|
-
args: [{ selector: 'praxis-surface-open-action-editor', standalone: true, providers: [providePraxisI18nConfig(SURFACE_OPEN_I18N_CONFIG)], imports: [
|
|
20696
|
+
args: [{ selector: 'praxis-surface-open-action-editor', standalone: true, host: { 'data-praxis-surface-open-action-editor': 'core' }, providers: [providePraxisI18nConfig(SURFACE_OPEN_I18N_CONFIG)], imports: [
|
|
20697
20697
|
FormsModule,
|
|
20698
20698
|
MatButtonModule,
|
|
20699
20699
|
MatFormFieldModule,
|
|
@@ -20999,17 +20999,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
20999
20999
|
{{ t('editor.bindings.empty', 'No bindings configured yet.') }}
|
|
21000
21000
|
</div>
|
|
21001
21001
|
}
|
|
21002
|
-
<div class="surface-
|
|
21002
|
+
<div class="surface-guidance">
|
|
21003
21003
|
@if (bindingSourceSuggestionsPreview) {
|
|
21004
|
-
<div>
|
|
21004
|
+
<div class="surface-guidance__item">
|
|
21005
21005
|
{{ t('editor.bindings.suggestedSources', 'Suggested sources: {{value}}', { value: bindingSourceSuggestionsPreview }) }}
|
|
21006
21006
|
</div>
|
|
21007
21007
|
}
|
|
21008
|
-
<div>
|
|
21008
|
+
<div class="surface-guidance__item surface-guidance__item--primary">
|
|
21009
21009
|
{{ t('editor.bindings.sourceSemantics', 'Use payload.* for the canonical event envelope and runtime.* for direct host state when the source component exposes it.') }}
|
|
21010
21010
|
</div>
|
|
21011
21011
|
@if (bindingTargetSuggestionsPreview) {
|
|
21012
|
-
<div>
|
|
21012
|
+
<div class="surface-guidance__item">
|
|
21013
21013
|
{{ t('editor.bindings.suggestedTargets', 'Suggested targets: {{value}}', { value: bindingTargetSuggestionsPreview }) }}
|
|
21014
21014
|
</div>
|
|
21015
21015
|
}
|
|
@@ -21045,7 +21045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
21045
21045
|
</mat-form-field>
|
|
21046
21046
|
</div>
|
|
21047
21047
|
</div>
|
|
21048
|
-
`, styles: [".surface-editor{display:grid;gap:
|
|
21048
|
+
`, styles: [".surface-editor{display:grid;gap:14px;min-width:0}.surface-section{display:grid;gap:10px;min-width:0;padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.surface-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:0}.surface-section-title{font-size:12px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);margin-bottom:0}.surface-section-header .surface-section-title{margin-bottom:0}.surface-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px 16px;min-width:0}.surface-preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.surface-span-2{grid-column:span 2}.surface-span-all{width:100%;min-width:0}.surface-component-meta{display:grid;gap:4px;padding:10px 12px;border-radius:8px;background:var(--md-sys-color-surface-container)}.surface-component-title{font-weight:600;color:var(--md-sys-color-on-surface)}.surface-component-description,.surface-empty{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.surface-bindings{display:grid;gap:10px;min-width:0}.surface-binding-row{display:grid;grid-template-columns:minmax(min(220px,100%),1.15fr) minmax(min(240px,100%),1.25fr) minmax(128px,.55fr) auto;gap:10px;align-items:start;min-width:0;padding:10px;border-radius:8px;background:var(--md-sys-color-surface-container)}.surface-binding-row mat-form-field:nth-child(4){grid-column:1 / -2}.surface-guidance{display:grid;gap:4px;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 18%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.surface-guidance__item{overflow-wrap:anywhere}.surface-guidance__item--primary{color:var(--md-sys-color-on-surface)}mat-form-field{width:100%;min-width:0}@media(max-width:960px){.surface-section{padding:12px}.surface-span-2{grid-column:1 / -1}.surface-binding-row{grid-template-columns:minmax(0,1fr)}.surface-binding-row mat-form-field:nth-child(4){grid-column:auto}}\n"] }]
|
|
21049
21049
|
}], propDecorators: { value: [{
|
|
21050
21050
|
type: Input
|
|
21051
21051
|
}], hostKind: [{
|
|
@@ -24947,7 +24947,7 @@ class DynamicWidgetLoaderDirective {
|
|
|
24947
24947
|
'praxis-crud': ['crudId', 'componentInstanceId', 'metadata'],
|
|
24948
24948
|
'praxis-dynamic-form': ['formId', 'componentInstanceId', 'resourcePath'],
|
|
24949
24949
|
'praxis-tabs': ['tabsId', 'componentInstanceId', 'configPersistenceStrategy', 'config'],
|
|
24950
|
-
'praxis-list': ['listId', 'componentInstanceId', 'config'],
|
|
24950
|
+
'praxis-list': ['listId', 'componentInstanceId', 'enableCustomization', 'config'],
|
|
24951
24951
|
'praxis-expansion': ['expansionId', 'componentInstanceId', 'config'],
|
|
24952
24952
|
'praxis-stepper': ['stepperId', 'componentInstanceId', 'config'],
|
|
24953
24953
|
'praxis-files-upload': ['filesUploadId', 'componentInstanceId', 'config'],
|
|
@@ -25307,28 +25307,160 @@ const BUILTIN_SHELL_PRESETS = {
|
|
|
25307
25307
|
},
|
|
25308
25308
|
'light-neutral': {
|
|
25309
25309
|
card: {
|
|
25310
|
-
background: '
|
|
25311
|
-
borderColor: '
|
|
25310
|
+
background: 'var(--md-sys-color-surface)',
|
|
25311
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-outline-variant) 82%, transparent)',
|
|
25312
25312
|
borderRadius: '12px',
|
|
25313
|
-
shadow: '0 4px
|
|
25313
|
+
shadow: '0 4px 14px color-mix(in srgb, var(--md-sys-color-shadow, #000) 7%, transparent)',
|
|
25314
25314
|
},
|
|
25315
25315
|
header: {
|
|
25316
|
-
|
|
25317
|
-
|
|
25318
|
-
|
|
25316
|
+
background: 'color-mix(in srgb, var(--md-sys-color-surface-container-low) 72%, transparent)',
|
|
25317
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent)',
|
|
25318
|
+
titleColor: 'var(--md-sys-color-on-surface)',
|
|
25319
|
+
subtitleColor: 'var(--md-sys-color-on-surface-variant)',
|
|
25320
|
+
iconColor: 'var(--md-sys-color-primary)',
|
|
25321
|
+
},
|
|
25322
|
+
body: {
|
|
25323
|
+
background: 'var(--md-sys-color-surface)',
|
|
25324
|
+
textColor: 'var(--md-sys-color-on-surface)',
|
|
25319
25325
|
},
|
|
25320
25326
|
},
|
|
25321
25327
|
graphite: {
|
|
25322
25328
|
card: {
|
|
25323
|
-
background: '
|
|
25324
|
-
borderColor: '
|
|
25325
|
-
borderRadius: '
|
|
25326
|
-
shadow: '0
|
|
25329
|
+
background: 'color-mix(in srgb, var(--md-sys-color-surface) 94%, var(--md-sys-color-surface-container-high) 6%)',
|
|
25330
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-outline-variant) 74%, transparent)',
|
|
25331
|
+
borderRadius: '12px',
|
|
25332
|
+
shadow: '0 8px 22px color-mix(in srgb, var(--md-sys-color-shadow, #000) 11%, transparent)',
|
|
25333
|
+
},
|
|
25334
|
+
header: {
|
|
25335
|
+
background: 'color-mix(in srgb, var(--md-sys-color-surface-container-low) 76%, transparent)',
|
|
25336
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-outline-variant) 62%, transparent)',
|
|
25337
|
+
titleColor: 'var(--md-sys-color-on-surface)',
|
|
25338
|
+
subtitleColor: 'var(--md-sys-color-on-surface-variant)',
|
|
25339
|
+
iconColor: 'var(--md-sys-color-primary)',
|
|
25340
|
+
},
|
|
25341
|
+
body: {
|
|
25342
|
+
background: 'var(--md-sys-color-surface)',
|
|
25343
|
+
textColor: 'var(--md-sys-color-on-surface)',
|
|
25344
|
+
},
|
|
25345
|
+
},
|
|
25346
|
+
frameless: {
|
|
25347
|
+
card: {
|
|
25348
|
+
background: 'transparent',
|
|
25349
|
+
borderColor: 'transparent',
|
|
25350
|
+
borderRadius: '0',
|
|
25351
|
+
shadow: 'none',
|
|
25352
|
+
},
|
|
25353
|
+
header: {
|
|
25354
|
+
background: 'transparent',
|
|
25355
|
+
borderColor: 'transparent',
|
|
25356
|
+
titleColor: 'var(--md-sys-color-on-surface)',
|
|
25357
|
+
subtitleColor: 'var(--md-sys-color-on-surface-variant)',
|
|
25358
|
+
iconColor: 'var(--md-sys-color-primary)',
|
|
25359
|
+
},
|
|
25360
|
+
body: {
|
|
25361
|
+
background: 'transparent',
|
|
25362
|
+
textColor: 'var(--md-sys-color-on-surface)',
|
|
25363
|
+
padding: '0',
|
|
25364
|
+
},
|
|
25365
|
+
},
|
|
25366
|
+
'data-panel': {
|
|
25367
|
+
card: {
|
|
25368
|
+
background: 'var(--md-sys-color-surface)',
|
|
25369
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent)',
|
|
25370
|
+
borderRadius: '10px',
|
|
25371
|
+
shadow: '0 5px 16px color-mix(in srgb, var(--md-sys-color-shadow, #000) 7%, transparent)',
|
|
25372
|
+
},
|
|
25373
|
+
header: {
|
|
25374
|
+
background: 'color-mix(in srgb, var(--md-sys-color-surface-container-low) 64%, transparent)',
|
|
25375
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-outline-variant) 58%, transparent)',
|
|
25376
|
+
titleColor: 'var(--md-sys-color-on-surface)',
|
|
25377
|
+
subtitleColor: 'var(--md-sys-color-on-surface-variant)',
|
|
25378
|
+
iconColor: 'var(--md-sys-color-primary)',
|
|
25379
|
+
},
|
|
25380
|
+
body: {
|
|
25381
|
+
background: 'var(--md-sys-color-surface)',
|
|
25382
|
+
textColor: 'var(--md-sys-color-on-surface)',
|
|
25383
|
+
padding: '12px',
|
|
25384
|
+
},
|
|
25385
|
+
},
|
|
25386
|
+
'chart-panel': {
|
|
25387
|
+
card: {
|
|
25388
|
+
background: 'color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-primary-container) 8%)',
|
|
25389
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-primary) 22%, var(--md-sys-color-outline-variant) 62%)',
|
|
25390
|
+
borderRadius: '12px',
|
|
25391
|
+
shadow: '0 10px 24px color-mix(in srgb, var(--md-sys-color-shadow, #000) 9%, transparent)',
|
|
25392
|
+
},
|
|
25393
|
+
header: {
|
|
25394
|
+
background: 'color-mix(in srgb, var(--md-sys-color-primary-container) 22%, transparent)',
|
|
25395
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)',
|
|
25396
|
+
titleColor: 'var(--md-sys-color-on-surface)',
|
|
25397
|
+
subtitleColor: 'var(--md-sys-color-on-surface-variant)',
|
|
25398
|
+
iconColor: 'var(--md-sys-color-primary)',
|
|
25399
|
+
},
|
|
25400
|
+
body: {
|
|
25401
|
+
background: 'transparent',
|
|
25402
|
+
textColor: 'var(--md-sys-color-on-surface)',
|
|
25403
|
+
padding: '12px',
|
|
25404
|
+
},
|
|
25405
|
+
},
|
|
25406
|
+
'metric-panel': {
|
|
25407
|
+
card: {
|
|
25408
|
+
background: 'color-mix(in srgb, var(--md-sys-color-surface-container-low) 78%, var(--md-sys-color-primary-container) 22%)',
|
|
25409
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent)',
|
|
25410
|
+
borderRadius: '10px',
|
|
25411
|
+
shadow: '0 8px 18px color-mix(in srgb, var(--md-sys-color-shadow, #000) 8%, transparent)',
|
|
25327
25412
|
},
|
|
25328
25413
|
header: {
|
|
25329
|
-
|
|
25330
|
-
|
|
25331
|
-
|
|
25414
|
+
background: 'transparent',
|
|
25415
|
+
borderColor: 'transparent',
|
|
25416
|
+
titleColor: 'var(--md-sys-color-on-surface)',
|
|
25417
|
+
subtitleColor: 'var(--md-sys-color-on-surface-variant)',
|
|
25418
|
+
iconColor: 'var(--md-sys-color-primary)',
|
|
25419
|
+
},
|
|
25420
|
+
body: {
|
|
25421
|
+
background: 'transparent',
|
|
25422
|
+
textColor: 'var(--md-sys-color-on-surface)',
|
|
25423
|
+
padding: '10px 12px',
|
|
25424
|
+
},
|
|
25425
|
+
},
|
|
25426
|
+
'executive-card': {
|
|
25427
|
+
card: {
|
|
25428
|
+
background: 'color-mix(in srgb, var(--md-sys-color-surface) 88%, var(--md-sys-color-surface-container-high) 12%)',
|
|
25429
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-primary) 28%, var(--md-sys-color-outline-variant) 50%)',
|
|
25430
|
+
borderRadius: '10px',
|
|
25431
|
+
shadow: '0 12px 28px color-mix(in srgb, var(--md-sys-color-shadow, #000) 13%, transparent)',
|
|
25432
|
+
},
|
|
25433
|
+
header: {
|
|
25434
|
+
background: 'color-mix(in srgb, var(--md-sys-color-primary-container) 18%, transparent)',
|
|
25435
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent)',
|
|
25436
|
+
titleColor: 'var(--md-sys-color-on-surface)',
|
|
25437
|
+
subtitleColor: 'var(--md-sys-color-on-surface-variant)',
|
|
25438
|
+
iconColor: 'var(--md-sys-color-primary)',
|
|
25439
|
+
},
|
|
25440
|
+
body: {
|
|
25441
|
+
background: 'transparent',
|
|
25442
|
+
textColor: 'var(--md-sys-color-on-surface)',
|
|
25443
|
+
padding: '14px',
|
|
25444
|
+
},
|
|
25445
|
+
},
|
|
25446
|
+
'filter-bar': {
|
|
25447
|
+
card: {
|
|
25448
|
+
background: 'color-mix(in srgb, var(--md-sys-color-surface-container-low) 74%, var(--md-sys-color-secondary-container) 26%)',
|
|
25449
|
+
borderColor: 'color-mix(in srgb, var(--md-sys-color-secondary) 24%, transparent)',
|
|
25450
|
+
borderRadius: '999px',
|
|
25451
|
+
shadow: '0 6px 18px color-mix(in srgb, var(--md-sys-color-shadow, #000) 7%, transparent)',
|
|
25452
|
+
},
|
|
25453
|
+
header: {
|
|
25454
|
+
background: 'transparent',
|
|
25455
|
+
borderColor: 'transparent',
|
|
25456
|
+
titleColor: 'var(--md-sys-color-on-surface)',
|
|
25457
|
+
subtitleColor: 'var(--md-sys-color-on-surface-variant)',
|
|
25458
|
+
iconColor: 'var(--md-sys-color-secondary)',
|
|
25459
|
+
},
|
|
25460
|
+
body: {
|
|
25461
|
+
background: 'transparent',
|
|
25462
|
+
textColor: 'var(--md-sys-color-on-surface)',
|
|
25463
|
+
padding: '10px 14px',
|
|
25332
25464
|
},
|
|
25333
25465
|
},
|
|
25334
25466
|
};
|
|
@@ -25404,6 +25536,11 @@ class WidgetShellComponent {
|
|
|
25404
25536
|
const builtins = this.buildWindowActions(custom);
|
|
25405
25537
|
return [...builtins, ...custom];
|
|
25406
25538
|
}
|
|
25539
|
+
displayActionIcon(action) {
|
|
25540
|
+
return action.pressed === true && action.pressedIcon
|
|
25541
|
+
? action.pressedIcon
|
|
25542
|
+
: action.icon;
|
|
25543
|
+
}
|
|
25407
25544
|
onAction(action, ev) {
|
|
25408
25545
|
ev.stopPropagation();
|
|
25409
25546
|
const handled = this.handleWindowAction(action);
|
|
@@ -25413,6 +25550,7 @@ class WidgetShellComponent {
|
|
|
25413
25550
|
command: action.command,
|
|
25414
25551
|
emit: action.emit,
|
|
25415
25552
|
payload,
|
|
25553
|
+
pressed: action.pressed,
|
|
25416
25554
|
action,
|
|
25417
25555
|
};
|
|
25418
25556
|
this.loader?.dispatchAction(event);
|
|
@@ -25603,14 +25741,16 @@ class WidgetShellComponent {
|
|
|
25603
25741
|
<button
|
|
25604
25742
|
[disabled]="action.disabled"
|
|
25605
25743
|
[matTooltip]="action.tooltip || ''"
|
|
25606
|
-
matTooltipPosition="
|
|
25744
|
+
matTooltipPosition="above"
|
|
25607
25745
|
[ngClass]="action.variant === 'outlined' ? 'pdx-action-outlined' : 'pdx-action-text'"
|
|
25746
|
+
[class.pdx-shell-action--pressed]="action.pressed === true"
|
|
25608
25747
|
mat-button
|
|
25609
25748
|
type="button"
|
|
25749
|
+
[attr.aria-pressed]="action.pressed == null ? null : action.pressed"
|
|
25610
25750
|
(click)="onAction(action, $event)"
|
|
25611
25751
|
>
|
|
25612
|
-
@if (action
|
|
25613
|
-
<mat-icon [praxisIcon]="
|
|
25752
|
+
@if (displayActionIcon(action); as actionIcon) {
|
|
25753
|
+
<mat-icon [praxisIcon]="actionIcon"></mat-icon>
|
|
25614
25754
|
}
|
|
25615
25755
|
<span class="pdx-action-label">{{ action.label }}</span>
|
|
25616
25756
|
</button>
|
|
@@ -25620,13 +25760,15 @@ class WidgetShellComponent {
|
|
|
25620
25760
|
mat-icon-button
|
|
25621
25761
|
[disabled]="action.disabled"
|
|
25622
25762
|
[matTooltip]="action.tooltip || action.label || ''"
|
|
25623
|
-
matTooltipPosition="
|
|
25763
|
+
matTooltipPosition="above"
|
|
25624
25764
|
[attr.aria-label]="action.label || action.tooltip || action.id"
|
|
25765
|
+
[attr.aria-pressed]="action.pressed == null ? null : action.pressed"
|
|
25766
|
+
[class.pdx-shell-action--pressed]="action.pressed === true"
|
|
25625
25767
|
type="button"
|
|
25626
25768
|
(click)="onAction(action, $event)"
|
|
25627
25769
|
>
|
|
25628
|
-
@if (action
|
|
25629
|
-
<mat-icon [praxisIcon]="
|
|
25770
|
+
@if (displayActionIcon(action); as actionIcon) {
|
|
25771
|
+
<mat-icon [praxisIcon]="actionIcon"></mat-icon>
|
|
25630
25772
|
}
|
|
25631
25773
|
</button>
|
|
25632
25774
|
}
|
|
@@ -25637,7 +25779,7 @@ class WidgetShellComponent {
|
|
|
25637
25779
|
mat-icon-button
|
|
25638
25780
|
type="button"
|
|
25639
25781
|
[matTooltip]="moreActionsLabel()"
|
|
25640
|
-
matTooltipPosition="
|
|
25782
|
+
matTooltipPosition="above"
|
|
25641
25783
|
[attr.aria-label]="moreActionsLabel()"
|
|
25642
25784
|
[matMenuTriggerFor]="overflowMenu"
|
|
25643
25785
|
(click)="$event.stopPropagation()"
|
|
@@ -25653,13 +25795,15 @@ class WidgetShellComponent {
|
|
|
25653
25795
|
mat-icon-button
|
|
25654
25796
|
[disabled]="action.disabled"
|
|
25655
25797
|
[matTooltip]="action.tooltip || action.label || ''"
|
|
25656
|
-
matTooltipPosition="
|
|
25798
|
+
matTooltipPosition="above"
|
|
25657
25799
|
[attr.aria-label]="action.label || action.tooltip || action.id"
|
|
25800
|
+
[attr.aria-pressed]="action.pressed == null ? null : action.pressed"
|
|
25801
|
+
[class.pdx-shell-action--pressed]="action.pressed === true"
|
|
25658
25802
|
type="button"
|
|
25659
25803
|
(click)="onAction(action, $event)"
|
|
25660
25804
|
>
|
|
25661
|
-
@if (action
|
|
25662
|
-
<mat-icon [praxisIcon]="
|
|
25805
|
+
@if (displayActionIcon(action); as actionIcon) {
|
|
25806
|
+
<mat-icon [praxisIcon]="actionIcon"></mat-icon>
|
|
25663
25807
|
}
|
|
25664
25808
|
</button>
|
|
25665
25809
|
}
|
|
@@ -25670,10 +25814,11 @@ class WidgetShellComponent {
|
|
|
25670
25814
|
@for (action of overflowHeaderActions; track action.id) {
|
|
25671
25815
|
<button
|
|
25672
25816
|
mat-menu-item
|
|
25817
|
+
[attr.aria-pressed]="action.pressed == null ? null : action.pressed"
|
|
25673
25818
|
(click)="onAction(action, $event)"
|
|
25674
25819
|
>
|
|
25675
|
-
@if (action
|
|
25676
|
-
<mat-icon [praxisIcon]="
|
|
25820
|
+
@if (displayActionIcon(action); as actionIcon) {
|
|
25821
|
+
<mat-icon [praxisIcon]="actionIcon"></mat-icon>
|
|
25677
25822
|
}
|
|
25678
25823
|
<span>{{ action.label || action.id }}</span>
|
|
25679
25824
|
</button>
|
|
@@ -25688,7 +25833,7 @@ class WidgetShellComponent {
|
|
|
25688
25833
|
@if (expanded || fullscreen) {
|
|
25689
25834
|
<div class="pdx-shell-backdrop" (click)="closeOverlay()"></div>
|
|
25690
25835
|
}
|
|
25691
|
-
`, isInline: true, styles: [":host{display:block;height:100%}:host(.pdx-widget-shell-collapsed){height:auto}.pdx-shell{position:relative;height:100%;display:flex;flex-direction:column}.pdx-shell.no-shell{background:transparent;border:none;border-radius:0;box-shadow:none}.pdx-shell.dashboard{background:var(--pdx-shell-card-bg, var(--pdx-dashboard-card-bg, var(--md-sys-color-surface-container-low)));border:1px solid var(--pdx-shell-card-border, var(--pdx-dashboard-card-border, var(--md-sys-color-outline-variant)));border-radius:var(--pdx-shell-card-radius, 12px);box-shadow:var(--pdx-shell-card-shadow, 0 4px 12px rgba(15, 23, 42, .06));overflow:hidden}.pdx-shell-header{display:flex;align-items:center;gap:10px;padding:8px 10px 7px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var(--pdx-shell-header-bg, var(--md-sys-color-surface-container))}.pdx-shell-header--drag-enabled{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pdx-shell-header--drag-enabled:active{cursor:grabbing}.pdx-shell-header--drag-enabled:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,white 28%);outline-offset:-2px}.pdx-shell-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1;color:var(--pdx-shell-title-color, inherit)}.pdx-shell-title mat-icon{color:var(--pdx-shell-icon-color, currentColor)}.pdx-shell-text{min-width:0}.pdx-shell-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 13px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-subtitle{font-size:var(--pdx-shell-subtitle-size, 11px);opacity:.75;color:var(--pdx-shell-subtitle-color, currentColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-actions,.pdx-shell-window-actions{display:flex;align-items:center;gap:4px}.pdx-shell-window-actions{margin-left:auto}.pdx-action-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-action-text{padding:0 8px}.pdx-action-label{font-size:12px;font-weight:500}.pdx-shell-body{flex:1;min-height:0;padding:var(--pdx-shell-body-padding, 8px 10px 10px 10px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit)}.pdx-shell.no-shell .pdx-shell-body{padding:0}.pdx-shell-body.hidden{display:none}.pdx-shell.collapsed{height:auto}.pdx-shell.collapsed .pdx-shell-header{border-bottom-color:transparent}.pdx-shell.body-fill .pdx-shell-body,.pdx-shell.body-scroll .pdx-shell-body,.pdx-shell.expanded .pdx-shell-body,.pdx-shell.fullscreen .pdx-shell-body{overflow:auto;display:flex;flex-direction:column;min-height:0}.pdx-shell.collapsed .pdx-shell-body{display:none}.pdx-shell.body-fill .pdx-shell-body{overflow:hidden}.pdx-shell.body-scroll .pdx-shell-body{overflow:auto}.pdx-shell.body-fill .pdx-shell-body>*,.pdx-shell.body-scroll .pdx-shell-body>*,.pdx-shell.expanded .pdx-shell-body>*,.pdx-shell.fullscreen .pdx-shell-body>*{flex:1 1 auto;min-height:0;width:100%}.pdx-shell.expanded{position:fixed;top:10vh;left:50%;width:min(920px,92vw);height:min(640px,82vh);transform:translate(-50%);z-index:var(--praxis-layer-widget-shell-expanded, 1290);box-shadow:var(--mat-elevation-level8)}.pdx-shell.fullscreen{position:fixed;inset:0;width:auto;height:auto;transform:none;border-radius:0;z-index:var(--praxis-layer-widget-shell-fullscreen, 1291);box-shadow:var(--mat-elevation-level8)}.pdx-shell-backdrop{position:fixed;inset:0;z-index:var(--praxis-layer-widget-shell-backdrop, 1280);background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25836
|
+
`, isInline: true, styles: [":host{display:block;height:100%}:host(.pdx-widget-shell-collapsed){height:auto}.pdx-shell{position:relative;height:100%;display:flex;flex-direction:column}.pdx-shell.no-shell{background:transparent;border:none;border-radius:0;box-shadow:none}.pdx-shell.dashboard{background:var(--pdx-shell-card-bg, var(--pdx-dashboard-card-bg, var(--md-sys-color-surface-container-low)));border:1px solid var(--pdx-shell-card-border, var(--pdx-dashboard-card-border, var(--md-sys-color-outline-variant)));border-radius:var(--pdx-shell-card-radius, 12px);box-shadow:var(--pdx-shell-card-shadow, 0 4px 12px rgba(15, 23, 42, .06));overflow:hidden}.pdx-shell-header{display:flex;align-items:center;gap:10px;padding:8px 10px 7px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var(--pdx-shell-header-bg, var(--md-sys-color-surface-container))}.pdx-shell-header--drag-enabled{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pdx-shell-header--drag-enabled:active{cursor:grabbing}.pdx-shell-header--drag-enabled:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,white 28%);outline-offset:-2px}.pdx-shell-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1;color:var(--pdx-shell-title-color, inherit)}.pdx-shell-title mat-icon{color:var(--pdx-shell-icon-color, currentColor)}.pdx-shell-text{min-width:0}.pdx-shell-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 13px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-subtitle{font-size:var(--pdx-shell-subtitle-size, 11px);opacity:.75;color:var(--pdx-shell-subtitle-color, currentColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-actions,.pdx-shell-window-actions{display:flex;align-items:center;gap:4px}.pdx-shell-window-actions{margin-left:auto}.pdx-action-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-action-text{padding:0 8px}.pdx-shell-action--pressed{color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}.pdx-action-label{font-size:12px;font-weight:500}.pdx-shell-body{flex:1;min-height:0;padding:var(--pdx-shell-body-padding, 8px 10px 10px 10px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit)}.pdx-shell.no-shell .pdx-shell-body{padding:0}.pdx-shell-body.hidden{display:none}.pdx-shell.collapsed{height:auto}.pdx-shell.collapsed .pdx-shell-header{border-bottom-color:transparent}.pdx-shell.body-fill .pdx-shell-body,.pdx-shell.body-scroll .pdx-shell-body,.pdx-shell.expanded .pdx-shell-body,.pdx-shell.fullscreen .pdx-shell-body{overflow:auto;display:flex;flex-direction:column;min-height:0}.pdx-shell.collapsed .pdx-shell-body{display:none}.pdx-shell.body-fill .pdx-shell-body{overflow:hidden}.pdx-shell.body-scroll .pdx-shell-body{overflow:auto}.pdx-shell.body-fill .pdx-shell-body>*,.pdx-shell.body-scroll .pdx-shell-body>*,.pdx-shell.expanded .pdx-shell-body>*,.pdx-shell.fullscreen .pdx-shell-body>*{flex:1 1 auto;min-height:0;width:100%}.pdx-shell.expanded{position:fixed;top:10vh;left:50%;width:min(920px,92vw);height:min(640px,82vh);transform:translate(-50%);z-index:var(--praxis-layer-widget-shell-expanded, 1290);box-shadow:var(--mat-elevation-level8)}.pdx-shell.fullscreen{position:fixed;inset:0;width:auto;height:auto;transform:none;border-radius:0;z-index:var(--praxis-layer-widget-shell-fullscreen, 1291);box-shadow:var(--mat-elevation-level8)}.pdx-shell-backdrop{position:fixed;inset:0;z-index:var(--praxis-layer-widget-shell-backdrop, 1280);background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25692
25837
|
}
|
|
25693
25838
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: WidgetShellComponent, decorators: [{
|
|
25694
25839
|
type: Component,
|
|
@@ -25747,14 +25892,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
25747
25892
|
<button
|
|
25748
25893
|
[disabled]="action.disabled"
|
|
25749
25894
|
[matTooltip]="action.tooltip || ''"
|
|
25750
|
-
matTooltipPosition="
|
|
25895
|
+
matTooltipPosition="above"
|
|
25751
25896
|
[ngClass]="action.variant === 'outlined' ? 'pdx-action-outlined' : 'pdx-action-text'"
|
|
25897
|
+
[class.pdx-shell-action--pressed]="action.pressed === true"
|
|
25752
25898
|
mat-button
|
|
25753
25899
|
type="button"
|
|
25900
|
+
[attr.aria-pressed]="action.pressed == null ? null : action.pressed"
|
|
25754
25901
|
(click)="onAction(action, $event)"
|
|
25755
25902
|
>
|
|
25756
|
-
@if (action
|
|
25757
|
-
<mat-icon [praxisIcon]="
|
|
25903
|
+
@if (displayActionIcon(action); as actionIcon) {
|
|
25904
|
+
<mat-icon [praxisIcon]="actionIcon"></mat-icon>
|
|
25758
25905
|
}
|
|
25759
25906
|
<span class="pdx-action-label">{{ action.label }}</span>
|
|
25760
25907
|
</button>
|
|
@@ -25764,13 +25911,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
25764
25911
|
mat-icon-button
|
|
25765
25912
|
[disabled]="action.disabled"
|
|
25766
25913
|
[matTooltip]="action.tooltip || action.label || ''"
|
|
25767
|
-
matTooltipPosition="
|
|
25914
|
+
matTooltipPosition="above"
|
|
25768
25915
|
[attr.aria-label]="action.label || action.tooltip || action.id"
|
|
25916
|
+
[attr.aria-pressed]="action.pressed == null ? null : action.pressed"
|
|
25917
|
+
[class.pdx-shell-action--pressed]="action.pressed === true"
|
|
25769
25918
|
type="button"
|
|
25770
25919
|
(click)="onAction(action, $event)"
|
|
25771
25920
|
>
|
|
25772
|
-
@if (action
|
|
25773
|
-
<mat-icon [praxisIcon]="
|
|
25921
|
+
@if (displayActionIcon(action); as actionIcon) {
|
|
25922
|
+
<mat-icon [praxisIcon]="actionIcon"></mat-icon>
|
|
25774
25923
|
}
|
|
25775
25924
|
</button>
|
|
25776
25925
|
}
|
|
@@ -25781,7 +25930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
25781
25930
|
mat-icon-button
|
|
25782
25931
|
type="button"
|
|
25783
25932
|
[matTooltip]="moreActionsLabel()"
|
|
25784
|
-
matTooltipPosition="
|
|
25933
|
+
matTooltipPosition="above"
|
|
25785
25934
|
[attr.aria-label]="moreActionsLabel()"
|
|
25786
25935
|
[matMenuTriggerFor]="overflowMenu"
|
|
25787
25936
|
(click)="$event.stopPropagation()"
|
|
@@ -25797,13 +25946,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
25797
25946
|
mat-icon-button
|
|
25798
25947
|
[disabled]="action.disabled"
|
|
25799
25948
|
[matTooltip]="action.tooltip || action.label || ''"
|
|
25800
|
-
matTooltipPosition="
|
|
25949
|
+
matTooltipPosition="above"
|
|
25801
25950
|
[attr.aria-label]="action.label || action.tooltip || action.id"
|
|
25951
|
+
[attr.aria-pressed]="action.pressed == null ? null : action.pressed"
|
|
25952
|
+
[class.pdx-shell-action--pressed]="action.pressed === true"
|
|
25802
25953
|
type="button"
|
|
25803
25954
|
(click)="onAction(action, $event)"
|
|
25804
25955
|
>
|
|
25805
|
-
@if (action
|
|
25806
|
-
<mat-icon [praxisIcon]="
|
|
25956
|
+
@if (displayActionIcon(action); as actionIcon) {
|
|
25957
|
+
<mat-icon [praxisIcon]="actionIcon"></mat-icon>
|
|
25807
25958
|
}
|
|
25808
25959
|
</button>
|
|
25809
25960
|
}
|
|
@@ -25814,10 +25965,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
25814
25965
|
@for (action of overflowHeaderActions; track action.id) {
|
|
25815
25966
|
<button
|
|
25816
25967
|
mat-menu-item
|
|
25968
|
+
[attr.aria-pressed]="action.pressed == null ? null : action.pressed"
|
|
25817
25969
|
(click)="onAction(action, $event)"
|
|
25818
25970
|
>
|
|
25819
|
-
@if (action
|
|
25820
|
-
<mat-icon [praxisIcon]="
|
|
25971
|
+
@if (displayActionIcon(action); as actionIcon) {
|
|
25972
|
+
<mat-icon [praxisIcon]="actionIcon"></mat-icon>
|
|
25821
25973
|
}
|
|
25822
25974
|
<span>{{ action.label || action.id }}</span>
|
|
25823
25975
|
</button>
|
|
@@ -25832,7 +25984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
25832
25984
|
@if (expanded || fullscreen) {
|
|
25833
25985
|
<div class="pdx-shell-backdrop" (click)="closeOverlay()"></div>
|
|
25834
25986
|
}
|
|
25835
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:100%}:host(.pdx-widget-shell-collapsed){height:auto}.pdx-shell{position:relative;height:100%;display:flex;flex-direction:column}.pdx-shell.no-shell{background:transparent;border:none;border-radius:0;box-shadow:none}.pdx-shell.dashboard{background:var(--pdx-shell-card-bg, var(--pdx-dashboard-card-bg, var(--md-sys-color-surface-container-low)));border:1px solid var(--pdx-shell-card-border, var(--pdx-dashboard-card-border, var(--md-sys-color-outline-variant)));border-radius:var(--pdx-shell-card-radius, 12px);box-shadow:var(--pdx-shell-card-shadow, 0 4px 12px rgba(15, 23, 42, .06));overflow:hidden}.pdx-shell-header{display:flex;align-items:center;gap:10px;padding:8px 10px 7px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var(--pdx-shell-header-bg, var(--md-sys-color-surface-container))}.pdx-shell-header--drag-enabled{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pdx-shell-header--drag-enabled:active{cursor:grabbing}.pdx-shell-header--drag-enabled:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,white 28%);outline-offset:-2px}.pdx-shell-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1;color:var(--pdx-shell-title-color, inherit)}.pdx-shell-title mat-icon{color:var(--pdx-shell-icon-color, currentColor)}.pdx-shell-text{min-width:0}.pdx-shell-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 13px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-subtitle{font-size:var(--pdx-shell-subtitle-size, 11px);opacity:.75;color:var(--pdx-shell-subtitle-color, currentColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-actions,.pdx-shell-window-actions{display:flex;align-items:center;gap:4px}.pdx-shell-window-actions{margin-left:auto}.pdx-action-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-action-text{padding:0 8px}.pdx-action-label{font-size:12px;font-weight:500}.pdx-shell-body{flex:1;min-height:0;padding:var(--pdx-shell-body-padding, 8px 10px 10px 10px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit)}.pdx-shell.no-shell .pdx-shell-body{padding:0}.pdx-shell-body.hidden{display:none}.pdx-shell.collapsed{height:auto}.pdx-shell.collapsed .pdx-shell-header{border-bottom-color:transparent}.pdx-shell.body-fill .pdx-shell-body,.pdx-shell.body-scroll .pdx-shell-body,.pdx-shell.expanded .pdx-shell-body,.pdx-shell.fullscreen .pdx-shell-body{overflow:auto;display:flex;flex-direction:column;min-height:0}.pdx-shell.collapsed .pdx-shell-body{display:none}.pdx-shell.body-fill .pdx-shell-body{overflow:hidden}.pdx-shell.body-scroll .pdx-shell-body{overflow:auto}.pdx-shell.body-fill .pdx-shell-body>*,.pdx-shell.body-scroll .pdx-shell-body>*,.pdx-shell.expanded .pdx-shell-body>*,.pdx-shell.fullscreen .pdx-shell-body>*{flex:1 1 auto;min-height:0;width:100%}.pdx-shell.expanded{position:fixed;top:10vh;left:50%;width:min(920px,92vw);height:min(640px,82vh);transform:translate(-50%);z-index:var(--praxis-layer-widget-shell-expanded, 1290);box-shadow:var(--mat-elevation-level8)}.pdx-shell.fullscreen{position:fixed;inset:0;width:auto;height:auto;transform:none;border-radius:0;z-index:var(--praxis-layer-widget-shell-fullscreen, 1291);box-shadow:var(--mat-elevation-level8)}.pdx-shell-backdrop{position:fixed;inset:0;z-index:var(--praxis-layer-widget-shell-backdrop, 1280);background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}\n"] }]
|
|
25987
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:100%}:host(.pdx-widget-shell-collapsed){height:auto}.pdx-shell{position:relative;height:100%;display:flex;flex-direction:column}.pdx-shell.no-shell{background:transparent;border:none;border-radius:0;box-shadow:none}.pdx-shell.dashboard{background:var(--pdx-shell-card-bg, var(--pdx-dashboard-card-bg, var(--md-sys-color-surface-container-low)));border:1px solid var(--pdx-shell-card-border, var(--pdx-dashboard-card-border, var(--md-sys-color-outline-variant)));border-radius:var(--pdx-shell-card-radius, 12px);box-shadow:var(--pdx-shell-card-shadow, 0 4px 12px rgba(15, 23, 42, .06));overflow:hidden}.pdx-shell-header{display:flex;align-items:center;gap:10px;padding:8px 10px 7px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var(--pdx-shell-header-bg, var(--md-sys-color-surface-container))}.pdx-shell-header--drag-enabled{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pdx-shell-header--drag-enabled:active{cursor:grabbing}.pdx-shell-header--drag-enabled:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,white 28%);outline-offset:-2px}.pdx-shell-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1;color:var(--pdx-shell-title-color, inherit)}.pdx-shell-title mat-icon{color:var(--pdx-shell-icon-color, currentColor)}.pdx-shell-text{min-width:0}.pdx-shell-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 13px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-subtitle{font-size:var(--pdx-shell-subtitle-size, 11px);opacity:.75;color:var(--pdx-shell-subtitle-color, currentColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-actions,.pdx-shell-window-actions{display:flex;align-items:center;gap:4px}.pdx-shell-window-actions{margin-left:auto}.pdx-action-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-action-text{padding:0 8px}.pdx-shell-action--pressed{color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}.pdx-action-label{font-size:12px;font-weight:500}.pdx-shell-body{flex:1;min-height:0;padding:var(--pdx-shell-body-padding, 8px 10px 10px 10px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit)}.pdx-shell.no-shell .pdx-shell-body{padding:0}.pdx-shell-body.hidden{display:none}.pdx-shell.collapsed{height:auto}.pdx-shell.collapsed .pdx-shell-header{border-bottom-color:transparent}.pdx-shell.body-fill .pdx-shell-body,.pdx-shell.body-scroll .pdx-shell-body,.pdx-shell.expanded .pdx-shell-body,.pdx-shell.fullscreen .pdx-shell-body{overflow:auto;display:flex;flex-direction:column;min-height:0}.pdx-shell.collapsed .pdx-shell-body{display:none}.pdx-shell.body-fill .pdx-shell-body{overflow:hidden}.pdx-shell.body-scroll .pdx-shell-body{overflow:auto}.pdx-shell.body-fill .pdx-shell-body>*,.pdx-shell.body-scroll .pdx-shell-body>*,.pdx-shell.expanded .pdx-shell-body>*,.pdx-shell.fullscreen .pdx-shell-body>*{flex:1 1 auto;min-height:0;width:100%}.pdx-shell.expanded{position:fixed;top:10vh;left:50%;width:min(920px,92vw);height:min(640px,82vh);transform:translate(-50%);z-index:var(--praxis-layer-widget-shell-expanded, 1290);box-shadow:var(--mat-elevation-level8)}.pdx-shell.fullscreen{position:fixed;inset:0;width:auto;height:auto;transform:none;border-radius:0;z-index:var(--praxis-layer-widget-shell-fullscreen, 1291);box-shadow:var(--mat-elevation-level8)}.pdx-shell-backdrop{position:fixed;inset:0;z-index:var(--praxis-layer-widget-shell-backdrop, 1280);background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}\n"] }]
|
|
25836
25988
|
}], propDecorators: { hostCollapsed: [{
|
|
25837
25989
|
type: HostBinding,
|
|
25838
25990
|
args: ['class.pdx-widget-shell-collapsed']
|
|
@@ -26010,7 +26162,7 @@ const BUILTIN_PAGE_THEME_PRESETS = {
|
|
|
26010
26162
|
id: 'analytics-calm',
|
|
26011
26163
|
label: 'Analytics Calm',
|
|
26012
26164
|
description: 'Superfícies leves, ênfase clara em dados e motion sutil.',
|
|
26013
|
-
shellPreset: '
|
|
26165
|
+
shellPreset: 'chart-panel',
|
|
26014
26166
|
chartThemePreset: 'executive',
|
|
26015
26167
|
density: 'comfortable',
|
|
26016
26168
|
motion: 'subtle',
|
|
@@ -26027,7 +26179,7 @@ const BUILTIN_PAGE_THEME_PRESETS = {
|
|
|
26027
26179
|
id: 'workspace-balanced',
|
|
26028
26180
|
label: 'Workspace Balanced',
|
|
26029
26181
|
description: 'Equilíbrio entre densidade operacional e clareza visual.',
|
|
26030
|
-
shellPreset: '
|
|
26182
|
+
shellPreset: 'data-panel',
|
|
26031
26183
|
chartThemePreset: 'default',
|
|
26032
26184
|
density: 'comfortable',
|
|
26033
26185
|
motion: 'subtle',
|
|
@@ -26044,7 +26196,7 @@ const BUILTIN_PAGE_THEME_PRESETS = {
|
|
|
26044
26196
|
id: 'ops-monitoring',
|
|
26045
26197
|
label: 'Ops Monitoring',
|
|
26046
26198
|
description: 'Contraste um pouco maior para leitura rápida de status, filas e alertas.',
|
|
26047
|
-
shellPreset: '
|
|
26199
|
+
shellPreset: 'data-panel',
|
|
26048
26200
|
chartThemePreset: 'compact',
|
|
26049
26201
|
density: 'compact',
|
|
26050
26202
|
motion: 'subtle',
|
|
@@ -26061,7 +26213,7 @@ const BUILTIN_PAGE_THEME_PRESETS = {
|
|
|
26061
26213
|
id: 'executive-command-center',
|
|
26062
26214
|
label: 'Executive Command Center',
|
|
26063
26215
|
description: 'Superfície premium para dashboards corporativos com hierarquia executiva, dados densos e ações de decisão.',
|
|
26064
|
-
shellPreset: '
|
|
26216
|
+
shellPreset: 'executive-card',
|
|
26065
26217
|
chartThemePreset: 'executive',
|
|
26066
26218
|
density: 'compact',
|
|
26067
26219
|
motion: 'subtle',
|
|
@@ -31033,9 +31185,18 @@ class DynamicWidgetPageComponent {
|
|
|
31033
31185
|
if (!widget.shell) {
|
|
31034
31186
|
return runtimeEnrichedWidget;
|
|
31035
31187
|
}
|
|
31188
|
+
const widgetTemplateContext = {
|
|
31189
|
+
...templateContext,
|
|
31190
|
+
widget: {
|
|
31191
|
+
key: widget.key,
|
|
31192
|
+
definition: this.cloneStateValues(widget.definition),
|
|
31193
|
+
inputs: this.cloneStateValues(widget.definition?.inputs || {}),
|
|
31194
|
+
shell: this.cloneStateValues(widget.shell || {}),
|
|
31195
|
+
},
|
|
31196
|
+
};
|
|
31036
31197
|
return {
|
|
31037
31198
|
...runtimeEnrichedWidget,
|
|
31038
|
-
shell: this.resolveTemplate(widget.shell,
|
|
31199
|
+
shell: this.resolveTemplate(widget.shell, widgetTemplateContext),
|
|
31039
31200
|
};
|
|
31040
31201
|
});
|
|
31041
31202
|
}
|
|
@@ -31412,6 +31573,8 @@ class DynamicWidgetPageComponent {
|
|
|
31412
31573
|
void this.confirmAndRemoveWidget(fromKey);
|
|
31413
31574
|
return;
|
|
31414
31575
|
}
|
|
31576
|
+
if (this.handleToggleInputCommand(fromKey, evt))
|
|
31577
|
+
return;
|
|
31415
31578
|
if (this.handleSetInputCommand(fromKey, evt))
|
|
31416
31579
|
return;
|
|
31417
31580
|
const output = evt?.emit || (evt?.id ? `shell:${evt.id}` : undefined);
|
|
@@ -31436,6 +31599,32 @@ class DynamicWidgetPageComponent {
|
|
|
31436
31599
|
this.widgets.set(widgets);
|
|
31437
31600
|
return true;
|
|
31438
31601
|
}
|
|
31602
|
+
handleToggleInputCommand(fromKey, evt) {
|
|
31603
|
+
if (evt?.command !== 'pdx:toggle-input')
|
|
31604
|
+
return false;
|
|
31605
|
+
const payload = evt?.payload;
|
|
31606
|
+
const input = typeof payload?.input === 'string' ? payload.input.trim() : '';
|
|
31607
|
+
if (!input)
|
|
31608
|
+
return true;
|
|
31609
|
+
const page = this.ensurePageDefinition();
|
|
31610
|
+
const widget = (page.widgets || []).find((candidate) => candidate.key === fromKey);
|
|
31611
|
+
const currentValue = this.lookup(widget?.definition?.inputs || {}, input);
|
|
31612
|
+
const nextValue = !Boolean(currentValue);
|
|
31613
|
+
const result = this.applyWidgetInputPatchToPage(page, fromKey, {
|
|
31614
|
+
ownerWidgetKey: fromKey,
|
|
31615
|
+
sourceComponentId: 'widget-shell',
|
|
31616
|
+
output: evt.emit || `shell:${evt.id}`,
|
|
31617
|
+
payload: {
|
|
31618
|
+
inputPatch: {
|
|
31619
|
+
[input]: nextValue,
|
|
31620
|
+
},
|
|
31621
|
+
},
|
|
31622
|
+
});
|
|
31623
|
+
if (result.changed) {
|
|
31624
|
+
this.applyPageUpdate(result.page, true, undefined, false, true);
|
|
31625
|
+
}
|
|
31626
|
+
return true;
|
|
31627
|
+
}
|
|
31439
31628
|
mergeOrder(keys) {
|
|
31440
31629
|
const seen = new Set();
|
|
31441
31630
|
const out = [];
|