@educarehq/solaris-ui 0.22.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.
|
@@ -1948,6 +1948,26 @@ const LAYOUT_ICONS = [
|
|
|
1948
1948
|
},
|
|
1949
1949
|
],
|
|
1950
1950
|
},
|
|
1951
|
+
{
|
|
1952
|
+
name: 'square-stack',
|
|
1953
|
+
viewBox: '0 0 24 24',
|
|
1954
|
+
fill: 'none',
|
|
1955
|
+
stroke: 'currentColor',
|
|
1956
|
+
strokeWidth: 2,
|
|
1957
|
+
strokeLinecap: 'round',
|
|
1958
|
+
strokeLinejoin: 'round',
|
|
1959
|
+
elements: [
|
|
1960
|
+
{
|
|
1961
|
+
type: 'path',
|
|
1962
|
+
d: 'M4 10c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2',
|
|
1963
|
+
},
|
|
1964
|
+
{
|
|
1965
|
+
type: 'path',
|
|
1966
|
+
d: 'M10 16c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2',
|
|
1967
|
+
},
|
|
1968
|
+
{ type: 'rect', x: 14, y: 14, width: 8, height: 8, rx: 2 },
|
|
1969
|
+
],
|
|
1970
|
+
},
|
|
1951
1971
|
];
|
|
1952
1972
|
|
|
1953
1973
|
const BRAND_ICONS = [
|
|
@@ -2727,6 +2747,137 @@ const DATA_ICONS = [
|
|
|
2727
2747
|
{ type: 'line', x1: 16, y1: 3, x2: 14, y2: 21 },
|
|
2728
2748
|
],
|
|
2729
2749
|
},
|
|
2750
|
+
{
|
|
2751
|
+
name: 'shopping-cart',
|
|
2752
|
+
viewBox: '0 0 24 24',
|
|
2753
|
+
fill: 'none',
|
|
2754
|
+
stroke: 'currentColor',
|
|
2755
|
+
strokeWidth: 2,
|
|
2756
|
+
strokeLinecap: 'round',
|
|
2757
|
+
strokeLinejoin: 'round',
|
|
2758
|
+
elements: [
|
|
2759
|
+
{
|
|
2760
|
+
type: 'path',
|
|
2761
|
+
d: 'm2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18',
|
|
2762
|
+
},
|
|
2763
|
+
{
|
|
2764
|
+
type: 'path',
|
|
2765
|
+
d: 'M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25',
|
|
2766
|
+
},
|
|
2767
|
+
{ type: 'circle', cx: 18, cy: 20, r: 2 },
|
|
2768
|
+
{ type: 'circle', cx: 8, cy: 20, r: 2 },
|
|
2769
|
+
],
|
|
2770
|
+
},
|
|
2771
|
+
{
|
|
2772
|
+
name: 'shopping-basket',
|
|
2773
|
+
viewBox: '0 0 24 24',
|
|
2774
|
+
fill: 'none',
|
|
2775
|
+
stroke: 'currentColor',
|
|
2776
|
+
strokeWidth: 2,
|
|
2777
|
+
strokeLinecap: 'round',
|
|
2778
|
+
strokeLinejoin: 'round',
|
|
2779
|
+
elements: [
|
|
2780
|
+
{ type: 'path', d: 'm15 11-1 9' },
|
|
2781
|
+
{ type: 'path', d: 'm19 11-4-7' },
|
|
2782
|
+
{ type: 'path', d: 'M2 11h20' },
|
|
2783
|
+
{
|
|
2784
|
+
type: 'path',
|
|
2785
|
+
d: 'm3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4',
|
|
2786
|
+
},
|
|
2787
|
+
{ type: 'path', d: 'M4.5 15.5h15' },
|
|
2788
|
+
{ type: 'path', d: 'm5 11 4-7' },
|
|
2789
|
+
{ type: 'path', d: 'm9 11 1 9' },
|
|
2790
|
+
],
|
|
2791
|
+
},
|
|
2792
|
+
{
|
|
2793
|
+
name: 'shopping-bag',
|
|
2794
|
+
viewBox: '0 0 24 24',
|
|
2795
|
+
fill: 'none',
|
|
2796
|
+
stroke: 'currentColor',
|
|
2797
|
+
strokeWidth: 2,
|
|
2798
|
+
strokeLinecap: 'round',
|
|
2799
|
+
strokeLinejoin: 'round',
|
|
2800
|
+
elements: [
|
|
2801
|
+
{ type: 'path', d: 'M16 10a4 4 0 0 1-8 0' },
|
|
2802
|
+
{ type: 'path', d: 'M3.103 6.034h17.794' },
|
|
2803
|
+
{
|
|
2804
|
+
type: 'path',
|
|
2805
|
+
d: 'M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z',
|
|
2806
|
+
},
|
|
2807
|
+
],
|
|
2808
|
+
},
|
|
2809
|
+
{
|
|
2810
|
+
name: 'wallet',
|
|
2811
|
+
viewBox: '0 0 24 24',
|
|
2812
|
+
fill: 'none',
|
|
2813
|
+
stroke: 'currentColor',
|
|
2814
|
+
strokeWidth: 2,
|
|
2815
|
+
strokeLinecap: 'round',
|
|
2816
|
+
strokeLinejoin: 'round',
|
|
2817
|
+
elements: [
|
|
2818
|
+
{
|
|
2819
|
+
type: 'path',
|
|
2820
|
+
d: 'M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1',
|
|
2821
|
+
},
|
|
2822
|
+
{
|
|
2823
|
+
type: 'path',
|
|
2824
|
+
d: 'M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4',
|
|
2825
|
+
},
|
|
2826
|
+
],
|
|
2827
|
+
},
|
|
2828
|
+
{
|
|
2829
|
+
name: 'globe-off',
|
|
2830
|
+
viewBox: '0 0 24 24',
|
|
2831
|
+
fill: 'none',
|
|
2832
|
+
stroke: 'currentColor',
|
|
2833
|
+
strokeWidth: 2,
|
|
2834
|
+
strokeLinecap: 'round',
|
|
2835
|
+
strokeLinejoin: 'round',
|
|
2836
|
+
elements: [
|
|
2837
|
+
{
|
|
2838
|
+
type: 'path',
|
|
2839
|
+
d: 'M10.114 4.462A14.5 14.5 0 0 1 12 2a10 10 0 0 1 9.313 13.643',
|
|
2840
|
+
},
|
|
2841
|
+
{
|
|
2842
|
+
type: 'path',
|
|
2843
|
+
d: 'M15.557 15.556A14.5 14.5 0 0 1 12 22 10 10 0 0 1 4.929 4.929',
|
|
2844
|
+
},
|
|
2845
|
+
{
|
|
2846
|
+
type: 'path',
|
|
2847
|
+
d: 'M15.892 10.234A14.5 14.5 0 0 0 12 2a10 10 0 0 0-3.643.687',
|
|
2848
|
+
},
|
|
2849
|
+
{ type: 'path', d: 'M17.656 12H22' },
|
|
2850
|
+
{
|
|
2851
|
+
type: 'path',
|
|
2852
|
+
d: 'M19.071 19.071A10 10 0 0 1 12 22 14.5 14.5 0 0 1 8.44 8.45',
|
|
2853
|
+
},
|
|
2854
|
+
{ type: 'path', d: 'M2 12h10' },
|
|
2855
|
+
{ type: 'path', d: 'm2 2 20 20' },
|
|
2856
|
+
],
|
|
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
|
+
},
|
|
2730
2881
|
];
|
|
2731
2882
|
|
|
2732
2883
|
const SOLARIS_BUILT_IN_ICONS = [
|
|
@@ -13582,22 +13733,35 @@ const SOLARIS_DIALOG_DATA = new InjectionToken('SolarisDialogData');
|
|
|
13582
13733
|
const SOLARIS_DIALOG_REF = new InjectionToken('SolarisDialogRef');
|
|
13583
13734
|
|
|
13584
13735
|
class SolarisDialogContentComponent {
|
|
13736
|
+
density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
|
|
13585
13737
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13586
|
-
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 });
|
|
13587
13739
|
}
|
|
13588
13740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContentComponent, decorators: [{
|
|
13589
13741
|
type: Component,
|
|
13590
13742
|
args: [{ selector: 'solaris-dialog-content', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13591
13743
|
class: 'solaris-dialog-content',
|
|
13592
|
-
|
|
13593
|
-
|
|
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 }] }] } });
|
|
13594
13747
|
|
|
13595
13748
|
class SolarisDialogActionsComponent {
|
|
13596
13749
|
dialogRef = inject(SOLARIS_DIALOG_REF);
|
|
13750
|
+
translateService = inject(SolarisTranslateService, {
|
|
13751
|
+
optional: true,
|
|
13752
|
+
});
|
|
13597
13753
|
actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
13598
13754
|
align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
13599
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 */ []));
|
|
13600
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
|
+
}
|
|
13601
13765
|
handleAction(action) {
|
|
13602
13766
|
const executeAction = () => {
|
|
13603
13767
|
if (action.action) {
|
|
@@ -13614,54 +13778,52 @@ class SolarisDialogActionsComponent {
|
|
|
13614
13778
|
this.actionExecuted.emit(action);
|
|
13615
13779
|
}
|
|
13616
13780
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13617
|
-
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 });
|
|
13618
13782
|
}
|
|
13619
13783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogActionsComponent, decorators: [{
|
|
13620
13784
|
type: Component,
|
|
13621
13785
|
args: [{ selector: 'solaris-dialog-actions', standalone: true, imports: [SolarisButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13622
13786
|
'[attr.data-align]': 'align()',
|
|
13623
13787
|
'[attr.data-stack]': 'stack()',
|
|
13788
|
+
'[attr.data-separator]': "separator() ? '' : null",
|
|
13789
|
+
'[attr.data-density]': 'density()',
|
|
13624
13790
|
class: 'solaris-dialog-actions',
|
|
13625
|
-
}, 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
|
|
13626
|
-
}], 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"] }] } });
|
|
13627
13793
|
|
|
13794
|
+
let nextDialogHeaderId = 0;
|
|
13628
13795
|
class SolarisDialogHeaderComponent {
|
|
13629
|
-
dialogRef = inject(SOLARIS_DIALOG_REF
|
|
13630
|
-
translateService = inject(SolarisTranslateService, {
|
|
13796
|
+
dialogRef = inject(SOLARIS_DIALOG_REF, {
|
|
13631
13797
|
optional: true,
|
|
13632
13798
|
});
|
|
13633
13799
|
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
13634
13800
|
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
13635
13801
|
description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
13636
|
-
closeable = input(true, ...(ngDevMode ? [{ debugName: "closeable" }] : /* istanbul ignore next */ []));
|
|
13637
|
-
closeLabel = input('Close', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
13638
|
-
closeLabelKey = input(...(ngDevMode ? [undefined, { debugName: "closeLabelKey" }] : /* istanbul ignore next */ []));
|
|
13639
13802
|
iconDecorative = input(false, ...(ngDevMode ? [{ debugName: "iconDecorative" }] : /* istanbul ignore next */ []));
|
|
13640
|
-
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
13641
13803
|
variant = input('neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
13642
|
-
|
|
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`;
|
|
13643
13808
|
hasTitle = () => !!this.title();
|
|
13644
13809
|
hasDescription = () => !!this.description();
|
|
13645
13810
|
hasIcon = () => !!this.icon();
|
|
13646
|
-
resolvedCloseLabel = () => this.closeLabelKey()
|
|
13647
|
-
? (this.translateService?.translate(this.closeLabelKey()) ??
|
|
13648
|
-
this.closeLabel())
|
|
13649
|
-
: this.closeLabel();
|
|
13650
|
-
close() {
|
|
13651
|
-
this.dialogRef.close();
|
|
13652
|
-
}
|
|
13653
13811
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13654
|
-
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 });
|
|
13655
13813
|
}
|
|
13656
13814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogHeaderComponent, decorators: [{
|
|
13657
13815
|
type: Component,
|
|
13658
13816
|
args: [{ selector: 'solaris-dialog-header', standalone: true, imports: [SolarisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13659
13817
|
class: 'solaris-dialog-header',
|
|
13660
13818
|
'[attr.data-variant]': 'variant()',
|
|
13661
|
-
|
|
13662
|
-
|
|
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 }] }] } });
|
|
13663
13822
|
|
|
13664
13823
|
class SolarisDialogComponent {
|
|
13824
|
+
translateService = inject(SolarisTranslateService, {
|
|
13825
|
+
optional: true,
|
|
13826
|
+
});
|
|
13665
13827
|
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
13666
13828
|
hasActions = computed(() => {
|
|
13667
13829
|
const actions = this.options().actions;
|
|
@@ -13670,15 +13832,36 @@ class SolarisDialogComponent {
|
|
|
13670
13832
|
actionsAlign = computed(() => this.options().actionsAlign ?? 'end', ...(ngDevMode ? [{ debugName: "actionsAlign" }] : /* istanbul ignore next */ []));
|
|
13671
13833
|
actionsStack = computed(() => this.options().actionsStack ?? 'auto', ...(ngDevMode ? [{ debugName: "actionsStack" }] : /* istanbul ignore next */ []));
|
|
13672
13834
|
iconDecorative = computed(() => this.options().iconDecorative ?? false, ...(ngDevMode ? [{ debugName: "iconDecorative" }] : /* istanbul ignore next */ []));
|
|
13673
|
-
closeable = computed(() => this.options().closeable ?? true, ...(ngDevMode ? [{ debugName: "closeable" }] : /* istanbul ignore next */ []));
|
|
13674
|
-
closeLabel = computed(() => this.options().closeLabel ?? 'Close', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
13675
|
-
size = computed(() => this.options().size ?? 'md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
13676
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 */ []));
|
|
13677
13842
|
description = computed(() => this.options().description, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
13678
13843
|
title = computed(() => this.options().title, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
13679
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 */ []));
|
|
13680
13860
|
actions = computed(() => {
|
|
13681
13861
|
const variant = this.variant();
|
|
13862
|
+
const shape = this.actionsShape();
|
|
13863
|
+
const density = this.actionsDensity();
|
|
13864
|
+
const radius = this.actionsRadius();
|
|
13682
13865
|
return (this.options().actions ?? []).map((action) => {
|
|
13683
13866
|
const appearance = action.appearance ?? 'solid';
|
|
13684
13867
|
const hasExplicitColor = action.color !== undefined;
|
|
@@ -13687,11 +13870,17 @@ class SolarisDialogComponent {
|
|
|
13687
13870
|
: appearance === 'solid'
|
|
13688
13871
|
? variant
|
|
13689
13872
|
: undefined;
|
|
13690
|
-
return {
|
|
13873
|
+
return {
|
|
13874
|
+
...action,
|
|
13875
|
+
color,
|
|
13876
|
+
shape: action.shape ?? shape,
|
|
13877
|
+
density: action.density ?? density,
|
|
13878
|
+
radius: action.radius ?? radius,
|
|
13879
|
+
};
|
|
13691
13880
|
});
|
|
13692
13881
|
}, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
13693
13882
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13694
|
-
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 });
|
|
13695
13884
|
}
|
|
13696
13885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogComponent, decorators: [{
|
|
13697
13886
|
type: Component,
|
|
@@ -13702,26 +13891,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
13702
13891
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13703
13892
|
class: 'solaris-dialog',
|
|
13704
13893
|
'[attr.role]': 'null',
|
|
13705
|
-
}, 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"] }]
|
|
13706
13895
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
|
|
13707
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.
|
|
13708
13898
|
class SolarisDialogContainerComponent {
|
|
13709
13899
|
dialogRef = inject(SOLARIS_DIALOG_REF);
|
|
13710
13900
|
injector = inject(Injector);
|
|
13901
|
+
themeService = inject(SolarisThemeService, {
|
|
13902
|
+
optional: true,
|
|
13903
|
+
});
|
|
13904
|
+
translateService = inject(SolarisTranslateService, {
|
|
13905
|
+
optional: true,
|
|
13906
|
+
});
|
|
13711
13907
|
externalComponent = input(null, ...(ngDevMode ? [{ debugName: "externalComponent" }] : /* istanbul ignore next */ []));
|
|
13712
13908
|
simpleOptions = input(null, ...(ngDevMode ? [{ debugName: "simpleOptions" }] : /* istanbul ignore next */ []));
|
|
13713
13909
|
externalComponentConfig = input(null, ...(ngDevMode ? [{ debugName: "externalComponentConfig" }] : /* istanbul ignore next */ []));
|
|
13714
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 */ []));
|
|
13715
13913
|
componentRef = null;
|
|
13716
13914
|
get hostAppearance() {
|
|
13717
13915
|
if (this.simpleOptions())
|
|
13718
|
-
return this.simpleOptions()?.appearance ?? '
|
|
13719
|
-
return this.externalComponentConfig()?.appearance ?? '
|
|
13916
|
+
return this.simpleOptions()?.appearance ?? 'outline';
|
|
13917
|
+
return this.externalComponentConfig()?.appearance ?? 'outline';
|
|
13720
13918
|
}
|
|
13721
|
-
get
|
|
13722
|
-
|
|
13723
|
-
|
|
13724
|
-
|
|
13919
|
+
get hostFullscreen() {
|
|
13920
|
+
const fullscreen = this.simpleOptions()
|
|
13921
|
+
? (this.simpleOptions()?.fullscreen ?? false)
|
|
13922
|
+
: (this.externalComponentConfig()?.fullscreen ?? false);
|
|
13923
|
+
return fullscreen ? '' : null;
|
|
13725
13924
|
}
|
|
13726
13925
|
get hostVariant() {
|
|
13727
13926
|
if (this.simpleOptions())
|
|
@@ -13738,22 +13937,79 @@ class SolarisDialogContainerComponent {
|
|
|
13738
13937
|
return this.simpleOptions()?.backdrop ?? true;
|
|
13739
13938
|
return this.externalComponentConfig()?.backdrop ?? true;
|
|
13740
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
|
+
}
|
|
13741
13964
|
get closeable() {
|
|
13742
13965
|
if (this.simpleOptions())
|
|
13743
13966
|
return this.simpleOptions()?.closeable ?? true;
|
|
13744
13967
|
return this.externalComponentConfig()?.closeable ?? true;
|
|
13745
13968
|
}
|
|
13746
|
-
get
|
|
13747
|
-
|
|
13748
|
-
|
|
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);
|
|
13749
13977
|
}
|
|
13750
|
-
return
|
|
13978
|
+
return options.ariaLabel ?? null;
|
|
13751
13979
|
}
|
|
13752
|
-
get
|
|
13753
|
-
|
|
13754
|
-
|
|
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');
|
|
13755
14011
|
}
|
|
13756
|
-
return
|
|
14012
|
+
return closeLabel;
|
|
13757
14013
|
}
|
|
13758
14014
|
get panelWidth() {
|
|
13759
14015
|
if (this.simpleOptions())
|
|
@@ -13805,6 +14061,11 @@ class SolarisDialogContainerComponent {
|
|
|
13805
14061
|
return this.simpleOptions()?.role ?? 'dialog';
|
|
13806
14062
|
return this.externalComponentConfig()?.role ?? 'dialog';
|
|
13807
14063
|
}
|
|
14064
|
+
get resolvedAutoFocus() {
|
|
14065
|
+
if (this.simpleOptions())
|
|
14066
|
+
return this.simpleOptions()?.autoFocus ?? 'first-tabbable';
|
|
14067
|
+
return this.externalComponentConfig()?.autoFocus ?? 'first-tabbable';
|
|
14068
|
+
}
|
|
13808
14069
|
constructor() {
|
|
13809
14070
|
effect(() => {
|
|
13810
14071
|
const comp = this.externalComponent();
|
|
@@ -13835,6 +14096,27 @@ class SolarisDialogContainerComponent {
|
|
|
13835
14096
|
});
|
|
13836
14097
|
this.dialogRef.componentInstance = this.componentRef.instance;
|
|
13837
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
|
+
}
|
|
13838
14120
|
onEscapePress() {
|
|
13839
14121
|
if (this.closeOnEscapeEnabled) {
|
|
13840
14122
|
this.dialogRef.close();
|
|
@@ -13848,21 +14130,25 @@ class SolarisDialogContainerComponent {
|
|
|
13848
14130
|
}
|
|
13849
14131
|
}
|
|
13850
14132
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13851
|
-
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 });
|
|
13852
14134
|
}
|
|
13853
14135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContainerComponent, decorators: [{
|
|
13854
14136
|
type: Component,
|
|
13855
|
-
args: [{ selector: 'solaris-dialog-container', standalone: true, imports: [CdkTrapFocus, SolarisDialogComponent,
|
|
13856
|
-
'[attr.data-
|
|
14137
|
+
args: [{ selector: 'solaris-dialog-container', standalone: true, imports: [CdkTrapFocus, SolarisDialogComponent, SolarisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14138
|
+
'[attr.data-fullscreen]': 'hostFullscreen',
|
|
13857
14139
|
class: 'solaris-dialog-container',
|
|
14140
|
+
'[attr.data-radius]': 'hostRadius',
|
|
13858
14141
|
'[attr.data-variant]': 'hostVariant',
|
|
14142
|
+
'[attr.data-density]': 'hostDensity',
|
|
14143
|
+
'[attr.data-backdrop]': 'hasBackdrop',
|
|
13859
14144
|
'[attr.data-appearance]': 'hostAppearance',
|
|
13860
14145
|
'[attr.data-placement]': 'hostPlacement',
|
|
13861
|
-
'[attr.data-
|
|
13862
|
-
|
|
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"] }]
|
|
13863
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', { ...{
|
|
13864
14150
|
read: ViewContainerRef,
|
|
13865
|
-
}, 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: [{
|
|
13866
14152
|
type: HostListener,
|
|
13867
14153
|
args: ['document:keydown.escape']
|
|
13868
14154
|
}] } });
|
|
@@ -13891,8 +14177,8 @@ class SolarisDialogRef {
|
|
|
13891
14177
|
|
|
13892
14178
|
const SOLARIS_DIALOG_CONFIG = new InjectionToken('SolarisDialogConfig');
|
|
13893
14179
|
const SOLARIS_DIALOG_DEFAULT_CONFIG = {
|
|
13894
|
-
appearance: '
|
|
13895
|
-
|
|
14180
|
+
appearance: 'outline',
|
|
14181
|
+
fullscreen: false,
|
|
13896
14182
|
placement: 'center',
|
|
13897
14183
|
closeable: true,
|
|
13898
14184
|
backdrop: true,
|
|
@@ -13901,14 +14187,18 @@ const SOLARIS_DIALOG_DEFAULT_CONFIG = {
|
|
|
13901
14187
|
autoFocus: 'first-tabbable',
|
|
13902
14188
|
restoreFocus: true,
|
|
13903
14189
|
role: 'dialog',
|
|
14190
|
+
headerSeparator: true,
|
|
14191
|
+
footerSeparator: true,
|
|
13904
14192
|
actionsAlign: 'end',
|
|
13905
14193
|
actionsStack: 'auto',
|
|
13906
14194
|
};
|
|
13907
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.
|
|
13908
14197
|
let nextDialogId = 0;
|
|
13909
14198
|
class SolarisDialogService {
|
|
13910
14199
|
injector = inject(Injector);
|
|
13911
14200
|
overlay = inject(Overlay);
|
|
14201
|
+
document = inject(DOCUMENT$1);
|
|
13912
14202
|
config;
|
|
13913
14203
|
openDialogs = new Set();
|
|
13914
14204
|
constructor() {
|
|
@@ -13929,7 +14219,10 @@ class SolarisDialogService {
|
|
|
13929
14219
|
const portal = new ComponentPortal(SolarisDialogContainerComponent, null, injector);
|
|
13930
14220
|
const componentRef = overlayRef.attach(portal);
|
|
13931
14221
|
componentRef.setInput('simpleOptions', mergedOptions);
|
|
13932
|
-
this.trackDialog(ref, overlayRef
|
|
14222
|
+
this.trackDialog(ref, overlayRef, {
|
|
14223
|
+
restoreFocus: mergedOptions.restoreFocus ?? true,
|
|
14224
|
+
previouslyFocused: this.document.activeElement,
|
|
14225
|
+
});
|
|
13933
14226
|
return ref;
|
|
13934
14227
|
}
|
|
13935
14228
|
openComponent(component, config) {
|
|
@@ -13942,17 +14235,52 @@ class SolarisDialogService {
|
|
|
13942
14235
|
const componentRef = overlayRef.attach(portal);
|
|
13943
14236
|
componentRef.setInput('externalComponent', component);
|
|
13944
14237
|
componentRef.setInput('externalComponentConfig', config ?? {});
|
|
13945
|
-
this.trackDialog(ref, overlayRef
|
|
14238
|
+
this.trackDialog(ref, overlayRef, {
|
|
14239
|
+
restoreFocus: config?.restoreFocus ?? this.config.restoreFocus ?? true,
|
|
14240
|
+
previouslyFocused: this.document.activeElement,
|
|
14241
|
+
});
|
|
13946
14242
|
return ref;
|
|
13947
14243
|
}
|
|
13948
14244
|
createOverlay(placement, backdrop = true) {
|
|
13949
14245
|
const positionStrategy = this.overlay.position().global();
|
|
13950
|
-
|
|
13951
|
-
|
|
13952
|
-
|
|
13953
|
-
|
|
13954
|
-
|
|
13955
|
-
|
|
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;
|
|
13956
14284
|
}
|
|
13957
14285
|
return this.overlay.create({
|
|
13958
14286
|
hasBackdrop: false,
|
|
@@ -13975,20 +14303,35 @@ class SolarisDialogService {
|
|
|
13975
14303
|
parent: this.injector,
|
|
13976
14304
|
});
|
|
13977
14305
|
}
|
|
13978
|
-
trackDialog(ref, overlayRef) {
|
|
14306
|
+
trackDialog(ref, overlayRef, focus) {
|
|
13979
14307
|
const entry = { ref, overlayRef };
|
|
13980
14308
|
this.openDialogs.add(entry);
|
|
13981
14309
|
ref.afterClosed().subscribe(() => {
|
|
13982
14310
|
overlayRef.detach();
|
|
13983
14311
|
overlayRef.dispose();
|
|
13984
14312
|
this.openDialogs.delete(entry);
|
|
14313
|
+
this.restoreFocus(focus);
|
|
13985
14314
|
});
|
|
13986
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
|
+
}
|
|
13987
14329
|
resolveOptions(options) {
|
|
13988
14330
|
return {
|
|
14331
|
+
...options,
|
|
13989
14332
|
variant: options.variant ?? 'neutral',
|
|
13990
14333
|
appearance: options.appearance ?? this.config.appearance,
|
|
13991
|
-
|
|
14334
|
+
fullscreen: options.fullscreen ?? this.config.fullscreen ?? false,
|
|
13992
14335
|
closeable: options.closeable ?? this.config.closeable ?? true,
|
|
13993
14336
|
backdrop: options.backdrop ?? this.config.backdrop ?? true,
|
|
13994
14337
|
closeOnEscape: options.closeOnEscape ?? this.config.closeOnEscape ?? true,
|
|
@@ -13999,9 +14342,15 @@ class SolarisDialogService {
|
|
|
13999
14342
|
restoreFocus: options.restoreFocus ?? this.config.restoreFocus ?? true,
|
|
14000
14343
|
role: options.role ?? this.config.role,
|
|
14001
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,
|
|
14002
14352
|
actionsAlign: options.actionsAlign ?? this.config.actionsAlign ?? 'end',
|
|
14003
14353
|
actionsStack: options.actionsStack ?? this.config.actionsStack ?? 'auto',
|
|
14004
|
-
...options,
|
|
14005
14354
|
};
|
|
14006
14355
|
}
|
|
14007
14356
|
closeAll() {
|