@educarehq/solaris-ui 0.23.0 → 0.24.0
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.
|
@@ -2855,6 +2855,29 @@ const DATA_ICONS = [
|
|
|
2855
2855
|
{ type: 'path', d: 'm2 2 20 20' },
|
|
2856
2856
|
],
|
|
2857
2857
|
},
|
|
2858
|
+
{
|
|
2859
|
+
name: 'cookie',
|
|
2860
|
+
viewBox: '0 0 24 24',
|
|
2861
|
+
fill: 'none',
|
|
2862
|
+
stroke: 'currentColor',
|
|
2863
|
+
strokeWidth: 2,
|
|
2864
|
+
strokeLinecap: 'round',
|
|
2865
|
+
strokeLinejoin: 'round',
|
|
2866
|
+
elements: [
|
|
2867
|
+
{ type: 'path', d: 'M11 17h.01' },
|
|
2868
|
+
{
|
|
2869
|
+
type: 'path',
|
|
2870
|
+
d: 'M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2',
|
|
2871
|
+
},
|
|
2872
|
+
{ type: 'path', d: 'M12 12h.01' },
|
|
2873
|
+
{ type: 'path', d: 'M16 16h.01' },
|
|
2874
|
+
{ type: 'path', d: 'M16 3h.01' },
|
|
2875
|
+
{ type: 'path', d: 'M21 4h.01' },
|
|
2876
|
+
{ type: 'path', d: 'M21 8h.01' },
|
|
2877
|
+
{ type: 'path', d: 'M7 14h.01' },
|
|
2878
|
+
{ type: 'path', d: 'M9 8h.01' },
|
|
2879
|
+
],
|
|
2880
|
+
},
|
|
2858
2881
|
];
|
|
2859
2882
|
|
|
2860
2883
|
const SOLARIS_BUILT_IN_ICONS = [
|
|
@@ -13710,22 +13733,35 @@ const SOLARIS_DIALOG_DATA = new InjectionToken('SolarisDialogData');
|
|
|
13710
13733
|
const SOLARIS_DIALOG_REF = new InjectionToken('SolarisDialogRef');
|
|
13711
13734
|
|
|
13712
13735
|
class SolarisDialogContentComponent {
|
|
13736
|
+
density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
|
|
13713
13737
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13714
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
13738
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: SolarisDialogContentComponent, isStandalone: true, selector: "solaris-dialog-content", inputs: { density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-density": "density()" }, classAttribute: "solaris-dialog-content" }, ngImport: i0, template: "<div class=\"solaris-dialog-content__inner\">\n <ng-content />\n</div>\n", styles: [":host{display:block;flex:1;overflow-y:auto;padding:var(--solaris-spacing-0);min-height:0}:host([data-density=compact]){padding:var(--solaris-spacing-2)}:host([data-density=normal]){padding:var(--solaris-spacing-4)}:host([data-density=comfortable]){padding:var(--solaris-spacing-6)}.solaris-dialog-content__inner{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13715
13739
|
}
|
|
13716
13740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContentComponent, decorators: [{
|
|
13717
13741
|
type: Component,
|
|
13718
13742
|
args: [{ selector: 'solaris-dialog-content', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13719
13743
|
class: 'solaris-dialog-content',
|
|
13720
|
-
|
|
13721
|
-
|
|
13744
|
+
'[attr.data-density]': 'density()',
|
|
13745
|
+
}, template: "<div class=\"solaris-dialog-content__inner\">\n <ng-content />\n</div>\n", styles: [":host{display:block;flex:1;overflow-y:auto;padding:var(--solaris-spacing-0);min-height:0}:host([data-density=compact]){padding:var(--solaris-spacing-2)}:host([data-density=normal]){padding:var(--solaris-spacing-4)}:host([data-density=comfortable]){padding:var(--solaris-spacing-6)}.solaris-dialog-content__inner{height:100%}\n"] }]
|
|
13746
|
+
}], propDecorators: { density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }] } });
|
|
13722
13747
|
|
|
13723
13748
|
class SolarisDialogActionsComponent {
|
|
13724
13749
|
dialogRef = inject(SOLARIS_DIALOG_REF);
|
|
13750
|
+
translateService = inject(SolarisTranslateService, {
|
|
13751
|
+
optional: true,
|
|
13752
|
+
});
|
|
13725
13753
|
actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
13726
13754
|
align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
13727
13755
|
stack = input('auto', ...(ngDevMode ? [{ debugName: "stack" }] : /* istanbul ignore next */ []));
|
|
13756
|
+
separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
13757
|
+
density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
|
|
13728
13758
|
actionExecuted = output();
|
|
13759
|
+
resolvedLabel(action) {
|
|
13760
|
+
if (action.labelKey) {
|
|
13761
|
+
return this.translateService?.translate(action.labelKey) ?? action.label;
|
|
13762
|
+
}
|
|
13763
|
+
return action.label;
|
|
13764
|
+
}
|
|
13729
13765
|
handleAction(action) {
|
|
13730
13766
|
const executeAction = () => {
|
|
13731
13767
|
if (action.action) {
|
|
@@ -13742,54 +13778,52 @@ class SolarisDialogActionsComponent {
|
|
|
13742
13778
|
this.actionExecuted.emit(action);
|
|
13743
13779
|
}
|
|
13744
13780
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13745
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogActionsComponent, isStandalone: true, selector: "solaris-dialog-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted" }, host: { properties: { "attr.data-align": "align()", "attr.data-stack": "stack()" }, classAttribute: "solaris-dialog-actions" }, ngImport: i0, template: "<div class=\"solaris-dialog-actions__inner\">\n @for (action of actions(); track $index) {\n <button\n type=\"button\"\n solaris-button\n (click)=\"handleAction(action)\"\n [color]=\"action.color ?? 'neutral'\"\n [disabled]=\"action.disabled ?? false\"\n [appearance]=\"action.appearance ?? 'solid'\"\n >\n {{ action
|
|
13781
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogActionsComponent, isStandalone: true, selector: "solaris-dialog-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted" }, host: { properties: { "attr.data-align": "align()", "attr.data-stack": "stack()", "attr.data-separator": "separator() ? '' : null", "attr.data-density": "density()" }, classAttribute: "solaris-dialog-actions" }, ngImport: i0, template: "<div class=\"solaris-dialog-actions__inner\">\n @for (action of actions(); track $index) {\n <button\n type=\"button\"\n solaris-button\n [icon]=\"action.icon\"\n (click)=\"handleAction(action)\"\n [radius]=\"action.radius ?? 'md'\"\n [shape]=\"action.shape ?? 'wide'\"\n [color]=\"action.color ?? 'neutral'\"\n [loading]=\"action.loading ?? false\"\n [disabled]=\"action.disabled ?? false\"\n [attr.data-autofocus]=\"action.autoFocus ? '' : null\"\n [density]=\"action.density ?? 'compact'\"\n [appearance]=\"action.appearance ?? 'solid'\"\n [iconPosition]=\"action.iconPosition ?? 'start'\"\n >\n {{ resolvedLabel(action) }}\n </button>\n }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-0);--solaris-dialog-actions-border-color: var(--solaris-border-default)}:host([data-separator]){border-top:var(--solaris-border-width-sm) solid var(--solaris-dialog-actions-border-color)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-density=compact]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-1)}:host([data-density=normal]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-2)}:host([data-density=comfortable]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-3)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["iconPosition", "appearance", "color", "shape", "radius", "density", "fullWidth", "disabled", "loading", "loadingLabelKey", "loadingLabel", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13746
13782
|
}
|
|
13747
13783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogActionsComponent, decorators: [{
|
|
13748
13784
|
type: Component,
|
|
13749
13785
|
args: [{ selector: 'solaris-dialog-actions', standalone: true, imports: [SolarisButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13750
13786
|
'[attr.data-align]': 'align()',
|
|
13751
13787
|
'[attr.data-stack]': 'stack()',
|
|
13788
|
+
'[attr.data-separator]': "separator() ? '' : null",
|
|
13789
|
+
'[attr.data-density]': 'density()',
|
|
13752
13790
|
class: 'solaris-dialog-actions',
|
|
13753
|
-
}, template: "<div class=\"solaris-dialog-actions__inner\">\n @for (action of actions(); track $index) {\n <button\n type=\"button\"\n solaris-button\n (click)=\"handleAction(action)\"\n [color]=\"action.color ?? 'neutral'\"\n [disabled]=\"action.disabled ?? false\"\n [appearance]=\"action.appearance ?? 'solid'\"\n >\n {{ action
|
|
13754
|
-
}], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], actionExecuted: [{ type: i0.Output, args: ["actionExecuted"] }] } });
|
|
13791
|
+
}, template: "<div class=\"solaris-dialog-actions__inner\">\n @for (action of actions(); track $index) {\n <button\n type=\"button\"\n solaris-button\n [icon]=\"action.icon\"\n (click)=\"handleAction(action)\"\n [radius]=\"action.radius ?? 'md'\"\n [shape]=\"action.shape ?? 'wide'\"\n [color]=\"action.color ?? 'neutral'\"\n [loading]=\"action.loading ?? false\"\n [disabled]=\"action.disabled ?? false\"\n [attr.data-autofocus]=\"action.autoFocus ? '' : null\"\n [density]=\"action.density ?? 'compact'\"\n [appearance]=\"action.appearance ?? 'solid'\"\n [iconPosition]=\"action.iconPosition ?? 'start'\"\n >\n {{ resolvedLabel(action) }}\n </button>\n }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-0);--solaris-dialog-actions-border-color: var(--solaris-border-default)}:host([data-separator]){border-top:var(--solaris-border-width-sm) solid var(--solaris-dialog-actions-border-color)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-density=compact]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-1)}:host([data-density=normal]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-2)}:host([data-density=comfortable]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-3)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"] }]
|
|
13792
|
+
}], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], actionExecuted: [{ type: i0.Output, args: ["actionExecuted"] }] } });
|
|
13755
13793
|
|
|
13794
|
+
let nextDialogHeaderId = 0;
|
|
13756
13795
|
class SolarisDialogHeaderComponent {
|
|
13757
|
-
dialogRef = inject(SOLARIS_DIALOG_REF
|
|
13758
|
-
translateService = inject(SolarisTranslateService, {
|
|
13796
|
+
dialogRef = inject(SOLARIS_DIALOG_REF, {
|
|
13759
13797
|
optional: true,
|
|
13760
13798
|
});
|
|
13761
13799
|
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
13762
13800
|
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
13763
13801
|
description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
13764
|
-
closeable = input(true, ...(ngDevMode ? [{ debugName: "closeable" }] : /* istanbul ignore next */ []));
|
|
13765
|
-
closeLabel = input('Close', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
13766
|
-
closeLabelKey = input(...(ngDevMode ? [undefined, { debugName: "closeLabelKey" }] : /* istanbul ignore next */ []));
|
|
13767
13802
|
iconDecorative = input(false, ...(ngDevMode ? [{ debugName: "iconDecorative" }] : /* istanbul ignore next */ []));
|
|
13768
|
-
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
13769
13803
|
variant = input('neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
13770
|
-
|
|
13804
|
+
separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
13805
|
+
idPrefix = this.dialogRef?.id ?? `solaris-dialog-${++nextDialogHeaderId}`;
|
|
13806
|
+
titleId = `${this.idPrefix}-title`;
|
|
13807
|
+
descriptionId = `${this.idPrefix}-description`;
|
|
13771
13808
|
hasTitle = () => !!this.title();
|
|
13772
13809
|
hasDescription = () => !!this.description();
|
|
13773
13810
|
hasIcon = () => !!this.icon();
|
|
13774
|
-
resolvedCloseLabel = () => this.closeLabelKey()
|
|
13775
|
-
? (this.translateService?.translate(this.closeLabelKey()) ??
|
|
13776
|
-
this.closeLabel())
|
|
13777
|
-
: this.closeLabel();
|
|
13778
|
-
close() {
|
|
13779
|
-
this.dialogRef.close();
|
|
13780
|
-
}
|
|
13781
13811
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13782
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogHeaderComponent, isStandalone: true, selector: "solaris-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null },
|
|
13812
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogHeaderComponent, isStandalone: true, selector: "solaris-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, iconDecorative: { classPropertyName: "iconDecorative", publicName: "iconDecorative", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-dialog-header" }, ngImport: i0, template: "<div class=\"solaris-dialog-header__start\">\n @if (hasIcon()) {\n <div class=\"solaris-dialog-header__icon\">\n <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n </div>\n }\n\n <div class=\"solaris-dialog-header__text\">\n @if (hasTitle()) {\n <h2 class=\"solaris-dialog-header__title\" [attr.id]=\"titleId\">\n {{ title() }}\n </h2>\n }\n\n @if (hasDescription()) {\n <p class=\"solaris-dialog-header__description\" [attr.id]=\"descriptionId\">\n {{ description() }}\n </p>\n }\n </div>\n</div>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--solaris-spacing-0);padding:var(--solaris-spacing-0);--solaris-dialog-icon-color: var(--solaris-text-muted);--solaris-dialog-media-size: var(--solaris-spacing-8);--solaris-dialog-icon-size: var(--solaris-font-size-2xl);--solaris-dialog-header-border-color: var(--solaris-border-default)}:host([data-separator]){padding-block-end:var(--solaris-spacing-3);border-bottom:var(--solaris-border-width-sm) solid var(--solaris-dialog-header-border-color)}:host([data-variant=info]){--solaris-dialog-icon-color: var(--solaris-info-base)}:host([data-variant=success]){--solaris-dialog-icon-color: var(--solaris-success-base)}:host([data-variant=warning]){--solaris-dialog-icon-color: var(--solaris-warning-base)}:host([data-variant=danger]){--solaris-dialog-icon-color: var(--solaris-danger-base)}.solaris-dialog-header__start{flex:1;min-width:0;display:flex;align-items:center}.solaris-dialog-header__icon{flex-shrink:0;padding-left:var(--solaris-spacing-3);color:var(--solaris-dialog-icon-color)}.solaris-dialog-header__icon solaris-icon,.solaris-dialog-header__icon svg{display:block;width:var(--solaris-dialog-icon-size);height:var(--solaris-dialog-icon-size)}.solaris-dialog-header__text{flex:1;min-width:0}.solaris-dialog-header__title{margin:0;color:var(--solaris-text-strong);padding:var(--solaris-spacing-3) 0 0 var(--solaris-spacing-3);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}.solaris-dialog-header__description{color:var(--solaris-text-muted);padding:0 var(--solaris-spacing-3);margin:var(--solaris-spacing-1) 0 0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13783
13813
|
}
|
|
13784
13814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogHeaderComponent, decorators: [{
|
|
13785
13815
|
type: Component,
|
|
13786
13816
|
args: [{ selector: 'solaris-dialog-header', standalone: true, imports: [SolarisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13787
13817
|
class: 'solaris-dialog-header',
|
|
13788
13818
|
'[attr.data-variant]': 'variant()',
|
|
13789
|
-
|
|
13790
|
-
|
|
13819
|
+
'[attr.data-separator]': "separator() ? '' : null",
|
|
13820
|
+
}, template: "<div class=\"solaris-dialog-header__start\">\n @if (hasIcon()) {\n <div class=\"solaris-dialog-header__icon\">\n <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n </div>\n }\n\n <div class=\"solaris-dialog-header__text\">\n @if (hasTitle()) {\n <h2 class=\"solaris-dialog-header__title\" [attr.id]=\"titleId\">\n {{ title() }}\n </h2>\n }\n\n @if (hasDescription()) {\n <p class=\"solaris-dialog-header__description\" [attr.id]=\"descriptionId\">\n {{ description() }}\n </p>\n }\n </div>\n</div>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--solaris-spacing-0);padding:var(--solaris-spacing-0);--solaris-dialog-icon-color: var(--solaris-text-muted);--solaris-dialog-media-size: var(--solaris-spacing-8);--solaris-dialog-icon-size: var(--solaris-font-size-2xl);--solaris-dialog-header-border-color: var(--solaris-border-default)}:host([data-separator]){padding-block-end:var(--solaris-spacing-3);border-bottom:var(--solaris-border-width-sm) solid var(--solaris-dialog-header-border-color)}:host([data-variant=info]){--solaris-dialog-icon-color: var(--solaris-info-base)}:host([data-variant=success]){--solaris-dialog-icon-color: var(--solaris-success-base)}:host([data-variant=warning]){--solaris-dialog-icon-color: var(--solaris-warning-base)}:host([data-variant=danger]){--solaris-dialog-icon-color: var(--solaris-danger-base)}.solaris-dialog-header__start{flex:1;min-width:0;display:flex;align-items:center}.solaris-dialog-header__icon{flex-shrink:0;padding-left:var(--solaris-spacing-3);color:var(--solaris-dialog-icon-color)}.solaris-dialog-header__icon solaris-icon,.solaris-dialog-header__icon svg{display:block;width:var(--solaris-dialog-icon-size);height:var(--solaris-dialog-icon-size)}.solaris-dialog-header__text{flex:1;min-width:0}.solaris-dialog-header__title{margin:0;color:var(--solaris-text-strong);padding:var(--solaris-spacing-3) 0 0 var(--solaris-spacing-3);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}.solaris-dialog-header__description{color:var(--solaris-text-muted);padding:0 var(--solaris-spacing-3);margin:var(--solaris-spacing-1) 0 0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}\n"] }]
|
|
13821
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], iconDecorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconDecorative", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
|
|
13791
13822
|
|
|
13792
13823
|
class SolarisDialogComponent {
|
|
13824
|
+
translateService = inject(SolarisTranslateService, {
|
|
13825
|
+
optional: true,
|
|
13826
|
+
});
|
|
13793
13827
|
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
13794
13828
|
hasActions = computed(() => {
|
|
13795
13829
|
const actions = this.options().actions;
|
|
@@ -13798,15 +13832,36 @@ class SolarisDialogComponent {
|
|
|
13798
13832
|
actionsAlign = computed(() => this.options().actionsAlign ?? 'end', ...(ngDevMode ? [{ debugName: "actionsAlign" }] : /* istanbul ignore next */ []));
|
|
13799
13833
|
actionsStack = computed(() => this.options().actionsStack ?? 'auto', ...(ngDevMode ? [{ debugName: "actionsStack" }] : /* istanbul ignore next */ []));
|
|
13800
13834
|
iconDecorative = computed(() => this.options().iconDecorative ?? false, ...(ngDevMode ? [{ debugName: "iconDecorative" }] : /* istanbul ignore next */ []));
|
|
13801
|
-
closeable = computed(() => this.options().closeable ?? true, ...(ngDevMode ? [{ debugName: "closeable" }] : /* istanbul ignore next */ []));
|
|
13802
|
-
closeLabel = computed(() => this.options().closeLabel ?? 'Close', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
13803
|
-
size = computed(() => this.options().size ?? 'md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
13804
13835
|
variant = computed(() => this.options().variant ?? 'neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
13836
|
+
headerSeparator = computed(() => this.options().headerSeparator ?? true, ...(ngDevMode ? [{ debugName: "headerSeparator" }] : /* istanbul ignore next */ []));
|
|
13837
|
+
footerSeparator = computed(() => this.options().footerSeparator ?? true, ...(ngDevMode ? [{ debugName: "footerSeparator" }] : /* istanbul ignore next */ []));
|
|
13838
|
+
actionsShape = computed(() => this.options().actionsShape, ...(ngDevMode ? [{ debugName: "actionsShape" }] : /* istanbul ignore next */ []));
|
|
13839
|
+
actionsDensity = computed(() => this.options().actionsDensity, ...(ngDevMode ? [{ debugName: "actionsDensity" }] : /* istanbul ignore next */ []));
|
|
13840
|
+
actionsRadius = computed(() => this.options().actionsRadius, ...(ngDevMode ? [{ debugName: "actionsRadius" }] : /* istanbul ignore next */ []));
|
|
13841
|
+
density = computed(() => this.options().density, ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
|
|
13805
13842
|
description = computed(() => this.options().description, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
13806
13843
|
title = computed(() => this.options().title, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
13807
13844
|
icon = computed(() => this.options().icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
13845
|
+
resolvedTitle = computed(() => {
|
|
13846
|
+
const titleKey = this.options().titleKey;
|
|
13847
|
+
if (titleKey) {
|
|
13848
|
+
return this.translateService?.translate(titleKey) ?? this.options().title;
|
|
13849
|
+
}
|
|
13850
|
+
return this.title();
|
|
13851
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : /* istanbul ignore next */ []));
|
|
13852
|
+
resolvedDescription = computed(() => {
|
|
13853
|
+
const descriptionKey = this.options().descriptionKey;
|
|
13854
|
+
if (descriptionKey) {
|
|
13855
|
+
return (this.translateService?.translate(descriptionKey) ??
|
|
13856
|
+
this.options().description);
|
|
13857
|
+
}
|
|
13858
|
+
return this.description();
|
|
13859
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedDescription" }] : /* istanbul ignore next */ []));
|
|
13808
13860
|
actions = computed(() => {
|
|
13809
13861
|
const variant = this.variant();
|
|
13862
|
+
const shape = this.actionsShape();
|
|
13863
|
+
const density = this.actionsDensity();
|
|
13864
|
+
const radius = this.actionsRadius();
|
|
13810
13865
|
return (this.options().actions ?? []).map((action) => {
|
|
13811
13866
|
const appearance = action.appearance ?? 'solid';
|
|
13812
13867
|
const hasExplicitColor = action.color !== undefined;
|
|
@@ -13815,11 +13870,17 @@ class SolarisDialogComponent {
|
|
|
13815
13870
|
: appearance === 'solid'
|
|
13816
13871
|
? variant
|
|
13817
13872
|
: undefined;
|
|
13818
|
-
return {
|
|
13873
|
+
return {
|
|
13874
|
+
...action,
|
|
13875
|
+
color,
|
|
13876
|
+
shape: action.shape ?? shape,
|
|
13877
|
+
density: action.density ?? density,
|
|
13878
|
+
radius: action.radius ?? radius,
|
|
13879
|
+
};
|
|
13819
13880
|
});
|
|
13820
13881
|
}, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
13821
13882
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13822
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogComponent, isStandalone: true, selector: "solaris-dialog", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.role": "null" }, classAttribute: "solaris-dialog" }, ngImport: i0, template: "<solaris-dialog-header\n [icon]=\"icon()\"\n [
|
|
13883
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogComponent, isStandalone: true, selector: "solaris-dialog", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.role": "null" }, classAttribute: "solaris-dialog" }, ngImport: i0, template: "<solaris-dialog-header\n [icon]=\"icon()\"\n [title]=\"resolvedTitle()\"\n [variant]=\"variant()\"\n [description]=\"resolvedDescription()\"\n [separator]=\"headerSeparator()\"\n [iconDecorative]=\"iconDecorative()\"\n/>\n\n@if (resolvedDescription() && !hasActions()) {\n <solaris-dialog-content [density]=\"density()\">\n <p class=\"solaris-dialog__description-text\">{{ resolvedDescription() }}</p>\n </solaris-dialog-content>\n}\n\n@if (hasActions()) {\n <div class=\"solaris-dialog__body\"></div>\n <solaris-dialog-actions\n [actions]=\"actions()\"\n [align]=\"actionsAlign()\"\n [stack]=\"actionsStack()\"\n [separator]=\"footerSeparator()\"\n [density]=\"density()\"\n />\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;max-height:100%}.solaris-dialog__description-text{margin:0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog__body{flex:1;min-height:0;overflow-y:auto}\n"], dependencies: [{ kind: "component", type: SolarisDialogHeaderComponent, selector: "solaris-dialog-header", inputs: ["icon", "title", "description", "iconDecorative", "variant", "separator"] }, { kind: "component", type: SolarisDialogContentComponent, selector: "solaris-dialog-content", inputs: ["density"] }, { kind: "component", type: SolarisDialogActionsComponent, selector: "solaris-dialog-actions", inputs: ["actions", "align", "stack", "separator", "density"], outputs: ["actionExecuted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13823
13884
|
}
|
|
13824
13885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogComponent, decorators: [{
|
|
13825
13886
|
type: Component,
|
|
@@ -13830,26 +13891,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
13830
13891
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13831
13892
|
class: 'solaris-dialog',
|
|
13832
13893
|
'[attr.role]': 'null',
|
|
13833
|
-
}, template: "<solaris-dialog-header\n [icon]=\"icon()\"\n [
|
|
13894
|
+
}, template: "<solaris-dialog-header\n [icon]=\"icon()\"\n [title]=\"resolvedTitle()\"\n [variant]=\"variant()\"\n [description]=\"resolvedDescription()\"\n [separator]=\"headerSeparator()\"\n [iconDecorative]=\"iconDecorative()\"\n/>\n\n@if (resolvedDescription() && !hasActions()) {\n <solaris-dialog-content [density]=\"density()\">\n <p class=\"solaris-dialog__description-text\">{{ resolvedDescription() }}</p>\n </solaris-dialog-content>\n}\n\n@if (hasActions()) {\n <div class=\"solaris-dialog__body\"></div>\n <solaris-dialog-actions\n [actions]=\"actions()\"\n [align]=\"actionsAlign()\"\n [stack]=\"actionsStack()\"\n [separator]=\"footerSeparator()\"\n [density]=\"density()\"\n />\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;max-height:100%}.solaris-dialog__description-text{margin:0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog__body{flex:1;min-height:0;overflow-y:auto}\n"] }]
|
|
13834
13895
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
|
|
13835
13896
|
|
|
13897
|
+
// SECURITY_EXCEPTION_FILE: ElementRef.nativeElement is the standard Angular API to read the panel element for focus management (panel.focus() and [data-autofocus] lookup). No alternative exists.
|
|
13836
13898
|
class SolarisDialogContainerComponent {
|
|
13837
13899
|
dialogRef = inject(SOLARIS_DIALOG_REF);
|
|
13838
13900
|
injector = inject(Injector);
|
|
13901
|
+
themeService = inject(SolarisThemeService, {
|
|
13902
|
+
optional: true,
|
|
13903
|
+
});
|
|
13904
|
+
translateService = inject(SolarisTranslateService, {
|
|
13905
|
+
optional: true,
|
|
13906
|
+
});
|
|
13839
13907
|
externalComponent = input(null, ...(ngDevMode ? [{ debugName: "externalComponent" }] : /* istanbul ignore next */ []));
|
|
13840
13908
|
simpleOptions = input(null, ...(ngDevMode ? [{ debugName: "simpleOptions" }] : /* istanbul ignore next */ []));
|
|
13841
13909
|
externalComponentConfig = input(null, ...(ngDevMode ? [{ debugName: "externalComponentConfig" }] : /* istanbul ignore next */ []));
|
|
13842
13910
|
_componentHost = viewChild('componentHost', { ...(ngDevMode ? { debugName: "_componentHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
|
|
13911
|
+
_dialogPanel = viewChild('dialogPanel', ...(ngDevMode ? [{ debugName: "_dialogPanel" }] : /* istanbul ignore next */ []));
|
|
13912
|
+
_focusTrap = viewChild(CdkTrapFocus, ...(ngDevMode ? [{ debugName: "_focusTrap" }] : /* istanbul ignore next */ []));
|
|
13843
13913
|
componentRef = null;
|
|
13844
13914
|
get hostAppearance() {
|
|
13845
13915
|
if (this.simpleOptions())
|
|
13846
|
-
return this.simpleOptions()?.appearance ?? '
|
|
13847
|
-
return this.externalComponentConfig()?.appearance ?? '
|
|
13916
|
+
return this.simpleOptions()?.appearance ?? 'outline';
|
|
13917
|
+
return this.externalComponentConfig()?.appearance ?? 'outline';
|
|
13848
13918
|
}
|
|
13849
|
-
get
|
|
13850
|
-
|
|
13851
|
-
|
|
13852
|
-
|
|
13919
|
+
get hostFullscreen() {
|
|
13920
|
+
const fullscreen = this.simpleOptions()
|
|
13921
|
+
? (this.simpleOptions()?.fullscreen ?? false)
|
|
13922
|
+
: (this.externalComponentConfig()?.fullscreen ?? false);
|
|
13923
|
+
return fullscreen ? '' : null;
|
|
13853
13924
|
}
|
|
13854
13925
|
get hostVariant() {
|
|
13855
13926
|
if (this.simpleOptions())
|
|
@@ -13866,22 +13937,79 @@ class SolarisDialogContainerComponent {
|
|
|
13866
13937
|
return this.simpleOptions()?.backdrop ?? true;
|
|
13867
13938
|
return this.externalComponentConfig()?.backdrop ?? true;
|
|
13868
13939
|
}
|
|
13940
|
+
get hostRadius() {
|
|
13941
|
+
if (this.simpleOptions())
|
|
13942
|
+
return this.simpleOptions()?.radius ?? 'lg';
|
|
13943
|
+
return this.externalComponentConfig()?.radius ?? 'lg';
|
|
13944
|
+
}
|
|
13945
|
+
get hostDensity() {
|
|
13946
|
+
if (this.simpleOptions())
|
|
13947
|
+
return (this.simpleOptions()?.density ?? this.themeService?.density ?? 'normal');
|
|
13948
|
+
return (this.externalComponentConfig()?.density ??
|
|
13949
|
+
this.themeService?.density ??
|
|
13950
|
+
'normal');
|
|
13951
|
+
}
|
|
13952
|
+
get hostHeaderSeparator() {
|
|
13953
|
+
const separator = this.simpleOptions()
|
|
13954
|
+
? (this.simpleOptions()?.headerSeparator ?? true)
|
|
13955
|
+
: (this.externalComponentConfig()?.headerSeparator ?? true);
|
|
13956
|
+
return separator ? '' : null;
|
|
13957
|
+
}
|
|
13958
|
+
get hostFooterSeparator() {
|
|
13959
|
+
const separator = this.simpleOptions()
|
|
13960
|
+
? (this.simpleOptions()?.footerSeparator ?? true)
|
|
13961
|
+
: (this.externalComponentConfig()?.footerSeparator ?? true);
|
|
13962
|
+
return separator ? '' : null;
|
|
13963
|
+
}
|
|
13869
13964
|
get closeable() {
|
|
13870
13965
|
if (this.simpleOptions())
|
|
13871
13966
|
return this.simpleOptions()?.closeable ?? true;
|
|
13872
13967
|
return this.externalComponentConfig()?.closeable ?? true;
|
|
13873
13968
|
}
|
|
13874
|
-
get
|
|
13875
|
-
|
|
13876
|
-
|
|
13969
|
+
get panelAriaLabel() {
|
|
13970
|
+
const options = this.simpleOptions();
|
|
13971
|
+
if (!options)
|
|
13972
|
+
return null;
|
|
13973
|
+
if (options.ariaLabelKey) {
|
|
13974
|
+
return (this.translateService?.translate(options.ariaLabelKey) ??
|
|
13975
|
+
options.ariaLabel ??
|
|
13976
|
+
null);
|
|
13877
13977
|
}
|
|
13878
|
-
return
|
|
13978
|
+
return options.ariaLabel ?? null;
|
|
13879
13979
|
}
|
|
13880
|
-
get
|
|
13881
|
-
|
|
13882
|
-
|
|
13980
|
+
get panelAriaLabelledBy() {
|
|
13981
|
+
const options = this.simpleOptions();
|
|
13982
|
+
if (!options)
|
|
13983
|
+
return null;
|
|
13984
|
+
if (options.ariaLabelledBy)
|
|
13985
|
+
return options.ariaLabelledBy;
|
|
13986
|
+
if (options.ariaLabel ?? options.ariaLabelKey)
|
|
13987
|
+
return null;
|
|
13988
|
+
if (!options.title && !options.titleKey)
|
|
13989
|
+
return null;
|
|
13990
|
+
return `${this.dialogRef.id}-title`;
|
|
13991
|
+
}
|
|
13992
|
+
get panelAriaDescribedBy() {
|
|
13993
|
+
const options = this.simpleOptions();
|
|
13994
|
+
if (!options)
|
|
13995
|
+
return null;
|
|
13996
|
+
if (options.ariaDescribedBy)
|
|
13997
|
+
return options.ariaDescribedBy;
|
|
13998
|
+
if (!options.description && !options.descriptionKey)
|
|
13999
|
+
return null;
|
|
14000
|
+
return `${this.dialogRef.id}-description`;
|
|
14001
|
+
}
|
|
14002
|
+
get resolvedCloseLabel() {
|
|
14003
|
+
const closeLabelKey = this.simpleOptions()
|
|
14004
|
+
? this.simpleOptions()?.closeLabelKey
|
|
14005
|
+
: this.externalComponentConfig()?.closeLabelKey;
|
|
14006
|
+
const closeLabel = this.simpleOptions()
|
|
14007
|
+
? (this.simpleOptions()?.closeLabel ?? 'Close')
|
|
14008
|
+
: (this.externalComponentConfig()?.closeLabel ?? 'Close');
|
|
14009
|
+
if (closeLabelKey) {
|
|
14010
|
+
return (this.translateService?.translate(closeLabelKey) ?? closeLabel ?? 'Close');
|
|
13883
14011
|
}
|
|
13884
|
-
return
|
|
14012
|
+
return closeLabel;
|
|
13885
14013
|
}
|
|
13886
14014
|
get panelWidth() {
|
|
13887
14015
|
if (this.simpleOptions())
|
|
@@ -13933,6 +14061,11 @@ class SolarisDialogContainerComponent {
|
|
|
13933
14061
|
return this.simpleOptions()?.role ?? 'dialog';
|
|
13934
14062
|
return this.externalComponentConfig()?.role ?? 'dialog';
|
|
13935
14063
|
}
|
|
14064
|
+
get resolvedAutoFocus() {
|
|
14065
|
+
if (this.simpleOptions())
|
|
14066
|
+
return this.simpleOptions()?.autoFocus ?? 'first-tabbable';
|
|
14067
|
+
return this.externalComponentConfig()?.autoFocus ?? 'first-tabbable';
|
|
14068
|
+
}
|
|
13936
14069
|
constructor() {
|
|
13937
14070
|
effect(() => {
|
|
13938
14071
|
const comp = this.externalComponent();
|
|
@@ -13963,6 +14096,27 @@ class SolarisDialogContainerComponent {
|
|
|
13963
14096
|
});
|
|
13964
14097
|
this.dialogRef.componentInstance = this.componentRef.instance;
|
|
13965
14098
|
}
|
|
14099
|
+
ngAfterViewInit() {
|
|
14100
|
+
const autoFocus = this.resolvedAutoFocus;
|
|
14101
|
+
if (autoFocus === false)
|
|
14102
|
+
return;
|
|
14103
|
+
const panel = this._dialogPanel()?.nativeElement;
|
|
14104
|
+
if (!panel)
|
|
14105
|
+
return;
|
|
14106
|
+
const autofocusTarget = panel.querySelector('[data-autofocus]');
|
|
14107
|
+
if (autofocusTarget) {
|
|
14108
|
+
autofocusTarget.focus();
|
|
14109
|
+
return;
|
|
14110
|
+
}
|
|
14111
|
+
if (autoFocus === 'panel') {
|
|
14112
|
+
panel.focus();
|
|
14113
|
+
return;
|
|
14114
|
+
}
|
|
14115
|
+
this._focusTrap()?.focusTrap?.focusInitialElement();
|
|
14116
|
+
}
|
|
14117
|
+
closeDialog() {
|
|
14118
|
+
this.dialogRef.close();
|
|
14119
|
+
}
|
|
13966
14120
|
onEscapePress() {
|
|
13967
14121
|
if (this.closeOnEscapeEnabled) {
|
|
13968
14122
|
this.dialogRef.close();
|
|
@@ -13976,21 +14130,25 @@ class SolarisDialogContainerComponent {
|
|
|
13976
14130
|
}
|
|
13977
14131
|
}
|
|
13978
14132
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13979
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogContainerComponent, isStandalone: true, selector: "solaris-dialog-container", inputs: { externalComponent: { classPropertyName: "externalComponent", publicName: "externalComponent", isSignal: true, isRequired: false, transformFunction: null }, simpleOptions: { classPropertyName: "simpleOptions", publicName: "simpleOptions", isSignal: true, isRequired: false, transformFunction: null }, externalComponentConfig: { classPropertyName: "externalComponentConfig", publicName: "externalComponentConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" }, properties: { "attr.data-
|
|
14133
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogContainerComponent, isStandalone: true, selector: "solaris-dialog-container", inputs: { externalComponent: { classPropertyName: "externalComponent", publicName: "externalComponent", isSignal: true, isRequired: false, transformFunction: null }, simpleOptions: { classPropertyName: "simpleOptions", publicName: "simpleOptions", isSignal: true, isRequired: false, transformFunction: null }, externalComponentConfig: { classPropertyName: "externalComponentConfig", publicName: "externalComponentConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" }, properties: { "attr.data-fullscreen": "hostFullscreen", "attr.data-radius": "hostRadius", "attr.data-variant": "hostVariant", "attr.data-density": "hostDensity", "attr.data-backdrop": "hasBackdrop", "attr.data-appearance": "hostAppearance", "attr.data-placement": "hostPlacement", "attr.data-header-separator": "hostHeaderSeparator", "attr.data-footer-separator": "hostFooterSeparator" }, classAttribute: "solaris-dialog-container" }, viewQueries: [{ propertyName: "_componentHost", first: true, predicate: ["componentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_dialogPanel", first: true, predicate: ["dialogPanel"], descendants: true, isSignal: true }, { propertyName: "_focusTrap", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"solaris-dialog-backdrop\"\n tabindex=\"-1\"\n (click)=\"onBackdropClick($event)\"\n (keydown.escape)=\"onBackdropClick($event)\"\n>\n <div\n #dialogPanel\n tabindex=\"-1\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"false\"\n [attr.role]=\"dialogRole\"\n [attr.aria-label]=\"panelAriaLabel\"\n [attr.aria-labelledby]=\"panelAriaLabelledBy\"\n [attr.aria-describedby]=\"panelAriaDescribedBy\"\n [style.width]=\"panelWidth\"\n class=\"solaris-dialog-panel\"\n [style.height]=\"panelHeight\"\n [style.min-width]=\"panelMinWidth\"\n [style.max-width]=\"panelMaxWidth\"\n [style.min-height]=\"panelMinHeight\"\n [style.max-height]=\"panelMaxHeight\"\n [attr.aria-modal]=\"hasBackdrop ? 'true' : 'false'\"\n >\n @if (isSimpleMode) {\n <solaris-dialog [options]=\"simpleOptions()!\" />\n } @else {\n <ng-template #componentHost></ng-template>\n }\n @if (closeable) {\n <button\n type=\"button\"\n data-dialog-close\n (click)=\"closeDialog()\"\n [attr.aria-label]=\"resolvedCloseLabel\"\n class=\"solaris-dialog-container__close\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n</div>\n", styles: [":host{--solaris-dialog-panel-padding: 0;--solaris-dialog-panel-min-width: 448px;--solaris-dialog-backdrop-bg: var(--solaris-backdrop);--solaris-dialog-panel-bg: var(--solaris-surface-base);--solaris-dialog-z-index: var(--solaris-z-index-modal);--solaris-dialog-panel-shadow: var(--solaris-shadow-lg);--solaris-dialog-panel-radius: var(--solaris-radius-lg);--solaris-dialog-panel-border: var(--solaris-border-default);--solaris-dialog-panel-max-width: calc(100vw - var(--solaris-spacing-8));--solaris-dialog-panel-max-height: calc(100dvh - var(--solaris-spacing-8));inset:0;display:flex;position:fixed;overflow:hidden;align-items:center;justify-content:center;z-index:var(--solaris-dialog-z-index)}:host([data-placement=top]){align-items:flex-start}:host([data-placement=bottom]){align-items:flex-end}:host([data-placement=left]){justify-content:flex-start}:host([data-placement=right]){justify-content:flex-end}:host([data-placement=top-left]){align-items:flex-start;justify-content:flex-start}:host([data-placement=top-right]){align-items:flex-start;justify-content:flex-end}:host([data-placement=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([data-placement=bottom-right]){align-items:flex-end;justify-content:flex-end}:host([data-radius=none]){--solaris-dialog-panel-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-dialog-panel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-dialog-panel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-dialog-panel-radius: var(--solaris-radius-lg)}:host([data-radius=full]){--solaris-dialog-panel-radius: var(--solaris-radius-full)}:host([data-backdrop=false]){--solaris-dialog-backdrop-bg: transparent;pointer-events:none}.solaris-dialog-backdrop{inset:0;display:flex;position:fixed;align-items:center;justify-content:center;background:var(--solaris-dialog-backdrop-bg)}:host([data-placement=top]) .solaris-dialog-backdrop{align-items:flex-start;padding-top:var(--solaris-spacing-4)}:host([data-placement=bottom]) .solaris-dialog-backdrop{align-items:flex-end;padding-bottom:var(--solaris-spacing-4)}:host([data-placement=left]) .solaris-dialog-backdrop{justify-content:flex-start;padding-left:var(--solaris-spacing-4)}:host([data-placement=right]) .solaris-dialog-backdrop{justify-content:flex-end;padding-right:var(--solaris-spacing-4)}:host([data-placement=top-left]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-start;padding-top:var(--solaris-spacing-4);padding-left:var(--solaris-spacing-4)}:host([data-placement=top-right]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-end;padding-top:var(--solaris-spacing-4);padding-right:var(--solaris-spacing-4)}:host([data-placement=bottom-left]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-start;padding-left:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-placement=bottom-right]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-end;padding-right:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-backdrop=false]) .solaris-dialog-backdrop{pointer-events:none}:host([data-backdrop=false]) .solaris-dialog-panel{pointer-events:auto}.solaris-dialog-panel{display:flex;overflow:hidden;position:relative;flex-direction:column;box-sizing:border-box;background:var(--solaris-dialog-panel-bg);box-shadow:var(--solaris-dialog-panel-shadow);max-width:var(--solaris-dialog-panel-max-width);min-width:var(--solaris-dialog-panel-min-width);border-radius:var(--solaris-dialog-panel-radius);max-height:var(--solaris-dialog-panel-max-height);animation:solaris-dialog-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close{border:none;display:flex;cursor:pointer;background:none;aspect-ratio:1/1;position:absolute;align-items:center;top:var(--solaris-spacing-3);right:var(--solaris-spacing-3);width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-lg);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close:hover{color:var(--solaris-text-strong)}:host([data-appearance=outline]) .solaris-dialog-panel{border:var(--solaris-border-width-sm) solid var(--solaris-dialog-panel-border)}:host([data-fullscreen]) .solaris-dialog-panel{width:100vw;height:100dvh;max-width:100vw;border-radius:0;max-height:100dvh}@keyframes solaris-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.solaris-dialog-panel{animation:none}}:host-context([data-reduced-motion=true]) .solaris-dialog-panel{animation:none}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SolarisDialogComponent, selector: "solaris-dialog", inputs: ["options"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13980
14134
|
}
|
|
13981
14135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContainerComponent, decorators: [{
|
|
13982
14136
|
type: Component,
|
|
13983
|
-
args: [{ selector: 'solaris-dialog-container', standalone: true, imports: [CdkTrapFocus, SolarisDialogComponent,
|
|
13984
|
-
'[attr.data-
|
|
14137
|
+
args: [{ selector: 'solaris-dialog-container', standalone: true, imports: [CdkTrapFocus, SolarisDialogComponent, SolarisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14138
|
+
'[attr.data-fullscreen]': 'hostFullscreen',
|
|
13985
14139
|
class: 'solaris-dialog-container',
|
|
14140
|
+
'[attr.data-radius]': 'hostRadius',
|
|
13986
14141
|
'[attr.data-variant]': 'hostVariant',
|
|
14142
|
+
'[attr.data-density]': 'hostDensity',
|
|
14143
|
+
'[attr.data-backdrop]': 'hasBackdrop',
|
|
13987
14144
|
'[attr.data-appearance]': 'hostAppearance',
|
|
13988
14145
|
'[attr.data-placement]': 'hostPlacement',
|
|
13989
|
-
'[attr.data-
|
|
13990
|
-
|
|
14146
|
+
'[attr.data-header-separator]': 'hostHeaderSeparator',
|
|
14147
|
+
'[attr.data-footer-separator]': 'hostFooterSeparator',
|
|
14148
|
+
}, template: "<div\n class=\"solaris-dialog-backdrop\"\n tabindex=\"-1\"\n (click)=\"onBackdropClick($event)\"\n (keydown.escape)=\"onBackdropClick($event)\"\n>\n <div\n #dialogPanel\n tabindex=\"-1\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"false\"\n [attr.role]=\"dialogRole\"\n [attr.aria-label]=\"panelAriaLabel\"\n [attr.aria-labelledby]=\"panelAriaLabelledBy\"\n [attr.aria-describedby]=\"panelAriaDescribedBy\"\n [style.width]=\"panelWidth\"\n class=\"solaris-dialog-panel\"\n [style.height]=\"panelHeight\"\n [style.min-width]=\"panelMinWidth\"\n [style.max-width]=\"panelMaxWidth\"\n [style.min-height]=\"panelMinHeight\"\n [style.max-height]=\"panelMaxHeight\"\n [attr.aria-modal]=\"hasBackdrop ? 'true' : 'false'\"\n >\n @if (isSimpleMode) {\n <solaris-dialog [options]=\"simpleOptions()!\" />\n } @else {\n <ng-template #componentHost></ng-template>\n }\n @if (closeable) {\n <button\n type=\"button\"\n data-dialog-close\n (click)=\"closeDialog()\"\n [attr.aria-label]=\"resolvedCloseLabel\"\n class=\"solaris-dialog-container__close\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n</div>\n", styles: [":host{--solaris-dialog-panel-padding: 0;--solaris-dialog-panel-min-width: 448px;--solaris-dialog-backdrop-bg: var(--solaris-backdrop);--solaris-dialog-panel-bg: var(--solaris-surface-base);--solaris-dialog-z-index: var(--solaris-z-index-modal);--solaris-dialog-panel-shadow: var(--solaris-shadow-lg);--solaris-dialog-panel-radius: var(--solaris-radius-lg);--solaris-dialog-panel-border: var(--solaris-border-default);--solaris-dialog-panel-max-width: calc(100vw - var(--solaris-spacing-8));--solaris-dialog-panel-max-height: calc(100dvh - var(--solaris-spacing-8));inset:0;display:flex;position:fixed;overflow:hidden;align-items:center;justify-content:center;z-index:var(--solaris-dialog-z-index)}:host([data-placement=top]){align-items:flex-start}:host([data-placement=bottom]){align-items:flex-end}:host([data-placement=left]){justify-content:flex-start}:host([data-placement=right]){justify-content:flex-end}:host([data-placement=top-left]){align-items:flex-start;justify-content:flex-start}:host([data-placement=top-right]){align-items:flex-start;justify-content:flex-end}:host([data-placement=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([data-placement=bottom-right]){align-items:flex-end;justify-content:flex-end}:host([data-radius=none]){--solaris-dialog-panel-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-dialog-panel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-dialog-panel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-dialog-panel-radius: var(--solaris-radius-lg)}:host([data-radius=full]){--solaris-dialog-panel-radius: var(--solaris-radius-full)}:host([data-backdrop=false]){--solaris-dialog-backdrop-bg: transparent;pointer-events:none}.solaris-dialog-backdrop{inset:0;display:flex;position:fixed;align-items:center;justify-content:center;background:var(--solaris-dialog-backdrop-bg)}:host([data-placement=top]) .solaris-dialog-backdrop{align-items:flex-start;padding-top:var(--solaris-spacing-4)}:host([data-placement=bottom]) .solaris-dialog-backdrop{align-items:flex-end;padding-bottom:var(--solaris-spacing-4)}:host([data-placement=left]) .solaris-dialog-backdrop{justify-content:flex-start;padding-left:var(--solaris-spacing-4)}:host([data-placement=right]) .solaris-dialog-backdrop{justify-content:flex-end;padding-right:var(--solaris-spacing-4)}:host([data-placement=top-left]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-start;padding-top:var(--solaris-spacing-4);padding-left:var(--solaris-spacing-4)}:host([data-placement=top-right]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-end;padding-top:var(--solaris-spacing-4);padding-right:var(--solaris-spacing-4)}:host([data-placement=bottom-left]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-start;padding-left:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-placement=bottom-right]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-end;padding-right:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-backdrop=false]) .solaris-dialog-backdrop{pointer-events:none}:host([data-backdrop=false]) .solaris-dialog-panel{pointer-events:auto}.solaris-dialog-panel{display:flex;overflow:hidden;position:relative;flex-direction:column;box-sizing:border-box;background:var(--solaris-dialog-panel-bg);box-shadow:var(--solaris-dialog-panel-shadow);max-width:var(--solaris-dialog-panel-max-width);min-width:var(--solaris-dialog-panel-min-width);border-radius:var(--solaris-dialog-panel-radius);max-height:var(--solaris-dialog-panel-max-height);animation:solaris-dialog-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close{border:none;display:flex;cursor:pointer;background:none;aspect-ratio:1/1;position:absolute;align-items:center;top:var(--solaris-spacing-3);right:var(--solaris-spacing-3);width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-lg);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close:hover{color:var(--solaris-text-strong)}:host([data-appearance=outline]) .solaris-dialog-panel{border:var(--solaris-border-width-sm) solid var(--solaris-dialog-panel-border)}:host([data-fullscreen]) .solaris-dialog-panel{width:100vw;height:100dvh;max-width:100vw;border-radius:0;max-height:100dvh}@keyframes solaris-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.solaris-dialog-panel{animation:none}}:host-context([data-reduced-motion=true]) .solaris-dialog-panel{animation:none}\n"] }]
|
|
13991
14149
|
}], ctorParameters: () => [], propDecorators: { externalComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalComponent", required: false }] }], simpleOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "simpleOptions", required: false }] }], externalComponentConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalComponentConfig", required: false }] }], _componentHost: [{ type: i0.ViewChild, args: ['componentHost', { ...{
|
|
13992
14150
|
read: ViewContainerRef,
|
|
13993
|
-
}, isSignal: true }] }], onEscapePress: [{
|
|
14151
|
+
}, isSignal: true }] }], _dialogPanel: [{ type: i0.ViewChild, args: ['dialogPanel', { isSignal: true }] }], _focusTrap: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }], onEscapePress: [{
|
|
13994
14152
|
type: HostListener,
|
|
13995
14153
|
args: ['document:keydown.escape']
|
|
13996
14154
|
}] } });
|
|
@@ -14019,8 +14177,8 @@ class SolarisDialogRef {
|
|
|
14019
14177
|
|
|
14020
14178
|
const SOLARIS_DIALOG_CONFIG = new InjectionToken('SolarisDialogConfig');
|
|
14021
14179
|
const SOLARIS_DIALOG_DEFAULT_CONFIG = {
|
|
14022
|
-
appearance: '
|
|
14023
|
-
|
|
14180
|
+
appearance: 'outline',
|
|
14181
|
+
fullscreen: false,
|
|
14024
14182
|
placement: 'center',
|
|
14025
14183
|
closeable: true,
|
|
14026
14184
|
backdrop: true,
|
|
@@ -14029,14 +14187,18 @@ const SOLARIS_DIALOG_DEFAULT_CONFIG = {
|
|
|
14029
14187
|
autoFocus: 'first-tabbable',
|
|
14030
14188
|
restoreFocus: true,
|
|
14031
14189
|
role: 'dialog',
|
|
14190
|
+
headerSeparator: true,
|
|
14191
|
+
footerSeparator: true,
|
|
14032
14192
|
actionsAlign: 'end',
|
|
14033
14193
|
actionsStack: 'auto',
|
|
14034
14194
|
};
|
|
14035
14195
|
|
|
14196
|
+
// SECURITY_EXCEPTION_FILE: Injected DOCUMENT token is the Angular SSR-safe abstraction for document access; used to capture activeElement on open and restore focus on close. No alternative exists.
|
|
14036
14197
|
let nextDialogId = 0;
|
|
14037
14198
|
class SolarisDialogService {
|
|
14038
14199
|
injector = inject(Injector);
|
|
14039
14200
|
overlay = inject(Overlay);
|
|
14201
|
+
document = inject(DOCUMENT$1);
|
|
14040
14202
|
config;
|
|
14041
14203
|
openDialogs = new Set();
|
|
14042
14204
|
constructor() {
|
|
@@ -14057,7 +14219,10 @@ class SolarisDialogService {
|
|
|
14057
14219
|
const portal = new ComponentPortal(SolarisDialogContainerComponent, null, injector);
|
|
14058
14220
|
const componentRef = overlayRef.attach(portal);
|
|
14059
14221
|
componentRef.setInput('simpleOptions', mergedOptions);
|
|
14060
|
-
this.trackDialog(ref, overlayRef
|
|
14222
|
+
this.trackDialog(ref, overlayRef, {
|
|
14223
|
+
restoreFocus: mergedOptions.restoreFocus ?? true,
|
|
14224
|
+
previouslyFocused: this.document.activeElement,
|
|
14225
|
+
});
|
|
14061
14226
|
return ref;
|
|
14062
14227
|
}
|
|
14063
14228
|
openComponent(component, config) {
|
|
@@ -14070,17 +14235,52 @@ class SolarisDialogService {
|
|
|
14070
14235
|
const componentRef = overlayRef.attach(portal);
|
|
14071
14236
|
componentRef.setInput('externalComponent', component);
|
|
14072
14237
|
componentRef.setInput('externalComponentConfig', config ?? {});
|
|
14073
|
-
this.trackDialog(ref, overlayRef
|
|
14238
|
+
this.trackDialog(ref, overlayRef, {
|
|
14239
|
+
restoreFocus: config?.restoreFocus ?? this.config.restoreFocus ?? true,
|
|
14240
|
+
previouslyFocused: this.document.activeElement,
|
|
14241
|
+
});
|
|
14074
14242
|
return ref;
|
|
14075
14243
|
}
|
|
14076
14244
|
createOverlay(placement, backdrop = true) {
|
|
14077
14245
|
const positionStrategy = this.overlay.position().global();
|
|
14078
|
-
|
|
14079
|
-
|
|
14080
|
-
|
|
14081
|
-
|
|
14082
|
-
|
|
14083
|
-
|
|
14246
|
+
switch (placement) {
|
|
14247
|
+
case 'top':
|
|
14248
|
+
positionStrategy.centerHorizontally();
|
|
14249
|
+
positionStrategy.top('24px');
|
|
14250
|
+
break;
|
|
14251
|
+
case 'bottom':
|
|
14252
|
+
positionStrategy.centerHorizontally();
|
|
14253
|
+
positionStrategy.bottom('24px');
|
|
14254
|
+
break;
|
|
14255
|
+
case 'left':
|
|
14256
|
+
positionStrategy.left('24px');
|
|
14257
|
+
positionStrategy.centerVertically();
|
|
14258
|
+
break;
|
|
14259
|
+
case 'right':
|
|
14260
|
+
positionStrategy.right('24px');
|
|
14261
|
+
positionStrategy.centerVertically();
|
|
14262
|
+
break;
|
|
14263
|
+
case 'top-left':
|
|
14264
|
+
positionStrategy.left('24px');
|
|
14265
|
+
positionStrategy.top('24px');
|
|
14266
|
+
break;
|
|
14267
|
+
case 'top-right':
|
|
14268
|
+
positionStrategy.right('24px');
|
|
14269
|
+
positionStrategy.top('24px');
|
|
14270
|
+
break;
|
|
14271
|
+
case 'bottom-left':
|
|
14272
|
+
positionStrategy.left('24px');
|
|
14273
|
+
positionStrategy.bottom('24px');
|
|
14274
|
+
break;
|
|
14275
|
+
case 'bottom-right':
|
|
14276
|
+
positionStrategy.right('24px');
|
|
14277
|
+
positionStrategy.bottom('24px');
|
|
14278
|
+
break;
|
|
14279
|
+
case 'center':
|
|
14280
|
+
default:
|
|
14281
|
+
positionStrategy.centerHorizontally();
|
|
14282
|
+
positionStrategy.centerVertically();
|
|
14283
|
+
break;
|
|
14084
14284
|
}
|
|
14085
14285
|
return this.overlay.create({
|
|
14086
14286
|
hasBackdrop: false,
|
|
@@ -14103,20 +14303,35 @@ class SolarisDialogService {
|
|
|
14103
14303
|
parent: this.injector,
|
|
14104
14304
|
});
|
|
14105
14305
|
}
|
|
14106
|
-
trackDialog(ref, overlayRef) {
|
|
14306
|
+
trackDialog(ref, overlayRef, focus) {
|
|
14107
14307
|
const entry = { ref, overlayRef };
|
|
14108
14308
|
this.openDialogs.add(entry);
|
|
14109
14309
|
ref.afterClosed().subscribe(() => {
|
|
14110
14310
|
overlayRef.detach();
|
|
14111
14311
|
overlayRef.dispose();
|
|
14112
14312
|
this.openDialogs.delete(entry);
|
|
14313
|
+
this.restoreFocus(focus);
|
|
14113
14314
|
});
|
|
14114
14315
|
}
|
|
14316
|
+
restoreFocus(focus) {
|
|
14317
|
+
if (!focus.restoreFocus)
|
|
14318
|
+
return;
|
|
14319
|
+
const target = focus.previouslyFocused;
|
|
14320
|
+
if (!target || typeof target.focus !== 'function')
|
|
14321
|
+
return;
|
|
14322
|
+
if (!this.document.contains(target))
|
|
14323
|
+
return;
|
|
14324
|
+
const activeElement = this.document.activeElement;
|
|
14325
|
+
if (activeElement && activeElement !== this.document.body)
|
|
14326
|
+
return;
|
|
14327
|
+
target.focus();
|
|
14328
|
+
}
|
|
14115
14329
|
resolveOptions(options) {
|
|
14116
14330
|
return {
|
|
14331
|
+
...options,
|
|
14117
14332
|
variant: options.variant ?? 'neutral',
|
|
14118
14333
|
appearance: options.appearance ?? this.config.appearance,
|
|
14119
|
-
|
|
14334
|
+
fullscreen: options.fullscreen ?? this.config.fullscreen ?? false,
|
|
14120
14335
|
closeable: options.closeable ?? this.config.closeable ?? true,
|
|
14121
14336
|
backdrop: options.backdrop ?? this.config.backdrop ?? true,
|
|
14122
14337
|
closeOnEscape: options.closeOnEscape ?? this.config.closeOnEscape ?? true,
|
|
@@ -14127,9 +14342,15 @@ class SolarisDialogService {
|
|
|
14127
14342
|
restoreFocus: options.restoreFocus ?? this.config.restoreFocus ?? true,
|
|
14128
14343
|
role: options.role ?? this.config.role,
|
|
14129
14344
|
placement: options.placement ?? this.config.placement ?? 'center',
|
|
14345
|
+
headerSeparator: options.headerSeparator ?? this.config.headerSeparator ?? true,
|
|
14346
|
+
footerSeparator: options.footerSeparator ?? this.config.footerSeparator ?? true,
|
|
14347
|
+
radius: options.radius ?? this.config.radius,
|
|
14348
|
+
density: options.density ?? this.config.density,
|
|
14349
|
+
actionsShape: options.actionsShape ?? this.config.actionsShape,
|
|
14350
|
+
actionsDensity: options.actionsDensity ?? this.config.actionsDensity,
|
|
14351
|
+
actionsRadius: options.actionsRadius ?? this.config.actionsRadius,
|
|
14130
14352
|
actionsAlign: options.actionsAlign ?? this.config.actionsAlign ?? 'end',
|
|
14131
14353
|
actionsStack: options.actionsStack ?? this.config.actionsStack ?? 'auto',
|
|
14132
|
-
...options,
|
|
14133
14354
|
};
|
|
14134
14355
|
}
|
|
14135
14356
|
closeAll() {
|