@educarehq/solaris-components 0.5.0 → 0.5.2

package/fesm2022/educarehq-solaris-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, ViewChildren, ContentChildren, ApplicationRef, signal, computed, effect, HostListener, Optional, EnvironmentInjector, createComponent, input, booleanAttribute, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, viewChild, numberAttribute, afterNextRender, ViewChild, Injector, output, forwardRef, Host } from '@angular/core';
+import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, ViewChildren, ContentChildren, ApplicationRef, signal, computed, effect, HostListener, Optional, EnvironmentInjector, createComponent, input, booleanAttribute, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, viewChild, numberAttribute, afterNextRender, Injector, ViewChild, output, forwardRef, Host } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -8,7 +8,7 @@ import { filter } from 'rxjs/operators';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { RouterLink } from '@angular/router';
 import * as i1 from '@angular/common';
-import { NgClass, NgTemplateOutlet, CommonModule, NgStyle, isPlatformBrowser, DOCUMENT, NgOptimizedImage } from '@angular/common';
+import { NgClass, NgTemplateOutlet, CommonModule, NgStyle, isPlatformBrowser, NgComponentOutlet, DOCUMENT, NgOptimizedImage } from '@angular/common';
 import { SolarisTranslationPipe, SOLARIS_TRANSLATION, SOLARIS_TRANSLATION_CONFIGURATION } from '@educarehq/solaris-services';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
@@ -3039,6 +3039,277 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: ['attr.aria-orientation']
             }] } });
 
+const SOLARIS_DIALOG_STEP_DATA = new InjectionToken('SOLARIS_DIALOG_STEP_DATA');
+
+const SOLARIS_DIALOG_DATA = new InjectionToken('SOLARIS_DIALOG_DATA');
+
+class SolarisDialogRef {
+    actionSubject = new Subject();
+    closedSubject = new Subject();
+    closeFn;
+    updateActionsFn;
+    updateHeaderFn;
+    afterClosed() {
+        return this.closedSubject.asObservable();
+    }
+    afterAction() {
+        return this.actionSubject.asObservable();
+    }
+    close(result) {
+        this.closeFn?.(result);
+    }
+    updateActions(actions) {
+        this.updateActionsFn?.(actions);
+    }
+    updateHeader(header) {
+        this.updateHeaderFn?.(header);
+    }
+    _attachCloseFn(fn) {
+        this.closeFn = fn;
+    }
+    _attachActionsUpdateFn(fn) {
+        this.updateActionsFn = fn;
+    }
+    _attachHeaderUpdateFn(fn) {
+        this.updateHeaderFn = fn;
+    }
+    _emitAction(action) {
+        this.actionSubject.next(action);
+    }
+    _finishClose(result) {
+        this.closedSubject.next(result);
+        this.closedSubject.complete();
+        this.actionSubject.complete();
+    }
+}
+
+class SolarisDialogStepsContainer {
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    configuration = inject(SOLARIS_DIALOG_DATA);
+    dialogRef = inject(SolarisDialogRef);
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    transitioning = signal(false, ...(ngDevMode ? [{ debugName: "transitioning" }] : []));
+    transitionHalfway = signal(false, ...(ngDevMode ? [{ debugName: "transitionHalfway" }] : []));
+    currentStepIndex = signal(this.resolveInitialStepIndex(), ...(ngDevMode ? [{ debugName: "currentStepIndex" }] : []));
+    showProgress = this.configuration.showProgress ?? true;
+    transitionBlur = this.configuration.transitionBlur ?? true;
+    contentMinHeight = this.configuration.contentMinHeight ?? '0';
+    steps = this.configuration.steps ?? [];
+    transitionDurationMs = this.configuration.transitionDurationMs ?? 360;
+    halfwayTimer = 0;
+    transitionTimer = 0;
+    stepInjectors = this.steps.map(step => Injector.create({
+        providers: [
+            {
+                provide: SOLARIS_DIALOG_STEP_DATA,
+                useValue: step.data,
+            },
+        ],
+        parent: this.injector,
+    }));
+    trackTransform = computed(() => {
+        return `translate3d(-${this.currentStepIndex() * 100}%, 0, 0)`;
+    }, ...(ngDevMode ? [{ debugName: "trackTransform" }] : []));
+    isFirstStep = computed(() => this.currentStepIndex() === 0, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : []));
+    isLastStep = computed(() => {
+        return this.currentStepIndex() === this.steps.length - 1;
+    }, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
+    transitionDuration = computed(() => {
+        return `${this.transitionDurationMs}ms`;
+    }, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : []));
+    constructor() {
+        this.dialogRef.afterAction().pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(action => {
+            void this.handleAction(action.value);
+        });
+        effect(() => {
+            this.currentStepIndex();
+            this.loading();
+            this.updateDialogHeader();
+            this.updateDialogActions();
+        });
+        queueMicrotask(() => {
+            void this.runBeforeEnter(this.currentStepIndex(), 'initial');
+        });
+    }
+    stepInjector(index) {
+        return this.stepInjectors[index];
+    }
+    async handleAction(value) {
+        switch (value) {
+            case 'cancel':
+                this.dialogRef.close();
+                return;
+            case 'back':
+                await this.goToStep(this.currentStepIndex() - 1, 'backward');
+                return;
+            case 'next':
+                await this.goToStep(this.currentStepIndex() + 1, 'forward');
+                return;
+            case 'finish':
+                await this.finish();
+                return;
+        }
+    }
+    async goToStep(targetIndex, direction) {
+        if (this.loading())
+            return;
+        if (targetIndex < 0 || targetIndex >= this.steps.length)
+            return;
+        const fromIndex = this.currentStepIndex();
+        const canLeave = await this.runBeforeLeave(fromIndex, targetIndex, direction);
+        if (!canLeave)
+            return;
+        const canEnter = await this.runBeforeEnter(targetIndex, direction, fromIndex);
+        if (!canEnter)
+            return;
+        this.runTransitionTo(targetIndex);
+    }
+    async finish() {
+        if (this.loading())
+            return;
+        const index = this.currentStepIndex();
+        const canLeave = await this.runBeforeLeave(index, index, 'forward');
+        if (!canLeave)
+            return;
+        this.dialogRef.close(this.configuration.finishValue);
+    }
+    async runBeforeEnter(toIndex, direction, fromIndex = toIndex) {
+        const step = this.steps[toIndex];
+        if (!step?.beforeEnter) {
+            return true;
+        }
+        this.loading.set(true);
+        try {
+            const result = await step.beforeEnter({
+                fromIndex,
+                toIndex,
+                direction,
+            });
+            return result !== false;
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    async runBeforeLeave(fromIndex, toIndex, direction) {
+        const step = this.steps[fromIndex];
+        if (!step?.beforeLeave) {
+            return true;
+        }
+        this.loading.set(true);
+        try {
+            const result = await step.beforeLeave({
+                fromIndex,
+                toIndex,
+                direction,
+            });
+            return result !== false;
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    updateDialogActions() {
+        if (!this.steps.length) {
+            this.dialogRef.updateActions([]);
+            return;
+        }
+        const step = this.steps[this.currentStepIndex()];
+        if (step?.actions?.length) {
+            this.dialogRef.updateActions(step.actions.map(action => ({
+                ...action,
+                disabled: action.disabled || this.loading(),
+            })));
+            return;
+        }
+        const leftAction = this.isFirstStep()
+            ? {
+                label: this.configuration.cancelLabel ?? 'Cancelar',
+                labelKey: this.configuration.cancelLabelKey,
+                value: 'cancel',
+                variant: 'outline',
+                color: 'surface',
+                closesDialog: false,
+                disabled: this.loading(),
+            }
+            : {
+                label: this.configuration.backLabel ?? 'Voltar',
+                labelKey: this.configuration.backLabelKey,
+                value: 'back',
+                variant: 'outline',
+                color: 'surface',
+                closesDialog: false,
+                disabled: this.loading(),
+            };
+        const rightAction = this.isLastStep()
+            ? {
+                label: this.configuration.finishLabel ?? 'Finalizar',
+                labelKey: this.configuration.finishLabelKey,
+                value: 'finish',
+                variant: 'solid',
+                color: 'primary',
+                closesDialog: false,
+                loading: this.loading(),
+            }
+            : {
+                label: this.configuration.nextLabel ?? 'Continuar',
+                labelKey: this.configuration.nextLabelKey,
+                value: 'next',
+                variant: 'solid',
+                color: 'primary',
+                closesDialog: false,
+                loading: this.loading(),
+            };
+        this.dialogRef.updateActions([leftAction, rightAction]);
+    }
+    resolveInitialStepIndex() {
+        if (!this.steps.length) {
+            return 0;
+        }
+        const index = this.configuration.initialStepIndex ?? 0;
+        return Math.max(0, Math.min(index, this.steps.length - 1));
+    }
+    runTransitionTo(targetIndex) {
+        globalThis.clearTimeout(this.halfwayTimer);
+        globalThis.clearTimeout(this.transitionTimer);
+        this.transitioning.set(true);
+        this.transitionHalfway.set(false);
+        this.currentStepIndex.set(targetIndex);
+        if (this.transitionBlur) {
+            this.halfwayTimer = globalThis.setTimeout(() => {
+                if (this.transitioning()) {
+                    this.transitionHalfway.set(true);
+                }
+            }, Math.round(this.transitionDurationMs / 2));
+        }
+        this.transitionTimer = globalThis.setTimeout(() => {
+            this.transitioning.set(false);
+            this.transitionHalfway.set(false);
+        }, this.transitionDurationMs);
+    }
+    updateDialogHeader() {
+        const step = this.steps[this.currentStepIndex()];
+        this.dialogRef.updateHeader({
+            title: step?.title ?? this.configuration.title,
+            titleKey: step?.titleKey ?? this.configuration.titleKey,
+            titleParams: step?.titleParams ?? this.configuration.titleParams,
+            description: step?.description ?? this.configuration.description,
+            descriptionKey: step?.descriptionKey ?? this.configuration.descriptionKey,
+            descriptionParams: step?.descriptionParams ?? this.configuration.descriptionParams,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogStepsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDialogStepsContainer, isStandalone: true, selector: "solaris-dialog-steps-container", ngImport: i0, template: "<div class=\"solaris-dialog-steps\" [class.is-transitioning]=\"transitioning()\" [class.is-halfway]=\"transitionHalfway()\"\r\n  [class.has-transition-blur]=\"transitionBlur\" [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\">\r\n  @if (showProgress) {\r\n    <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <span class=\"solaris-dialog-steps__dot\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-complete]=\"index < currentStepIndex()\"></span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"solaris-dialog-steps__viewport\">\r\n    <div class=\"solaris-dialog-steps__track\" [style.transform]=\"trackTransform()\"\r\n      [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <section class=\"solaris-dialog-steps__step\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-before]=\"index < currentStepIndex()\" [class.is-after]=\"index > currentStepIndex()\">\r\n          <div class=\"solaris-dialog-steps__step-inner\">\r\n            <ng-container *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"></ng-container>\r\n          </div>\r\n        </section>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-transition-duration: .42s;display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;min-block-size:var(--solaris-dialog-steps-min-height)}.solaris-dialog-steps__track{display:flex;inline-size:100%;min-inline-size:0;align-items:stretch;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__progress{display:flex;justify-content:center;align-items:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:.8rem;block-size:.8rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color .18s ease,transform .18s ease}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,white)}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter calc(var(--solaris-dialog-steps-transition-duration) * .45) ease,opacity calc(var(--solaris-dialog-steps-transition-duration) * .45) ease,transform calc(var(--solaris-dialog-steps-transition-duration) * .45) ease}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.18rem);opacity:.58;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogStepsContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-dialog-steps-container', standalone: true, imports: [
+                        NgComponentOutlet
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-dialog-steps\" [class.is-transitioning]=\"transitioning()\" [class.is-halfway]=\"transitionHalfway()\"\r\n  [class.has-transition-blur]=\"transitionBlur\" [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\">\r\n  @if (showProgress) {\r\n    <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <span class=\"solaris-dialog-steps__dot\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-complete]=\"index < currentStepIndex()\"></span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"solaris-dialog-steps__viewport\">\r\n    <div class=\"solaris-dialog-steps__track\" [style.transform]=\"trackTransform()\"\r\n      [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <section class=\"solaris-dialog-steps__step\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-before]=\"index < currentStepIndex()\" [class.is-after]=\"index > currentStepIndex()\">\r\n          <div class=\"solaris-dialog-steps__step-inner\">\r\n            <ng-container *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"></ng-container>\r\n          </div>\r\n        </section>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-transition-duration: .42s;display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;min-block-size:var(--solaris-dialog-steps-min-height)}.solaris-dialog-steps__track{display:flex;inline-size:100%;min-inline-size:0;align-items:stretch;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__progress{display:flex;justify-content:center;align-items:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:.8rem;block-size:.8rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color .18s ease,transform .18s ease}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,white)}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter calc(var(--solaris-dialog-steps-transition-duration) * .45) ease,opacity calc(var(--solaris-dialog-steps-transition-duration) * .45) ease,transform calc(var(--solaris-dialog-steps-transition-duration) * .45) ease}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.18rem);opacity:.58;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"] }]
+        }], ctorParameters: () => [] });
+
 class SolarisDialogContainer {
     contentHost;
     title;
@@ -3051,6 +3322,7 @@ class SolarisDialogContainer {
     showCloseButton = true;
     actionSize;
     actions = [];
+    actionAlignment = 'end';
     ariaLabel;
     ariaLabelledBy;
     ariaDescribedBy;
@@ -3119,13 +3391,13 @@ class SolarisDialogContainer {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDialogContainer, isStandalone: true, selector: "solaris-dialog-container", inputs: { title: "title", titleKey: "titleKey", titleParams: "titleParams", description: "description", descriptionKey: "descriptionKey", descriptionParams: "descriptionParams", size: "size", showCloseButton: "showCloseButton", actionSize: "actionSize", actions: "actions", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy" }, outputs: { closeClick: "closeClick", actionClick: "actionClick" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<section class=\"solaris-dialog\" [attr.data-size]=\"size\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"ariaLabel || null\"\r\n  [attr.aria-labelledby]=\"resolvedAriaLabelledBy\" [attr.aria-describedby]=\"resolvedAriaDescribedBy\">\r\n  @if (hasHeader) {\r\n    <header class=\"solaris-dialog__header\">\r\n      <div class=\"solaris-dialog__heading\">\r\n        @if (title || titleKey) {\r\n          <h2 class=\"solaris-dialog__title\" [id]=\"titleId\">\r\n            @if (titleKey) {\r\n              {{ titleKey }}\r\n            } @else {\r\n              {{ title }}\r\n            }\r\n          </h2>\r\n        }\r\n\r\n        @if (hasDescription) {\r\n          <p class=\"solaris-dialog__description\" [id]=\"descriptionId\">\r\n            @if (descriptionKey) {\r\n              {{ descriptionKey }}\r\n            } @else {\r\n              {{ description }}\r\n            }\r\n          </p>\r\n        }\r\n      </div>\r\n\r\n      @if (showCloseButton) {\r\n        <button type=\"button\" class=\"solaris-dialog__close\" aria-label=\"Fechar\" (click)=\"closeClick.emit()\">\r\n          <i class=\"ph ph-x\"></i>\r\n        </button>\r\n      }\r\n    </header>\r\n  }\r\n\r\n  <div class=\"solaris-dialog__body\">\r\n    <ng-template #contentHost></ng-template>\r\n  </div>\r\n\r\n  @if (hasActions) {\r\n    <footer class=\"solaris-dialog__footer\">\r\n      @for (action of actions; track action.label ?? action.labelKey ?? $index) {\r\n        <button type=\"button\" solaris-button class=\"solaris-dialog__action\" [size]=\"resolveActionSize(action)\"\r\n          [variant]=\"resolveActionVariant(action)\" [color]=\"resolveActionColor(action)\" [disabled]=\"action.disabled\"\r\n          [loading]=\"action.loading\" [fullWidth]=\"action.fullWidth\" (click)=\"actionClick.emit(action)\">\r\n          @if (action.labelKey) {\r\n            {{ action.labelKey }}\r\n          } @else {\r\n            {{ action.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </footer>\r\n  }\r\n</section>\r\n", styles: [":host{display:grid;inline-size:100%;block-size:100%;pointer-events:none;max-inline-size:100%}:host>.solaris-dialog{pointer-events:auto}.solaris-dialog{--solaris-dialog-max-width: 56rem;--solaris-dialog-max-height: min(88vh, 72rem);--solaris-dialog-fg: var(--solaris-color-text);--solaris-dialog-padding: var(--solaris-space-5);--solaris-dialog-bg: var(--solaris-color-surface);--solaris-dialog-radius: var(--solaris-radius-lg);--solaris-dialog-shadow: var(--solaris-shadow-lg);--solaris-dialog-border: color-mix(in srgb, var(--solaris-color-border) 82%, transparent);inline-size:min(100vw - 3.2rem,var(--solaris-dialog-max-width));max-block-size:var(--solaris-dialog-max-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--solaris-dialog-fg);background:var(--solaris-dialog-bg);border:1px solid var(--solaris-dialog-border);border-radius:var(--solaris-dialog-radius);box-shadow:var(--solaris-dialog-shadow);overflow:hidden;animation:solaris-dialog-in .14s ease}.solaris-dialog[data-size=sm]{--solaris-dialog-max-width: 40rem}.solaris-dialog[data-size=md]{--solaris-dialog-max-width: 56rem}.solaris-dialog[data-size=lg]{--solaris-dialog-max-width: 72rem}.solaris-dialog[data-size=xl]{--solaris-dialog-max-width: 96rem}.solaris-dialog[data-size=fullscreen]{inline-size:calc(100vw - 3.2rem);block-size:calc(100vh - 3.2rem);--solaris-dialog-max-width: none;--solaris-dialog-max-height: none}.solaris-dialog__header{display:grid;min-inline-size:0;align-items:start;gap:var(--solaris-space-4);padding:var(--solaris-dialog-padding);grid-template-columns:minmax(0,1fr) auto;border-block-end:1px solid var(--solaris-dialog-border)}.solaris-dialog__heading{display:grid;min-inline-size:0;gap:var(--solaris-space-1)}.solaris-dialog__title{margin:0;font-weight:750;font-size:var(--solaris-fs-18);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-dialog__description{margin:0;font-size:var(--solaris-fs-13);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-dialog__close{padding:0;border:0;outline:none;cursor:pointer;block-size:3.2rem;inline-size:3.2rem;place-items:center;display:inline-grid;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}.solaris-dialog__close:hover,.solaris-dialog__close:focus-visible{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-dialog__close:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 24%,transparent)}.solaris-dialog__close i{line-height:1;font-size:var(--solaris-fs-18)}.solaris-dialog__body{overflow:auto;min-block-size:0;padding:var(--solaris-dialog-padding)}.solaris-dialog__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2);border-block-start:1px solid var(--solaris-dialog-border);padding:var(--solaris-space-4) var(--solaris-dialog-padding);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog__action{white-space:nowrap}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDialogContainer, isStandalone: true, selector: "solaris-dialog-container", inputs: { title: "title", titleKey: "titleKey", titleParams: "titleParams", description: "description", descriptionKey: "descriptionKey", descriptionParams: "descriptionParams", size: "size", showCloseButton: "showCloseButton", actionSize: "actionSize", actions: "actions", actionAlignment: "actionAlignment", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy" }, outputs: { closeClick: "closeClick", actionClick: "actionClick" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<section class=\"solaris-dialog\" [attr.data-size]=\"size\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"ariaLabel || null\"\r\n  [attr.aria-labelledby]=\"resolvedAriaLabelledBy\" [attr.aria-describedby]=\"resolvedAriaDescribedBy\">\r\n  @if (hasHeader) {\r\n    <header class=\"solaris-dialog__header\">\r\n      <div class=\"solaris-dialog__heading\">\r\n        @if (title || titleKey) {\r\n          <h2 class=\"solaris-dialog__title\" [id]=\"titleId\">\r\n            @if (titleKey) {\r\n              {{ titleKey }}\r\n            } @else {\r\n              {{ title }}\r\n            }\r\n          </h2>\r\n        }\r\n\r\n        @if (hasDescription) {\r\n          <p class=\"solaris-dialog__description\" [id]=\"descriptionId\">\r\n            @if (descriptionKey) {\r\n              {{ descriptionKey }}\r\n            } @else {\r\n              {{ description }}\r\n            }\r\n          </p>\r\n        }\r\n      </div>\r\n\r\n      @if (showCloseButton) {\r\n        <button type=\"button\" class=\"solaris-dialog__close\" aria-label=\"Fechar\" (click)=\"closeClick.emit()\">\r\n          <i class=\"ph ph-x\"></i>\r\n        </button>\r\n      }\r\n    </header>\r\n  }\r\n\r\n  <div class=\"solaris-dialog__body\">\r\n    <ng-template #contentHost></ng-template>\r\n  </div>\r\n\r\n  @if (hasActions) {\r\n    <footer class=\"solaris-dialog__footer\" [attr.data-action-alignment]=\"actionAlignment\">\r\n      @for (action of actions; track action.label ?? action.labelKey ?? $index) {\r\n        <button type=\"button\" solaris-button class=\"solaris-dialog__action\" [size]=\"resolveActionSize(action)\"\r\n          [variant]=\"resolveActionVariant(action)\" [color]=\"resolveActionColor(action)\" [disabled]=\"action.disabled\"\r\n          [loading]=\"action.loading\" [fullWidth]=\"action.fullWidth\" (click)=\"actionClick.emit(action)\">\r\n          @if (action.labelKey) {\r\n            {{ action.labelKey }}\r\n          } @else {\r\n            {{ action.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </footer>\r\n  }\r\n</section>\r\n", styles: [":host{display:grid;inline-size:100%;block-size:100%;pointer-events:none;max-inline-size:100%}:host>.solaris-dialog{pointer-events:auto}.solaris-dialog{--solaris-dialog-max-width: 56rem;--solaris-dialog-max-height: min(88vh, 72rem);--solaris-dialog-fg: var(--solaris-color-text);--solaris-dialog-padding: var(--solaris-space-5);--solaris-dialog-bg: var(--solaris-color-surface);--solaris-dialog-radius: var(--solaris-radius-lg);--solaris-dialog-shadow: var(--solaris-shadow-lg);--solaris-dialog-border: color-mix(in srgb, var(--solaris-color-border) 82%, transparent);inline-size:min(100vw - 3.2rem,var(--solaris-dialog-max-width));max-block-size:var(--solaris-dialog-max-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--solaris-dialog-fg);background:var(--solaris-dialog-bg);border:1px solid var(--solaris-dialog-border);border-radius:var(--solaris-dialog-radius);box-shadow:var(--solaris-dialog-shadow);overflow:hidden;animation:solaris-dialog-in .14s ease}.solaris-dialog[data-size=sm]{--solaris-dialog-max-width: 40rem}.solaris-dialog[data-size=md]{--solaris-dialog-max-width: 56rem}.solaris-dialog[data-size=lg]{--solaris-dialog-max-width: 72rem}.solaris-dialog[data-size=xl]{--solaris-dialog-max-width: 96rem}.solaris-dialog[data-size=fullscreen]{inline-size:calc(100vw - 3.2rem);block-size:calc(100vh - 3.2rem);--solaris-dialog-max-width: none;--solaris-dialog-max-height: none}.solaris-dialog__header{display:grid;min-inline-size:0;align-items:start;gap:var(--solaris-space-4);padding:var(--solaris-dialog-padding);grid-template-columns:minmax(0,1fr) auto;border-block-end:1px solid var(--solaris-dialog-border)}.solaris-dialog__heading{display:grid;min-inline-size:0;gap:var(--solaris-space-1)}.solaris-dialog__title{margin:0;font-weight:750;font-size:var(--solaris-fs-18);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-dialog__description{margin:0;font-size:var(--solaris-fs-13);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-dialog__close{padding:0;border:0;outline:none;cursor:pointer;block-size:3.2rem;inline-size:3.2rem;place-items:center;display:inline-grid;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}.solaris-dialog__close:hover,.solaris-dialog__close:focus-visible{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-dialog__close:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 24%,transparent)}.solaris-dialog__close i{line-height:1;font-size:var(--solaris-fs-18)}.solaris-dialog__body{overflow:auto;min-block-size:0;padding:var(--solaris-dialog-padding)}.solaris-dialog__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-3);border-block-start:1px solid var(--solaris-dialog-border);padding:var(--solaris-space-4) var(--solaris-dialog-padding);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog__footer[data-action-alignment=start]{justify-content:flex-start}.solaris-dialog__footer[data-action-alignment=center]{justify-content:center}.solaris-dialog__footer[data-action-alignment=end]{justify-content:flex-end}.solaris-dialog__footer[data-action-alignment=space-between]{justify-content:space-between}.solaris-dialog__action{white-space:nowrap}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogContainer, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-dialog-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         SolarisButtonDirective
-                    ], template: "<section class=\"solaris-dialog\" [attr.data-size]=\"size\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"ariaLabel || null\"\r\n  [attr.aria-labelledby]=\"resolvedAriaLabelledBy\" [attr.aria-describedby]=\"resolvedAriaDescribedBy\">\r\n  @if (hasHeader) {\r\n    <header class=\"solaris-dialog__header\">\r\n      <div class=\"solaris-dialog__heading\">\r\n        @if (title || titleKey) {\r\n          <h2 class=\"solaris-dialog__title\" [id]=\"titleId\">\r\n            @if (titleKey) {\r\n              {{ titleKey }}\r\n            } @else {\r\n              {{ title }}\r\n            }\r\n          </h2>\r\n        }\r\n\r\n        @if (hasDescription) {\r\n          <p class=\"solaris-dialog__description\" [id]=\"descriptionId\">\r\n            @if (descriptionKey) {\r\n              {{ descriptionKey }}\r\n            } @else {\r\n              {{ description }}\r\n            }\r\n          </p>\r\n        }\r\n      </div>\r\n\r\n      @if (showCloseButton) {\r\n        <button type=\"button\" class=\"solaris-dialog__close\" aria-label=\"Fechar\" (click)=\"closeClick.emit()\">\r\n          <i class=\"ph ph-x\"></i>\r\n        </button>\r\n      }\r\n    </header>\r\n  }\r\n\r\n  <div class=\"solaris-dialog__body\">\r\n    <ng-template #contentHost></ng-template>\r\n  </div>\r\n\r\n  @if (hasActions) {\r\n    <footer class=\"solaris-dialog__footer\">\r\n      @for (action of actions; track action.label ?? action.labelKey ?? $index) {\r\n        <button type=\"button\" solaris-button class=\"solaris-dialog__action\" [size]=\"resolveActionSize(action)\"\r\n          [variant]=\"resolveActionVariant(action)\" [color]=\"resolveActionColor(action)\" [disabled]=\"action.disabled\"\r\n          [loading]=\"action.loading\" [fullWidth]=\"action.fullWidth\" (click)=\"actionClick.emit(action)\">\r\n          @if (action.labelKey) {\r\n            {{ action.labelKey }}\r\n          } @else {\r\n            {{ action.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </footer>\r\n  }\r\n</section>\r\n", styles: [":host{display:grid;inline-size:100%;block-size:100%;pointer-events:none;max-inline-size:100%}:host>.solaris-dialog{pointer-events:auto}.solaris-dialog{--solaris-dialog-max-width: 56rem;--solaris-dialog-max-height: min(88vh, 72rem);--solaris-dialog-fg: var(--solaris-color-text);--solaris-dialog-padding: var(--solaris-space-5);--solaris-dialog-bg: var(--solaris-color-surface);--solaris-dialog-radius: var(--solaris-radius-lg);--solaris-dialog-shadow: var(--solaris-shadow-lg);--solaris-dialog-border: color-mix(in srgb, var(--solaris-color-border) 82%, transparent);inline-size:min(100vw - 3.2rem,var(--solaris-dialog-max-width));max-block-size:var(--solaris-dialog-max-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--solaris-dialog-fg);background:var(--solaris-dialog-bg);border:1px solid var(--solaris-dialog-border);border-radius:var(--solaris-dialog-radius);box-shadow:var(--solaris-dialog-shadow);overflow:hidden;animation:solaris-dialog-in .14s ease}.solaris-dialog[data-size=sm]{--solaris-dialog-max-width: 40rem}.solaris-dialog[data-size=md]{--solaris-dialog-max-width: 56rem}.solaris-dialog[data-size=lg]{--solaris-dialog-max-width: 72rem}.solaris-dialog[data-size=xl]{--solaris-dialog-max-width: 96rem}.solaris-dialog[data-size=fullscreen]{inline-size:calc(100vw - 3.2rem);block-size:calc(100vh - 3.2rem);--solaris-dialog-max-width: none;--solaris-dialog-max-height: none}.solaris-dialog__header{display:grid;min-inline-size:0;align-items:start;gap:var(--solaris-space-4);padding:var(--solaris-dialog-padding);grid-template-columns:minmax(0,1fr) auto;border-block-end:1px solid var(--solaris-dialog-border)}.solaris-dialog__heading{display:grid;min-inline-size:0;gap:var(--solaris-space-1)}.solaris-dialog__title{margin:0;font-weight:750;font-size:var(--solaris-fs-18);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-dialog__description{margin:0;font-size:var(--solaris-fs-13);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-dialog__close{padding:0;border:0;outline:none;cursor:pointer;block-size:3.2rem;inline-size:3.2rem;place-items:center;display:inline-grid;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}.solaris-dialog__close:hover,.solaris-dialog__close:focus-visible{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-dialog__close:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 24%,transparent)}.solaris-dialog__close i{line-height:1;font-size:var(--solaris-fs-18)}.solaris-dialog__body{overflow:auto;min-block-size:0;padding:var(--solaris-dialog-padding)}.solaris-dialog__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2);border-block-start:1px solid var(--solaris-dialog-border);padding:var(--solaris-space-4) var(--solaris-dialog-padding);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog__action{white-space:nowrap}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
+                    ], template: "<section class=\"solaris-dialog\" [attr.data-size]=\"size\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"ariaLabel || null\"\r\n  [attr.aria-labelledby]=\"resolvedAriaLabelledBy\" [attr.aria-describedby]=\"resolvedAriaDescribedBy\">\r\n  @if (hasHeader) {\r\n    <header class=\"solaris-dialog__header\">\r\n      <div class=\"solaris-dialog__heading\">\r\n        @if (title || titleKey) {\r\n          <h2 class=\"solaris-dialog__title\" [id]=\"titleId\">\r\n            @if (titleKey) {\r\n              {{ titleKey }}\r\n            } @else {\r\n              {{ title }}\r\n            }\r\n          </h2>\r\n        }\r\n\r\n        @if (hasDescription) {\r\n          <p class=\"solaris-dialog__description\" [id]=\"descriptionId\">\r\n            @if (descriptionKey) {\r\n              {{ descriptionKey }}\r\n            } @else {\r\n              {{ description }}\r\n            }\r\n          </p>\r\n        }\r\n      </div>\r\n\r\n      @if (showCloseButton) {\r\n        <button type=\"button\" class=\"solaris-dialog__close\" aria-label=\"Fechar\" (click)=\"closeClick.emit()\">\r\n          <i class=\"ph ph-x\"></i>\r\n        </button>\r\n      }\r\n    </header>\r\n  }\r\n\r\n  <div class=\"solaris-dialog__body\">\r\n    <ng-template #contentHost></ng-template>\r\n  </div>\r\n\r\n  @if (hasActions) {\r\n    <footer class=\"solaris-dialog__footer\" [attr.data-action-alignment]=\"actionAlignment\">\r\n      @for (action of actions; track action.label ?? action.labelKey ?? $index) {\r\n        <button type=\"button\" solaris-button class=\"solaris-dialog__action\" [size]=\"resolveActionSize(action)\"\r\n          [variant]=\"resolveActionVariant(action)\" [color]=\"resolveActionColor(action)\" [disabled]=\"action.disabled\"\r\n          [loading]=\"action.loading\" [fullWidth]=\"action.fullWidth\" (click)=\"actionClick.emit(action)\">\r\n          @if (action.labelKey) {\r\n            {{ action.labelKey }}\r\n          } @else {\r\n            {{ action.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </footer>\r\n  }\r\n</section>\r\n", styles: [":host{display:grid;inline-size:100%;block-size:100%;pointer-events:none;max-inline-size:100%}:host>.solaris-dialog{pointer-events:auto}.solaris-dialog{--solaris-dialog-max-width: 56rem;--solaris-dialog-max-height: min(88vh, 72rem);--solaris-dialog-fg: var(--solaris-color-text);--solaris-dialog-padding: var(--solaris-space-5);--solaris-dialog-bg: var(--solaris-color-surface);--solaris-dialog-radius: var(--solaris-radius-lg);--solaris-dialog-shadow: var(--solaris-shadow-lg);--solaris-dialog-border: color-mix(in srgb, var(--solaris-color-border) 82%, transparent);inline-size:min(100vw - 3.2rem,var(--solaris-dialog-max-width));max-block-size:var(--solaris-dialog-max-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--solaris-dialog-fg);background:var(--solaris-dialog-bg);border:1px solid var(--solaris-dialog-border);border-radius:var(--solaris-dialog-radius);box-shadow:var(--solaris-dialog-shadow);overflow:hidden;animation:solaris-dialog-in .14s ease}.solaris-dialog[data-size=sm]{--solaris-dialog-max-width: 40rem}.solaris-dialog[data-size=md]{--solaris-dialog-max-width: 56rem}.solaris-dialog[data-size=lg]{--solaris-dialog-max-width: 72rem}.solaris-dialog[data-size=xl]{--solaris-dialog-max-width: 96rem}.solaris-dialog[data-size=fullscreen]{inline-size:calc(100vw - 3.2rem);block-size:calc(100vh - 3.2rem);--solaris-dialog-max-width: none;--solaris-dialog-max-height: none}.solaris-dialog__header{display:grid;min-inline-size:0;align-items:start;gap:var(--solaris-space-4);padding:var(--solaris-dialog-padding);grid-template-columns:minmax(0,1fr) auto;border-block-end:1px solid var(--solaris-dialog-border)}.solaris-dialog__heading{display:grid;min-inline-size:0;gap:var(--solaris-space-1)}.solaris-dialog__title{margin:0;font-weight:750;font-size:var(--solaris-fs-18);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-dialog__description{margin:0;font-size:var(--solaris-fs-13);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-dialog__close{padding:0;border:0;outline:none;cursor:pointer;block-size:3.2rem;inline-size:3.2rem;place-items:center;display:inline-grid;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}.solaris-dialog__close:hover,.solaris-dialog__close:focus-visible{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-dialog__close:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 24%,transparent)}.solaris-dialog__close i{line-height:1;font-size:var(--solaris-fs-18)}.solaris-dialog__body{overflow:auto;min-block-size:0;padding:var(--solaris-dialog-padding)}.solaris-dialog__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-3);border-block-start:1px solid var(--solaris-dialog-border);padding:var(--solaris-space-4) var(--solaris-dialog-padding);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog__footer[data-action-alignment=start]{justify-content:flex-start}.solaris-dialog__footer[data-action-alignment=center]{justify-content:center}.solaris-dialog__footer[data-action-alignment=end]{justify-content:flex-end}.solaris-dialog__footer[data-action-alignment=space-between]{justify-content:space-between}.solaris-dialog__action{white-space:nowrap}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
         }], propDecorators: { contentHost: [{
                 type: ViewChild,
                 args: ['contentHost', { read: ViewContainerRef, static: true }]
@@ -3149,6 +3421,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], actions: [{
                 type: Input
+            }], actionAlignment: [{
+                type: Input
             }], ariaLabel: [{
                 type: Input
             }], ariaLabelledBy: [{
@@ -3161,29 +3435,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Output
             }] } });
 
-const SOLARIS_DIALOG_DATA = new InjectionToken('SOLARIS_DIALOG_DATA');
-
-class SolarisDialogRef {
-    closedSubject = new Subject();
-    closeFn;
-    afterClosed() {
-        return this.closedSubject.asObservable();
-    }
-    close(result) {
-        this.closeFn?.(result);
-    }
-    _attachCloseFn(fn) {
-        this.closeFn = fn;
-    }
-    _finishClose(result) {
-        this.closedSubject.next(result);
-        this.closedSubject.complete();
-    }
-}
-
 class SolarisDialogService {
-    appRef = inject(ApplicationRef);
     environmentInjector = inject(EnvironmentInjector);
+    appRef = inject(ApplicationRef);
     open(component, configuration = {}) {
         const dialogRef = new SolarisDialogRef();
         const backdrop = document.createElement('div');
@@ -3215,12 +3469,26 @@ class SolarisDialogService {
         containerRef.setInput('descriptionKey', configuration.descriptionKey);
         containerRef.setInput('descriptionParams', configuration.descriptionParams);
         containerRef.setInput('size', configuration.size ?? 'md');
-        containerRef.setInput('showCloseButton', configuration.showCloseButton ?? !configuration.disableClose);
         containerRef.setInput('actions', configuration.actions ?? []);
         containerRef.setInput('actionSize', configuration.actionSize);
+        containerRef.setInput('actionAlignment', configuration.actionAlignment ?? 'end');
         containerRef.setInput('ariaLabel', configuration.ariaLabel);
         containerRef.setInput('ariaLabelledBy', configuration.ariaLabelledBy);
         containerRef.setInput('ariaDescribedBy', configuration.ariaDescribedBy);
+        containerRef.setInput('showCloseButton', configuration.showCloseButton ?? !configuration.disableClose);
+        dialogRef._attachActionsUpdateFn(actions => {
+            containerRef.setInput('actions', [...actions]);
+            containerRef.changeDetectorRef.detectChanges();
+        });
+        dialogRef._attachHeaderUpdateFn(header => {
+            containerRef.setInput('title', header.title);
+            containerRef.setInput('titleKey', header.titleKey);
+            containerRef.setInput('titleParams', header.titleParams);
+            containerRef.setInput('description', header.description);
+            containerRef.setInput('descriptionKey', header.descriptionKey);
+            containerRef.setInput('descriptionParams', header.descriptionParams);
+            containerRef.changeDetectorRef.detectChanges();
+        });
         this.appRef.attachView(containerRef.hostView);
         containerRef.changeDetectorRef.detectChanges();
         const contentRef = createComponent(component, {
@@ -3261,14 +3529,24 @@ class SolarisDialogService {
             }
         });
         containerRef.instance.actionClick.subscribe((action) => {
-            if (action.disabled)
+            if (action.disabled || action.loading)
                 return;
+            dialogRef._emitAction(action);
             if (action.closesDialog ?? true) {
                 dialogRef.close(action.value);
             }
         });
         return dialogRef;
     }
+    openSteps(configuration) {
+        return this.open(SolarisDialogStepsContainer, {
+            ...configuration,
+            data: configuration,
+            actions: [],
+            actionAlignment: configuration.actionAlignment ?? 'space-between',
+            showCloseButton: configuration.showCloseButton ?? true,
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogService, providedIn: 'root' });
 }
@@ -8136,5 +8414,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_CARD_GROUP, SOLARIS_CARD_SLOT_DIRECTIVES, SOLARIS_DIALOG_DATA, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SOLARIS_RADIO_GROUP, SolarisAvatar, SolarisAvatarDropdown, SolarisAvatarOverlayDirective, SolarisAvatarStack, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisCard, SolarisCardActionsDirective, SolarisCardBadgeDirective, SolarisCardDescriptionDirective, SolarisCardEyebrowDirective, SolarisCardFooterDirective, SolarisCardGroup, SolarisCardMedia, SolarisCardMediaDirective, SolarisCardMediaOverlayDirective, SolarisCardMetaDirective, SolarisCardTitleDirective, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDialogContainer, SolarisDialogRef, SolarisDialogService, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFloatingOverlayService, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisPresenceAvatar, SolarisRadio, SolarisRadioGroup, SolarisRichTooltipDirective, SolarisRichTooltipPanel, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSelectionCard, SolarisStepper, SolarisStepperItem, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, SolarisTooltipDirective, SolarisTooltipPanel, computeFloatingPosition, computePopoverPosition, provideSolarisNotifications, repositionTooltipOverlay, uniqueId };
+export { ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_CARD_GROUP, SOLARIS_CARD_SLOT_DIRECTIVES, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_STEP_DATA, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SOLARIS_RADIO_GROUP, SolarisAvatar, SolarisAvatarDropdown, SolarisAvatarOverlayDirective, SolarisAvatarStack, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisCard, SolarisCardActionsDirective, SolarisCardBadgeDirective, SolarisCardDescriptionDirective, SolarisCardEyebrowDirective, SolarisCardFooterDirective, SolarisCardGroup, SolarisCardMedia, SolarisCardMediaDirective, SolarisCardMediaOverlayDirective, SolarisCardMetaDirective, SolarisCardTitleDirective, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDialogContainer, SolarisDialogRef, SolarisDialogService, SolarisDialogStepsContainer, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFloatingOverlayService, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisPresenceAvatar, SolarisRadio, SolarisRadioGroup, SolarisRichTooltipDirective, SolarisRichTooltipPanel, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSelectionCard, SolarisStepper, SolarisStepperItem, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, SolarisTooltipDirective, SolarisTooltipPanel, computeFloatingPosition, computePopoverPosition, provideSolarisNotifications, repositionTooltipOverlay, uniqueId };
 //# sourceMappingURL=educarehq-solaris-components.mjs.map