@educarehq/solaris-ui 0.27.0 → 0.27.3
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, model, TemplateRef, ViewContainerRef, contentChild, forwardRef, ViewChild, ViewEncapsulation, contentChildren, NgZone, Injector, viewChild, isDevMode, ChangeDetectorRef, numberAttribute, afterNextRender, viewChildren, ApplicationRef } from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, model, TemplateRef, ViewContainerRef, contentChild, forwardRef, ViewChild, ViewEncapsulation, contentChildren, NgZone, Injector, viewChild, isDevMode, ChangeDetectorRef, numberAttribute, afterNextRender, viewChildren, ApplicationRef, afterEveryRender } from '@angular/core';
|
|
3
3
|
import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
|
|
5
5
|
import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
|
|
@@ -14156,17 +14156,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
14156
14156
|
}, 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"] }]
|
|
14157
14157
|
}], propDecorators: { density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }] } });
|
|
14158
14158
|
|
|
14159
|
+
// SECURITY_EXCEPTION_FILE: ElementRef.nativeElement is the standard Angular API to read the host element for scroll-parent lookup (parentElement traversal) and passive scroll listener for scrolled state. SSR-safe via isPlatformBrowser guard with DestroyRef cleanup. No alternative exists.
|
|
14159
14160
|
class SolarisDialogActionsComponent {
|
|
14160
14161
|
dialogRef = inject(SOLARIS_DIALOG_REF);
|
|
14161
14162
|
translateService = inject(SolarisTranslateService, {
|
|
14162
14163
|
optional: true,
|
|
14163
14164
|
});
|
|
14165
|
+
hostElement = inject(ElementRef).nativeElement;
|
|
14166
|
+
destroyRef = inject(DestroyRef);
|
|
14167
|
+
platformId = inject(PLATFORM_ID);
|
|
14164
14168
|
actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
14165
14169
|
align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
14166
14170
|
stack = input('auto', ...(ngDevMode ? [{ debugName: "stack" }] : /* istanbul ignore next */ []));
|
|
14167
14171
|
separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14168
14172
|
density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
|
|
14173
|
+
scrolled = input(...(ngDevMode ? [undefined, { debugName: "scrolled" }] : /* istanbul ignore next */ []));
|
|
14174
|
+
internalScrolled = signal(false, ...(ngDevMode ? [{ debugName: "internalScrolled" }] : /* istanbul ignore next */ []));
|
|
14175
|
+
effectiveScrolled = computed(() => this.scrolled() ?? this.internalScrolled(), ...(ngDevMode ? [{ debugName: "effectiveScrolled" }] : /* istanbul ignore next */ []));
|
|
14169
14176
|
actionExecuted = output();
|
|
14177
|
+
ngAfterViewInit() {
|
|
14178
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
14179
|
+
return;
|
|
14180
|
+
}
|
|
14181
|
+
this.observeScrollParent();
|
|
14182
|
+
}
|
|
14183
|
+
observeScrollParent() {
|
|
14184
|
+
const scrollParent = findScrollParent$2(this.hostElement);
|
|
14185
|
+
if (!scrollParent) {
|
|
14186
|
+
return;
|
|
14187
|
+
}
|
|
14188
|
+
const update = () => {
|
|
14189
|
+
this.internalScrolled.set(hasMoreBelow$1(scrollParent));
|
|
14190
|
+
};
|
|
14191
|
+
update();
|
|
14192
|
+
scrollParent.addEventListener('scroll', update, { passive: true });
|
|
14193
|
+
this.destroyRef.onDestroy(() => {
|
|
14194
|
+
scrollParent.removeEventListener('scroll', update);
|
|
14195
|
+
});
|
|
14196
|
+
}
|
|
14170
14197
|
resolvedLabel(action) {
|
|
14171
14198
|
if (action.labelKey) {
|
|
14172
14199
|
return this.translateService?.translate(action.labelKey) ?? action.label;
|
|
@@ -14189,7 +14216,7 @@ class SolarisDialogActionsComponent {
|
|
|
14189
14216
|
this.actionExecuted.emit(action);
|
|
14190
14217
|
}
|
|
14191
14218
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14192
|
-
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 });
|
|
14219
|
+
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 }, scrolled: { classPropertyName: "scrolled", publicName: "scrolled", 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()", "attr.data-scrolled": "effectiveScrolled() ? '' : null" }, 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;flex-shrink:0;position:sticky;bottom:0;z-index:var(--solaris-dialog-actions-z-index);background:var(--solaris-dialog-panel-bg);padding:var(--solaris-spacing-0);--solaris-dialog-actions-border-color: var(--solaris-border-default);--solaris-dialog-actions-z-index: var(--solaris-z-index-raised);--solaris-dialog-actions-scrolled-shadow: var(--solaris-shadow-md)}:host([data-separator]){border-top:var(--solaris-border-width-sm) solid var(--solaris-dialog-actions-border-color)}:host([data-scrolled]){box-shadow:var(--solaris-dialog-actions-scrolled-shadow)}.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 });
|
|
14193
14220
|
}
|
|
14194
14221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogActionsComponent, decorators: [{
|
|
14195
14222
|
type: Component,
|
|
@@ -14198,29 +14225,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
14198
14225
|
'[attr.data-stack]': 'stack()',
|
|
14199
14226
|
'[attr.data-separator]': "separator() ? '' : null",
|
|
14200
14227
|
'[attr.data-density]': 'density()',
|
|
14228
|
+
'[attr.data-scrolled]': "effectiveScrolled() ? '' : null",
|
|
14201
14229
|
class: 'solaris-dialog-actions',
|
|
14202
|
-
}, 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"] }]
|
|
14203
|
-
}], 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"] }] } });
|
|
14230
|
+
}, 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;flex-shrink:0;position:sticky;bottom:0;z-index:var(--solaris-dialog-actions-z-index);background:var(--solaris-dialog-panel-bg);padding:var(--solaris-spacing-0);--solaris-dialog-actions-border-color: var(--solaris-border-default);--solaris-dialog-actions-z-index: var(--solaris-z-index-raised);--solaris-dialog-actions-scrolled-shadow: var(--solaris-shadow-md)}:host([data-separator]){border-top:var(--solaris-border-width-sm) solid var(--solaris-dialog-actions-border-color)}:host([data-scrolled]){box-shadow:var(--solaris-dialog-actions-scrolled-shadow)}.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"] }]
|
|
14231
|
+
}], 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 }] }], scrolled: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrolled", required: false }] }], actionExecuted: [{ type: i0.Output, args: ["actionExecuted"] }] } });
|
|
14232
|
+
function findScrollParent$2(element) {
|
|
14233
|
+
let parent = element.parentElement;
|
|
14234
|
+
while (parent) {
|
|
14235
|
+
const overflowY = getComputedStyle(parent).overflowY;
|
|
14236
|
+
if (overflowY === 'auto' || overflowY === 'scroll') {
|
|
14237
|
+
return parent;
|
|
14238
|
+
}
|
|
14239
|
+
parent = parent.parentElement;
|
|
14240
|
+
}
|
|
14241
|
+
return null;
|
|
14242
|
+
}
|
|
14243
|
+
function hasMoreBelow$1(element) {
|
|
14244
|
+
return element.scrollTop + element.clientHeight < element.scrollHeight - 1;
|
|
14245
|
+
}
|
|
14204
14246
|
|
|
14247
|
+
// SECURITY_EXCEPTION_FILE: ElementRef.nativeElement is the standard Angular API to read the host element for scroll-parent lookup (parentElement traversal) and passive scroll listener for scrolled state. SSR-safe via isPlatformBrowser guard with DestroyRef cleanup. No alternative exists.
|
|
14205
14248
|
let nextDialogHeaderId = 0;
|
|
14206
14249
|
class SolarisDialogHeaderComponent {
|
|
14207
14250
|
dialogRef = inject(SOLARIS_DIALOG_REF, {
|
|
14208
14251
|
optional: true,
|
|
14209
14252
|
});
|
|
14253
|
+
hostElement = inject(ElementRef).nativeElement;
|
|
14254
|
+
destroyRef = inject(DestroyRef);
|
|
14255
|
+
platformId = inject(PLATFORM_ID);
|
|
14210
14256
|
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
14211
14257
|
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
14212
14258
|
description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
14213
14259
|
iconDecorative = input(false, ...(ngDevMode ? [{ debugName: "iconDecorative" }] : /* istanbul ignore next */ []));
|
|
14214
14260
|
variant = input('neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
14215
14261
|
separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14262
|
+
closeable = input(false, { ...(ngDevMode ? { debugName: "closeable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14263
|
+
closeLabel = input('Close', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
14264
|
+
scrolled = input(...(ngDevMode ? [undefined, { debugName: "scrolled" }] : /* istanbul ignore next */ []));
|
|
14265
|
+
internalScrolled = signal(false, ...(ngDevMode ? [{ debugName: "internalScrolled" }] : /* istanbul ignore next */ []));
|
|
14266
|
+
effectiveScrolled = computed(() => this.scrolled() ?? this.internalScrolled(), ...(ngDevMode ? [{ debugName: "effectiveScrolled" }] : /* istanbul ignore next */ []));
|
|
14216
14267
|
idPrefix = this.dialogRef?.id ?? `solaris-dialog-${++nextDialogHeaderId}`;
|
|
14217
14268
|
titleId = `${this.idPrefix}-title`;
|
|
14218
14269
|
descriptionId = `${this.idPrefix}-description`;
|
|
14219
14270
|
hasTitle = () => !!this.title();
|
|
14220
14271
|
hasDescription = () => !!this.description();
|
|
14221
14272
|
hasIcon = () => !!this.icon();
|
|
14273
|
+
showClose = () => this.closeable();
|
|
14274
|
+
ngAfterViewInit() {
|
|
14275
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
14276
|
+
return;
|
|
14277
|
+
}
|
|
14278
|
+
this.observeScrollParent();
|
|
14279
|
+
}
|
|
14280
|
+
closeDialog() {
|
|
14281
|
+
this.dialogRef?.close();
|
|
14282
|
+
}
|
|
14283
|
+
observeScrollParent() {
|
|
14284
|
+
const scrollParent = findScrollParent$1(this.hostElement);
|
|
14285
|
+
if (!scrollParent) {
|
|
14286
|
+
return;
|
|
14287
|
+
}
|
|
14288
|
+
const update = () => {
|
|
14289
|
+
this.internalScrolled.set(scrollParent.scrollTop > 0);
|
|
14290
|
+
};
|
|
14291
|
+
update();
|
|
14292
|
+
scrollParent.addEventListener('scroll', update, { passive: true });
|
|
14293
|
+
this.destroyRef.onDestroy(() => {
|
|
14294
|
+
scrollParent.removeEventListener('scroll', update);
|
|
14295
|
+
});
|
|
14296
|
+
}
|
|
14222
14297
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14223
|
-
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
|
|
14298
|
+
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 }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, scrolled: { classPropertyName: "scrolled", publicName: "scrolled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-separator": "separator() ? '' : null", "attr.data-scrolled": "effectiveScrolled() ? '' : null" }, classAttribute: "solaris-dialog-header" }, ngImport: i0, template: "<div class=\"solaris-dialog-header__start\">\n <div class=\"solaris-dialog-header__row\">\n @if (hasIcon()) {\n <div class=\"solaris-dialog-header__icon\">\n <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n </div>\n }\n\n @if (hasTitle()) {\n <h2 class=\"solaris-dialog-header__title\" [attr.id]=\"titleId\">\n {{ title() }}\n </h2>\n }\n\n @if (showClose()) {\n <button\n type=\"button\"\n data-dialog-close\n (click)=\"closeDialog()\"\n [attr.aria-label]=\"closeLabel()\"\n class=\"solaris-dialog-header__close\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n\n @if (hasDescription()) {\n <p class=\"solaris-dialog-header__description\" [attr.id]=\"descriptionId\">\n {{ description() }}\n </p>\n }\n</div>\n", styles: [":host{display:flex;flex-shrink:0;position:sticky;top:0;z-index:var(--solaris-dialog-header-z-index);background:var(--solaris-dialog-panel-bg);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);--solaris-dialog-header-z-index: var(--solaris-z-index-raised);--solaris-dialog-header-scrolled-shadow: var(--solaris-shadow-md)}: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-scrolled]){box-shadow:var(--solaris-dialog-header-scrolled-shadow)}: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;flex-direction:column;padding:var(--solaris-spacing-3)}.solaris-dialog-header__row{display:flex;align-items:center;gap:var(--solaris-spacing-3);min-height:var(--solaris-dialog-media-size)}.solaris-dialog-header__icon{flex-shrink:0;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__title{flex:1;min-width:0;margin:0;color:var(--solaris-text-strong);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);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)}.solaris-dialog-header__start:has(.solaris-dialog-header__icon) .solaris-dialog-header__description{margin-left:calc(var(--solaris-dialog-icon-size) + var(--solaris-spacing-3))}.solaris-dialog-header__close{border:none;display:flex;cursor:pointer;background:none;flex-shrink:0;align-items:center;justify-content:center;margin-left:auto;width:var(--solaris-dialog-media-size);height:var(--solaris-dialog-media-size);border-radius:var(--solaris-radius-sm);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-header__close:hover{color:var(--solaris-text-strong)}.solaris-dialog-header__close:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14224
14299
|
}
|
|
14225
14300
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogHeaderComponent, decorators: [{
|
|
14226
14301
|
type: Component,
|
|
@@ -14228,14 +14303,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
14228
14303
|
class: 'solaris-dialog-header',
|
|
14229
14304
|
'[attr.data-variant]': 'variant()',
|
|
14230
14305
|
'[attr.data-separator]': "separator() ? '' : null",
|
|
14231
|
-
|
|
14232
|
-
|
|
14306
|
+
'[attr.data-scrolled]': "effectiveScrolled() ? '' : null",
|
|
14307
|
+
}, template: "<div class=\"solaris-dialog-header__start\">\n <div class=\"solaris-dialog-header__row\">\n @if (hasIcon()) {\n <div class=\"solaris-dialog-header__icon\">\n <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n </div>\n }\n\n @if (hasTitle()) {\n <h2 class=\"solaris-dialog-header__title\" [attr.id]=\"titleId\">\n {{ title() }}\n </h2>\n }\n\n @if (showClose()) {\n <button\n type=\"button\"\n data-dialog-close\n (click)=\"closeDialog()\"\n [attr.aria-label]=\"closeLabel()\"\n class=\"solaris-dialog-header__close\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n\n @if (hasDescription()) {\n <p class=\"solaris-dialog-header__description\" [attr.id]=\"descriptionId\">\n {{ description() }}\n </p>\n }\n</div>\n", styles: [":host{display:flex;flex-shrink:0;position:sticky;top:0;z-index:var(--solaris-dialog-header-z-index);background:var(--solaris-dialog-panel-bg);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);--solaris-dialog-header-z-index: var(--solaris-z-index-raised);--solaris-dialog-header-scrolled-shadow: var(--solaris-shadow-md)}: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-scrolled]){box-shadow:var(--solaris-dialog-header-scrolled-shadow)}: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;flex-direction:column;padding:var(--solaris-spacing-3)}.solaris-dialog-header__row{display:flex;align-items:center;gap:var(--solaris-spacing-3);min-height:var(--solaris-dialog-media-size)}.solaris-dialog-header__icon{flex-shrink:0;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__title{flex:1;min-width:0;margin:0;color:var(--solaris-text-strong);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);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)}.solaris-dialog-header__start:has(.solaris-dialog-header__icon) .solaris-dialog-header__description{margin-left:calc(var(--solaris-dialog-icon-size) + var(--solaris-spacing-3))}.solaris-dialog-header__close{border:none;display:flex;cursor:pointer;background:none;flex-shrink:0;align-items:center;justify-content:center;margin-left:auto;width:var(--solaris-dialog-media-size);height:var(--solaris-dialog-media-size);border-radius:var(--solaris-radius-sm);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-header__close:hover{color:var(--solaris-text-strong)}.solaris-dialog-header__close:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}\n"] }]
|
|
14308
|
+
}], 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 }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], scrolled: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrolled", required: false }] }] } });
|
|
14309
|
+
function findScrollParent$1(element) {
|
|
14310
|
+
let parent = element.parentElement;
|
|
14311
|
+
while (parent) {
|
|
14312
|
+
const overflowY = getComputedStyle(parent).overflowY;
|
|
14313
|
+
if (overflowY === 'auto' || overflowY === 'scroll') {
|
|
14314
|
+
return parent;
|
|
14315
|
+
}
|
|
14316
|
+
parent = parent.parentElement;
|
|
14317
|
+
}
|
|
14318
|
+
return null;
|
|
14319
|
+
}
|
|
14233
14320
|
|
|
14321
|
+
// SECURITY_EXCEPTION_FILE: ElementRef.nativeElement is the standard Angular API to read the host element for capture-phase scroll listener tracking bodyScrolled state. SSR-safe via afterNextRender with DestroyRef cleanup. No alternative exists.
|
|
14234
14322
|
class SolarisDialogComponent {
|
|
14235
14323
|
translateService = inject(SolarisTranslateService, {
|
|
14236
14324
|
optional: true,
|
|
14237
14325
|
});
|
|
14238
14326
|
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
14327
|
+
hostElement = inject(ElementRef).nativeElement;
|
|
14328
|
+
destroyRef = inject(DestroyRef);
|
|
14329
|
+
bodyScrolled = signal(false, ...(ngDevMode ? [{ debugName: "bodyScrolled" }] : /* istanbul ignore next */ []));
|
|
14330
|
+
bodyHasMoreBelow = signal(false, ...(ngDevMode ? [{ debugName: "bodyHasMoreBelow" }] : /* istanbul ignore next */ []));
|
|
14331
|
+
constructor() {
|
|
14332
|
+
afterNextRender(() => {
|
|
14333
|
+
const syncFrom = (target) => {
|
|
14334
|
+
if (!target) {
|
|
14335
|
+
return;
|
|
14336
|
+
}
|
|
14337
|
+
this.bodyScrolled.set(target.scrollTop > 0);
|
|
14338
|
+
this.bodyHasMoreBelow.set(target.scrollTop + target.clientHeight < target.scrollHeight - 1);
|
|
14339
|
+
};
|
|
14340
|
+
const onScroll = (event) => {
|
|
14341
|
+
syncFrom(event.target);
|
|
14342
|
+
};
|
|
14343
|
+
this.hostElement.addEventListener('scroll', onScroll, { capture: true });
|
|
14344
|
+
this.hostElement
|
|
14345
|
+
.querySelectorAll('.solaris-dialog__body, solaris-dialog-content')
|
|
14346
|
+
.forEach((element) => syncFrom(element));
|
|
14347
|
+
this.destroyRef.onDestroy(() => {
|
|
14348
|
+
this.hostElement.removeEventListener('scroll', onScroll, {
|
|
14349
|
+
capture: true,
|
|
14350
|
+
});
|
|
14351
|
+
});
|
|
14352
|
+
});
|
|
14353
|
+
}
|
|
14239
14354
|
hasActions = computed(() => {
|
|
14240
14355
|
const actions = this.options().actions;
|
|
14241
14356
|
return actions && actions.length > 0;
|
|
@@ -14268,6 +14383,15 @@ class SolarisDialogComponent {
|
|
|
14268
14383
|
}
|
|
14269
14384
|
return this.description();
|
|
14270
14385
|
}, ...(ngDevMode ? [{ debugName: "resolvedDescription" }] : /* istanbul ignore next */ []));
|
|
14386
|
+
closeable = computed(() => this.options().closeable ?? true, ...(ngDevMode ? [{ debugName: "closeable" }] : /* istanbul ignore next */ []));
|
|
14387
|
+
resolvedCloseLabel = computed(() => {
|
|
14388
|
+
const closeLabelKey = this.options().closeLabelKey;
|
|
14389
|
+
const closeLabel = this.options().closeLabel ?? 'Close';
|
|
14390
|
+
if (closeLabelKey) {
|
|
14391
|
+
return this.translateService?.translate(closeLabelKey) ?? closeLabel;
|
|
14392
|
+
}
|
|
14393
|
+
return closeLabel;
|
|
14394
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedCloseLabel" }] : /* istanbul ignore next */ []));
|
|
14271
14395
|
actions = computed(() => {
|
|
14272
14396
|
const variant = this.variant();
|
|
14273
14397
|
const shape = this.actionsShape();
|
|
@@ -14291,7 +14415,7 @@ class SolarisDialogComponent {
|
|
|
14291
14415
|
});
|
|
14292
14416
|
}, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
14293
14417
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14294
|
-
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 });
|
|
14418
|
+
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 [closeable]=\"closeable()\"\n [closeLabel]=\"resolvedCloseLabel()\"\n [scrolled]=\"bodyScrolled()\"\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 [scrolled]=\"bodyHasMoreBelow()\"\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", "closeable", "closeLabel", "scrolled"] }, { kind: "component", type: SolarisDialogContentComponent, selector: "solaris-dialog-content", inputs: ["density"] }, { kind: "component", type: SolarisDialogActionsComponent, selector: "solaris-dialog-actions", inputs: ["actions", "align", "stack", "separator", "density", "scrolled"], outputs: ["actionExecuted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14295
14419
|
}
|
|
14296
14420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogComponent, decorators: [{
|
|
14297
14421
|
type: Component,
|
|
@@ -14302,8 +14426,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
14302
14426
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14303
14427
|
class: 'solaris-dialog',
|
|
14304
14428
|
'[attr.role]': 'null',
|
|
14305
|
-
}, 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"] }]
|
|
14306
|
-
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
|
|
14429
|
+
}, template: "<solaris-dialog-header\n [icon]=\"icon()\"\n [title]=\"resolvedTitle()\"\n [variant]=\"variant()\"\n [description]=\"resolvedDescription()\"\n [separator]=\"headerSeparator()\"\n [iconDecorative]=\"iconDecorative()\"\n [closeable]=\"closeable()\"\n [closeLabel]=\"resolvedCloseLabel()\"\n [scrolled]=\"bodyScrolled()\"\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 [scrolled]=\"bodyHasMoreBelow()\"\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"] }]
|
|
14430
|
+
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
|
|
14307
14431
|
|
|
14308
14432
|
// 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.
|
|
14309
14433
|
class SolarisDialogContainerComponent {
|
|
@@ -14377,6 +14501,18 @@ class SolarisDialogContainerComponent {
|
|
|
14377
14501
|
return this.simpleOptions()?.closeable ?? true;
|
|
14378
14502
|
return this.externalComponentConfig()?.closeable ?? true;
|
|
14379
14503
|
}
|
|
14504
|
+
panelScrolled = signal(false, ...(ngDevMode ? [{ debugName: "panelScrolled" }] : /* istanbul ignore next */ []));
|
|
14505
|
+
panelHasMoreBelow = signal(false, ...(ngDevMode ? [{ debugName: "panelHasMoreBelow" }] : /* istanbul ignore next */ []));
|
|
14506
|
+
hasManualHeader = signal(false, ...(ngDevMode ? [{ debugName: "hasManualHeader" }] : /* istanbul ignore next */ []));
|
|
14507
|
+
get showFloatingClose() {
|
|
14508
|
+
return (this.closeable &&
|
|
14509
|
+
!this.hasChromeHeader &&
|
|
14510
|
+
!this.isSimpleMode &&
|
|
14511
|
+
!this.hasManualHeader());
|
|
14512
|
+
}
|
|
14513
|
+
onPanelBodyScroll() {
|
|
14514
|
+
this.syncPanelScrollState();
|
|
14515
|
+
}
|
|
14380
14516
|
get panelAriaLabel() {
|
|
14381
14517
|
const options = this.simpleOptions();
|
|
14382
14518
|
if (options) {
|
|
@@ -14494,12 +14630,10 @@ class SolarisDialogContainerComponent {
|
|
|
14494
14630
|
const radius = config?.actionsRadius;
|
|
14495
14631
|
return (config?.actions ?? []).map((action) => {
|
|
14496
14632
|
const appearance = action.appearance ?? 'solid';
|
|
14497
|
-
|
|
14498
|
-
|
|
14499
|
-
|
|
14500
|
-
|
|
14501
|
-
? variant
|
|
14502
|
-
: undefined;
|
|
14633
|
+
let color = action.color;
|
|
14634
|
+
if (color === undefined && appearance === 'solid') {
|
|
14635
|
+
color = variant;
|
|
14636
|
+
}
|
|
14503
14637
|
return {
|
|
14504
14638
|
...action,
|
|
14505
14639
|
color,
|
|
@@ -14596,6 +14730,22 @@ class SolarisDialogContainerComponent {
|
|
|
14596
14730
|
this.createComponentInHost(comp);
|
|
14597
14731
|
}
|
|
14598
14732
|
});
|
|
14733
|
+
afterEveryRender(() => {
|
|
14734
|
+
this.syncPanelScrollState();
|
|
14735
|
+
});
|
|
14736
|
+
}
|
|
14737
|
+
syncPanelScrollState() {
|
|
14738
|
+
const panel = this._dialogPanel()?.nativeElement;
|
|
14739
|
+
const body = panel?.querySelector('.solaris-dialog-panel__body');
|
|
14740
|
+
const scrollTop = body?.scrollTop ?? 0;
|
|
14741
|
+
this.panelScrolled.set(scrollTop > 0);
|
|
14742
|
+
this.panelHasMoreBelow.set(body ? scrollTop + body.clientHeight < body.scrollHeight - 1 : false);
|
|
14743
|
+
const manualHeaderFound = panel
|
|
14744
|
+
? panel.querySelector('.solaris-dialog-panel__body solaris-dialog-header') !== null
|
|
14745
|
+
: false;
|
|
14746
|
+
if (manualHeaderFound !== this.hasManualHeader()) {
|
|
14747
|
+
this.hasManualHeader.set(manualHeaderFound);
|
|
14748
|
+
}
|
|
14599
14749
|
}
|
|
14600
14750
|
createComponentInHost(compType) {
|
|
14601
14751
|
const host = this._componentHost();
|
|
@@ -14634,6 +14784,11 @@ class SolarisDialogContainerComponent {
|
|
|
14634
14784
|
panel.focus();
|
|
14635
14785
|
return;
|
|
14636
14786
|
}
|
|
14787
|
+
const firstAction = panel.querySelector('solaris-dialog-actions button:not([disabled])');
|
|
14788
|
+
if (firstAction) {
|
|
14789
|
+
firstAction.focus();
|
|
14790
|
+
return;
|
|
14791
|
+
}
|
|
14637
14792
|
this._focusTrap()?.focusTrap?.focusInitialElement();
|
|
14638
14793
|
}
|
|
14639
14794
|
closeDialog() {
|
|
@@ -14652,7 +14807,7 @@ class SolarisDialogContainerComponent {
|
|
|
14652
14807
|
}
|
|
14653
14808
|
}
|
|
14654
14809
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14655
|
-
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 @if (hasChromeHeader) {\n <solaris-dialog-header\n [icon]=\"chromeIcon\"\n [title]=\"chromeTitle\"\n [variant]=\"chromeVariant\"\n [description]=\"chromeDescription\"\n [separator]=\"chromeHeaderSeparator\"\n [iconDecorative]=\"chromeIconDecorative\"\n />\n }\n <div class=\"solaris-dialog-panel__body\">\n <ng-template #componentHost></ng-template>\n </div>\n @if (hasChromeActions) {\n <solaris-dialog-actions\n [actions]=\"chromeActions\"\n [align]=\"chromeActionsAlign\"\n [stack]=\"chromeActionsStack\"\n [separator]=\"chromeFooterSeparator\"\n [density]=\"chromeDensity\"\n />\n }\n }\n @if (
|
|
14810
|
+
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 @if (hasChromeHeader) {\n <solaris-dialog-header\n [icon]=\"chromeIcon\"\n [title]=\"chromeTitle\"\n [variant]=\"chromeVariant\"\n [description]=\"chromeDescription\"\n [separator]=\"chromeHeaderSeparator\"\n [iconDecorative]=\"chromeIconDecorative\"\n [closeable]=\"closeable\"\n [closeLabel]=\"resolvedCloseLabel\"\n [scrolled]=\"panelScrolled()\"\n />\n }\n <div class=\"solaris-dialog-panel__body\" (scroll)=\"onPanelBodyScroll()\">\n <ng-template #componentHost></ng-template>\n </div>\n @if (hasChromeActions) {\n <solaris-dialog-actions\n [actions]=\"chromeActions\"\n [align]=\"chromeActionsAlign\"\n [stack]=\"chromeActionsStack\"\n [separator]=\"chromeFooterSeparator\"\n [density]=\"chromeDensity\"\n [scrolled]=\"panelHasMoreBelow()\"\n />\n }\n }\n @if (showFloatingClose) {\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: 400px;--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-panel__body{flex:1;min-height:0;overflow:hidden auto}.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: SolarisDialogHeaderComponent, selector: "solaris-dialog-header", inputs: ["icon", "title", "description", "iconDecorative", "variant", "separator", "closeable", "closeLabel", "scrolled"] }, { kind: "component", type: SolarisDialogActionsComponent, selector: "solaris-dialog-actions", inputs: ["actions", "align", "stack", "separator", "density", "scrolled"], outputs: ["actionExecuted"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14656
14811
|
}
|
|
14657
14812
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContainerComponent, decorators: [{
|
|
14658
14813
|
type: Component,
|
|
@@ -14673,7 +14828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
14673
14828
|
'[attr.data-placement]': 'hostPlacement',
|
|
14674
14829
|
'[attr.data-header-separator]': 'hostHeaderSeparator',
|
|
14675
14830
|
'[attr.data-footer-separator]': 'hostFooterSeparator',
|
|
14676
|
-
}, 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 @if (hasChromeHeader) {\n <solaris-dialog-header\n [icon]=\"chromeIcon\"\n [title]=\"chromeTitle\"\n [variant]=\"chromeVariant\"\n [description]=\"chromeDescription\"\n [separator]=\"chromeHeaderSeparator\"\n [iconDecorative]=\"chromeIconDecorative\"\n />\n }\n <div class=\"solaris-dialog-panel__body\">\n <ng-template #componentHost></ng-template>\n </div>\n @if (hasChromeActions) {\n <solaris-dialog-actions\n [actions]=\"chromeActions\"\n [align]=\"chromeActionsAlign\"\n [stack]=\"chromeActionsStack\"\n [separator]=\"chromeFooterSeparator\"\n [density]=\"chromeDensity\"\n />\n }\n }\n @if (
|
|
14831
|
+
}, 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 @if (hasChromeHeader) {\n <solaris-dialog-header\n [icon]=\"chromeIcon\"\n [title]=\"chromeTitle\"\n [variant]=\"chromeVariant\"\n [description]=\"chromeDescription\"\n [separator]=\"chromeHeaderSeparator\"\n [iconDecorative]=\"chromeIconDecorative\"\n [closeable]=\"closeable\"\n [closeLabel]=\"resolvedCloseLabel\"\n [scrolled]=\"panelScrolled()\"\n />\n }\n <div class=\"solaris-dialog-panel__body\" (scroll)=\"onPanelBodyScroll()\">\n <ng-template #componentHost></ng-template>\n </div>\n @if (hasChromeActions) {\n <solaris-dialog-actions\n [actions]=\"chromeActions\"\n [align]=\"chromeActionsAlign\"\n [stack]=\"chromeActionsStack\"\n [separator]=\"chromeFooterSeparator\"\n [density]=\"chromeDensity\"\n [scrolled]=\"panelHasMoreBelow()\"\n />\n }\n }\n @if (showFloatingClose) {\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: 400px;--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-panel__body{flex:1;min-height:0;overflow:hidden auto}.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"] }]
|
|
14677
14832
|
}], 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', { ...{
|
|
14678
14833
|
read: ViewContainerRef,
|
|
14679
14834
|
}, isSignal: true }] }], _dialogPanel: [{ type: i0.ViewChild, args: ['dialogPanel', { isSignal: true }] }], _focusTrap: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }], onEscapePress: [{
|
|
@@ -14918,12 +15073,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
14918
15073
|
type: Injectable
|
|
14919
15074
|
}], ctorParameters: () => [] });
|
|
14920
15075
|
|
|
15076
|
+
// SECURITY_EXCEPTION_FILE: ElementRef.nativeElement is the standard Angular API to read the host element for scroll-parent lookup (parentElement traversal) and passive scroll listener for scrolled state. SSR-safe via isPlatformBrowser guard with DestroyRef cleanup. No alternative exists.
|
|
14921
15077
|
class SolarisDialogFooterComponent {
|
|
15078
|
+
hostElement = inject(ElementRef).nativeElement;
|
|
15079
|
+
destroyRef = inject(DestroyRef);
|
|
15080
|
+
platformId = inject(PLATFORM_ID);
|
|
14922
15081
|
align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
14923
15082
|
separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14924
15083
|
density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
|
|
15084
|
+
scrolled = input(...(ngDevMode ? [undefined, { debugName: "scrolled" }] : /* istanbul ignore next */ []));
|
|
15085
|
+
internalScrolled = signal(false, ...(ngDevMode ? [{ debugName: "internalScrolled" }] : /* istanbul ignore next */ []));
|
|
15086
|
+
effectiveScrolled = computed(() => this.scrolled() ?? this.internalScrolled(), ...(ngDevMode ? [{ debugName: "effectiveScrolled" }] : /* istanbul ignore next */ []));
|
|
15087
|
+
ngAfterViewInit() {
|
|
15088
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
15089
|
+
return;
|
|
15090
|
+
}
|
|
15091
|
+
this.observeScrollParent();
|
|
15092
|
+
}
|
|
15093
|
+
observeScrollParent() {
|
|
15094
|
+
const scrollParent = findScrollParent(this.hostElement);
|
|
15095
|
+
if (!scrollParent) {
|
|
15096
|
+
return;
|
|
15097
|
+
}
|
|
15098
|
+
const update = () => {
|
|
15099
|
+
this.internalScrolled.set(hasMoreBelow(scrollParent));
|
|
15100
|
+
};
|
|
15101
|
+
update();
|
|
15102
|
+
scrollParent.addEventListener('scroll', update, { passive: true });
|
|
15103
|
+
this.destroyRef.onDestroy(() => {
|
|
15104
|
+
scrollParent.removeEventListener('scroll', update);
|
|
15105
|
+
});
|
|
15106
|
+
}
|
|
14925
15107
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14926
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: SolarisDialogFooterComponent, isStandalone: true, selector: "solaris-dialog-footer", inputs: { align: { classPropertyName: "align", publicName: "align", 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 } }, host: { properties: { "attr.data-align": "align()", "attr.data-separator": "separator() ? '' : null", "attr.data-density": "density()" }, classAttribute: "solaris-dialog-footer" }, ngImport: i0, template: "<div class=\"solaris-dialog-footer__inner\">\n <ng-content />\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-footer__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-density=compact]) .solaris-dialog-footer__inner{gap:var(--solaris-spacing-1)}:host([data-density=normal]) .solaris-dialog-footer__inner{gap:var(--solaris-spacing-2)}:host([data-density=comfortable]) .solaris-dialog-footer__inner{gap:var(--solaris-spacing-3)}:host([data-align=start]) .solaris-dialog-footer__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-footer__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-footer__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-footer__inner{justify-content:space-between}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: SolarisDialogFooterComponent, isStandalone: true, selector: "solaris-dialog-footer", inputs: { align: { classPropertyName: "align", publicName: "align", 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 }, scrolled: { classPropertyName: "scrolled", publicName: "scrolled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-align": "align()", "attr.data-separator": "separator() ? '' : null", "attr.data-density": "density()", "attr.data-scrolled": "effectiveScrolled() ? '' : null" }, classAttribute: "solaris-dialog-footer" }, ngImport: i0, template: "<div class=\"solaris-dialog-footer__inner\">\n <ng-content />\n</div>\n", styles: [":host{display:block;flex-shrink:0;position:sticky;bottom:0;z-index:var(--solaris-dialog-footer-z-index);background:var(--solaris-dialog-panel-bg);padding:var(--solaris-spacing-0);--solaris-dialog-actions-border-color: var(--solaris-border-default);--solaris-dialog-footer-z-index: var(--solaris-z-index-raised);--solaris-dialog-footer-scrolled-shadow: var(--solaris-shadow-md)}:host([data-separator]){border-top:var(--solaris-border-width-sm) solid var(--solaris-dialog-actions-border-color)}:host([data-scrolled]){box-shadow:var(--solaris-dialog-footer-scrolled-shadow)}.solaris-dialog-footer__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-density=compact]) .solaris-dialog-footer__inner{gap:var(--solaris-spacing-1)}:host([data-density=normal]) .solaris-dialog-footer__inner{gap:var(--solaris-spacing-2)}:host([data-density=comfortable]) .solaris-dialog-footer__inner{gap:var(--solaris-spacing-3)}:host([data-align=start]) .solaris-dialog-footer__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-footer__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-footer__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-footer__inner{justify-content:space-between}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14927
15109
|
}
|
|
14928
15110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogFooterComponent, decorators: [{
|
|
14929
15111
|
type: Component,
|
|
@@ -14932,8 +15114,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
14932
15114
|
'[attr.data-align]': 'align()',
|
|
14933
15115
|
'[attr.data-separator]': "separator() ? '' : null",
|
|
14934
15116
|
'[attr.data-density]': 'density()',
|
|
14935
|
-
|
|
14936
|
-
|
|
15117
|
+
'[attr.data-scrolled]': "effectiveScrolled() ? '' : null",
|
|
15118
|
+
}, template: "<div class=\"solaris-dialog-footer__inner\">\n <ng-content />\n</div>\n", styles: [":host{display:block;flex-shrink:0;position:sticky;bottom:0;z-index:var(--solaris-dialog-footer-z-index);background:var(--solaris-dialog-panel-bg);padding:var(--solaris-spacing-0);--solaris-dialog-actions-border-color: var(--solaris-border-default);--solaris-dialog-footer-z-index: var(--solaris-z-index-raised);--solaris-dialog-footer-scrolled-shadow: var(--solaris-shadow-md)}:host([data-separator]){border-top:var(--solaris-border-width-sm) solid var(--solaris-dialog-actions-border-color)}:host([data-scrolled]){box-shadow:var(--solaris-dialog-footer-scrolled-shadow)}.solaris-dialog-footer__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-density=compact]) .solaris-dialog-footer__inner{gap:var(--solaris-spacing-1)}:host([data-density=normal]) .solaris-dialog-footer__inner{gap:var(--solaris-spacing-2)}:host([data-density=comfortable]) .solaris-dialog-footer__inner{gap:var(--solaris-spacing-3)}:host([data-align=start]) .solaris-dialog-footer__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-footer__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-footer__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-footer__inner{justify-content:space-between}\n"] }]
|
|
15119
|
+
}], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], scrolled: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrolled", required: false }] }] } });
|
|
15120
|
+
function findScrollParent(element) {
|
|
15121
|
+
let parent = element.parentElement;
|
|
15122
|
+
while (parent) {
|
|
15123
|
+
const overflowY = getComputedStyle(parent).overflowY;
|
|
15124
|
+
if (overflowY === 'auto' || overflowY === 'scroll') {
|
|
15125
|
+
return parent;
|
|
15126
|
+
}
|
|
15127
|
+
parent = parent.parentElement;
|
|
15128
|
+
}
|
|
15129
|
+
return null;
|
|
15130
|
+
}
|
|
15131
|
+
function hasMoreBelow(element) {
|
|
15132
|
+
return element.scrollTop + element.clientHeight < element.scrollHeight - 1;
|
|
15133
|
+
}
|
|
14937
15134
|
|
|
14938
15135
|
class SolarisDialogCloseDirective {
|
|
14939
15136
|
dialogRef = inject(SOLARIS_DIALOG_REF, {
|